Adding social media link in Modern Template header? [SOLVED]

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Adding social media link in Modern Template header? [SOLVED]

Postby Orwell » July 31st, 2018, 10:57 am

* * * * * * * * * * * * * * * * *
. . . [SOLVED BELOW]. . .

* * * * * * * * * * * * * * * * *


Hi everyone !

So I'm a bit lost.
In the header of the Modern template, you can set up links to your social media like facebook, Twitter, or Patreon, next to the RSS and +FAV buttons:
Code: Select all
<ul id="oh_icons">
            <!-- Yo! Authors! You can put your Patreon/Facebook/Twitter links here! -->
                                <!-- <li><a href="#" class="facebook" target="_blank"></a></li> -->
            <!-- <li><a href="#" class="twitter" target="_blank"></a></li> -->
                                <!-- <li><a href="#" class="patreon" target="_blank"></a></li> -->
                                <li><a href="{SITE_URL_FULL}rss/" class="rss" target="_blank"></a></li>
            <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="fav" target="_blank"></a></li>

Those 3 seem to be built-in, as when I (successfully) linked my Twitter I didn't even need to link any new icon, it just appeared.
Code: Select all
<li><a href="https://twitter.com/orwell_webcomic" class="twitter" target="_blank"></a></li>

Image

I tried to do the same with my Tumblr. There wasn't any class="tumblr" in the examples but I tried anyway.
Code: Select all
<li><a href="https://orwell-webcomic.tumblr.com/" class="tumblr" target="_blank"></a></li>

Didn't work.
"No problem" I thought. I simply need to link a new icon.
So I did:
Code: Select all
<li><a href="https://https://orwell-webcomic.tumblr.com/"><img src="https://i.imgur.com/l2z5bAq.png" alt="Tumblr"></a>/li>

After a bit of tweaking I found the right order and the right icon size (32x32 for anyone wondering) (also in my pics it's in black but if you want to match the other icons I recommend the HEX color #262626, so if anyone needs it: tumblr icon 32x32 #262626)
Here's what I have:
Code: Select all
<ul id="oh_icons">
                
            <!-- Yo! Authors! You can put your Patreon/Facebook/Twitter links here! -->
            <!-- <li><a href="#" class="patreon" target="_blank"></a></li> -->
            <!-- <li><a href="#" class="facebook" target="_blank"></a></li> -->
            <!-- <li><a href="#" class="twitter" target="_blank"></a></li> -->
                                <li><a href="https://orwell-webcomic.tumblr.com/"><img src="https://i.imgur.com/l2z5bAq.png" alt="Tumblr"></a></li>
                                <li><a href="https://twitter.com/orwell_webcomic" class="twitter" target="_blank"></a></li>
                                <li><a href="{SITE_URL_FULL}rss/" class="rss" target="_blank"></a></li>
            <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="fav" target="_blank"></a></li>
         
         </ul>

And here's the problem:
Image

Whatever I do, wherever I put the Tumblr line, the Patreon icon keeps showing up uninvited.
I tried putting it on the other side, in place of the RSS one.
Image
Nope.

Tried deleting this line (I know it's not "switched on" but I'm trying stuff) :
Code: Select all
                                <!-- <li><a href="#" class="patreon"  target="_blank"></a></li> -->

No change.

Tried "switching it on" to see if it would take its rightful place and leave my poor icon alone (figured it didn't matter what url I put):
Code: Select all
<li><a href="https://twitter.com/orwell_webcomic" class="patreon" target="_blank"></a></li>

And...
Image
THEY ARE MULTIPLYING

The link works perfectly otherwise, sends to Tumblr and everything. It's just that the Patreon icon prevents the Tumblr one from aligning with the others.
And we can't have that, can we.
Jokes aside, it's as if the template can't quite recognize links that aren't "built-in" and tries to fill the space with what it already knows. (I know fuck all about coding, so if this sounds like bullshit it probably is)
But I've seen webcomics using this template with different icons (like here and here) so it is possible and I'm just missing something.

Hopefully you can enlighten my poor, clueless mind.
Thank you for your time.
Last edited by Orwell on August 1st, 2018, 3:24 pm, edited 2 times in total.
User avatar
Orwell
 
Posts: 5
Joined: July 4th, 2013, 12:44 pm

Re: Adding social media links in Modern Template header?

Postby eishiya » July 31st, 2018, 12:56 pm

It usually helps to link to the comic where the problem is happening. It's difficult to see what's wrong without getting to play around with it.

It looks like the problem is list items (<li>) within the "oh_icons" list automatically get their background set to the spritesheet containing the various icons, and Patreon is the first one in the sheet. When you use your tumblr icon as an image, you're just putting it on top of that background. Instead, you should structure your tumblr link the same was as the others, using your image as a background, replacing the default sheet:

HTML:
Code: Select all
<li><a href="your tumblr URL" class="tumblr" target="_blank"></a></li>

(note the "tumblr" class)

CSS:
Code: Select all
#oh_icons li a.tumblr {
   background: url(your_tumblr_icon_URL) no-repeat;
}


This should replace just the background, and keep all the other properties (the 32x32 size, etc). If you plan to add multiple icons, I recommend creating a single spritesheet with them and using the background-position CSS rule to determine which is displayed, the same way the default ones work.

If this doesn't work, please leave the non-working code in place and link to your comic, so I can see what's wrong first-hand.
Image
User avatar
eishiya
 
Posts: 9395
Joined: December 5th, 2009, 11:17 am

Re: Adding social media links in Modern Template header?

Postby Orwell » July 31st, 2018, 5:27 pm

THANK YOU!!!
This is absolutly perfect!


Sorry for not linking the comic, I was working on an unlisted one so as not to cause distress to anyone but myself with my atrocious attempts at coding (x__x)
But yeah this is brilliant :

Image

I even played around for a bit, trying to see how many I could add.
Answer:
Image
A lot.


~ ~ ~ To recap : ~ ~ ~

In Webcomic Management -> Appearance -> Overall Layout, under <ul id="oh_icons"> with all the other links :
Code: Select all
<ul id="oh_icons">
         
            <!-- Yo! Authors! You can put your Patreon/Facebook/Twitter links here! -->
            <!-- <li><a href="#" class="patreon" target="_blank"></a></li> -->
            <!-- <li><a href="#" class="facebook" target="_blank"></a></li> -->
            <!-- <li><a href="#" class="twitter" target="_blank"></a></li> -->
            <li><a href="{SITE_URL_FULL}rss/" class="rss" target="_blank"></a></li>
            <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="fav" target="_blank"></a></li>


1)To add a link other than Patreon/Facebook/Twitter (which are already "built-in"), add:

