Help adding Youtube icon to traction theme

jaroddev · Member · Apr 17, 2014 at 2:40 pm
Copy link

Add topic to favorites
I’m looking to add the YouTube icon to the social media icon bar in the traction theme. It isn’t one of the options provided with the theme. However, I do have custom CSS upgrade and was wondering if anyone would be able to help me put the icon there so I can link it to my YouTube channel.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 17, 2014 at 9:07 pm
Copy link
Hi there, I’ve looked at the HTML and the CSS associated with the social icons at upper right, and don’t readily see a way to do this, but if you want to experiment a little, go to Appearance > Theme Options and put a link to your Youtube page into the flickr section and let me see if I can find a way to change that into a Youtube icon.

One thing to know though, if you hover over one of the icons for a bit, a tooltip box will come up that says the name of the social network, so if I can do this, the Youtube will say “flickr”. There isn’t anyway to hide the tooltip that I’ve been able to find.
andyjbell · Member · Apr 17, 2014 at 9:30 pm
Copy link
The images for the social media icons on this theme are in the theme’s HTML, so you can’t edit it directly.
Fortunately, I found a CSS workaround.

The first bit of CSS is going to make your link (the “a” tag) be the size of the other icons and have the image you want (be sure to change the background-image url). The second bit simply hides the old Flickr image (and it should get rid of the tooltip too).
Simply replace the # sign with which social media icon it is in line (1, 2, 3, etc.)
Even the cool hover effect will still work!
```
.subscribe li:nth-of-type(#) a {
    width: 20px;
    height: 20px;
    display: block;
    background-image: url("link-to-your-youtube-icon-here");
}

.subscribe li:nth-of-type(#) a img {
    display:none;
}

/* THIS CODE SHOULD WORK IN Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE9+ */
```

No items found.