Code: Select all
<style>                               
#oh_icons li a.keyword {
   background: url(icon url) no-repeat;
}
</style>
                                <li><a href="your url" class="keyword" target="_blank"></a></li>

Replace the two url, as well as the two "keywords". It cannot be "patreon", "facebook", nor "twitter", as they are already listed.
For example, to link my tumblr I wrote:
Code: Select all
<style>                               
#oh_icons li a.tumblr {
   background: url(https://i.imgur.com/giBrzEx.png) no-repeat;
}
</style>
                                <li><a href="https://orwell-webcomic.tumblr.com/" class="tumblr" target="_blank"></a></li>

I could have put "pumpkin" or "turlututu", as long as both keywords are the same you're good.
And if you want to add another link, the keywords will need to be something other than "patreon""facebook""twitter" or"tumblr" (or whatever keyword you choose), as it is now listed as well.
Repeat as many times as necessary.

2) To replace a pre-existing icon:

For exemple if you want to change the +FAV from this:
Image
To this:
Image

You'll have to deactivate this line:
Code: Select all
<li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="fav" target="_blank"></a></li>

By commenting it out, like so:
Code: Select all
<!-- <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="fav" target="_blank"></a></li> -->

(I prefer not to delete it, in case I want it back later)

Now replace it with:
Code: Select all
<style>                               
#oh_icons li a.favorite {
   background: url(https://i.imgur.com/vdaTbdF.png) no-repeat;
}
</style>
                                <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="favorite" target="_blank"></a></li>

Note: the keywords cannot be "fav" as it is the default one. Here I've chosen "favorite".
Replace the icon url if necessary.

This has been the Noob Recap™, thank you for reading.
And thank YOU eishiya for your help!
My webcomic has never looked more dashing ~
Last edited by Orwell on August 1st, 2018, 7:13 am, edited 1 time in total.
User avatar
Orwell
 
Posts: 5
Joined: July 4th, 2013, 12:44 pm

Re: Adding social media links in Modern Template header?

Postby eishiya » July 31st, 2018, 7:55 pm

Glad to hear it worked!

I do not recommend putting <style> tags in the menu like that. Put all your site-wide CSS in Overall Layout, into a single <style> tag. That way there are fewer stylesheets for the browser to process, and you can tweak your styles in one place.
Image
User avatar
eishiya
 
Posts: 9395
Joined: December 5th, 2009, 11:17 am

Re: Adding social media links in Modern Template header?

Postby Orwell » August 1st, 2018, 2:47 am

Oh that makes sense!
I don't need to seprate each style like this:
Code: Select all
<style>                               
#oh_icons li a.tumblr {
   background: url(https://i.imgur.com/giBrzEx.png) no-repeat;
}
</style>
<style>                               
#oh_icons li a.favorite {
   background: url(https://i.imgur.com/vdaTbdF.png) no-repeat;
}
</style>

Image

I can just do this:
Code: Select all
<style>                               
#oh_icons li a.tumblr {
   background: url(https://i.imgur.com/giBrzEx.png) no-repeat;
}                               
#oh_icons li a.favorite {
   background: url(https://i.imgur.com/vdaTbdF.png) no-repeat;
}
</style>

Image

Is it better to leave it under <ul id="oh_icons"> or should I put it somewhere like <div id="overall_wrapper">, because I just tried and it looks the same and works perfectly, so I'm guessing it's just a matter of optimization?
Code: Select all
</head>

<body>

   <div id="overall_wrapper">
<style>                               
#oh_icons li a.tumblr {
   background: url(https://i.imgur.com/giBrzEx.png) no-repeat;
}                               
#oh_icons li a.favorite {
   background: url(https://i.imgur.com/vdaTbdF.png) no-repeat;
}
</style>

Image
User avatar
Orwell
 
Posts: 5
Joined: July 4th, 2013, 12:44 pm

Re: Adding social media links in Modern Template header?

Postby eishiya » August 1st, 2018, 8:36 am

Your <style> tag should be within the <head> element in Overall Layout.
Image
User avatar
eishiya
 
Posts: 9395
Joined: December 5th, 2009, 11:17 am

Re: Adding social media links in Modern Template header?

Postby Orwell » August 1st, 2018, 3:13 pm

Duly noted, thank you so much!
User avatar
Orwell
 
Posts: 5
Joined: July 4th, 2013, 12:44 pm


Return to Template Development & Support

Who is online

Users browsing this forum: Bing [Bot] and 4 guests