Social Media Icons Issue

[eman]

This link below has 5 social media icons on the footer. You will notice there are two Pinterest logos and I need to change the second icon to Instagram. I attached the style.css and logos image files to reference. Please let me know if I need to change the values of the class background positions or is there something else I need to do to fix this issue. Here are the social media class code below which are in the style.css file for reference. Thanks for your help.

footer nav.social li.pinterest a {background-position:-1px 0px;}
footer nav.social li.instagram a {background-position:-42px 0px;}
footer nav.social li.facebook a {background-position:-85px 0px;}
footer nav.social li.twitter a {background-position:-126px 0px;}
footer nav.social li.linkedin a {background-position:-168px 0px;}

http://www.trademarkresidential.com/homepage

[jscheuer1]

You need to change the background-position property of that link to get the sprite (image with several icons on it) to line up differently for that particular link. That's assuming it even has the icon on it that you need for that link, I'm pretty social media unaware. I know what Twits and FB are. Pintrest I can see from your example. I don't know what instagram is supposed to look like - the camera? That would be:

background-position-x: -42px;

You can apply that to the element itself, or create an overriding class/id or other selector for it that assigns that positioning to it.

[coothead]

Hi there eman,


on lines #400 and #401 of your HTML file you have this...



<li id="menu-item-3829" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3829"><a href="https://www.instagram.com/trademarkresidential/" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.instagram.com/trademarkresidential/', 'Instagram');">Instagram</a></li>
<li id="menu-item-3828" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3828"><a href="https://www.pinterest.com/TMresidential" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.pinterest.com/TMresidential', 'Pinterest');">Pinterest</a></li>

Change it to this...


<li id="instagram menu-item-3829" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3829"><a href="https://www.instagram.com/trademarkresidential/" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.instagram.com/trademarkresidential/', 'Instagram');">Instagram</a></li>
<li id="pinterest menu-item-3828" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3828"><a href="https://www.pinterest.com/TMresidential" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.pinterest.com/TMresidential', 'Pinterest');">Pinterest</a></li>

The CSS should be...



footer nav.social li.pinterest a {background-position: 0 0;}
footer nav.social li.instagram a {background-position: -42px 0;}
footer nav.social li.facebook a {background-position: -85px 0;}
footer nav.social li.twitter a {background-position: -126px 0;}
footer nav.social li.linkedin a {background-position: -168px 0;}



coothead

[eman]

Thanks for your response. I'm sure this would fix it the only problem is this is a Wordpress site. How can I access the html code to add the instagram and pinterest ids which has been my Dilemma with Wordpress for sometime. The Wordpress dashboard doesn't give you html access. Please advise. Thanks

[mlegg]

you must have either WordPress.com Premium or WordPress.com Business active on your site to be able to add custom CSS to your site

https://en.support.wordpress.com/custom-design/editing-css/

[jscheuer1]

You cannot have a compound id anyway (one with a space in it). Just use the existing id. Add this to the stylesheet:


#menu-item-3829 a {background-position-x: -42px !important;}

[coothead]

Hi there John,


I am extremely sorry about that faux-pas. :eek:

Unfortunately, it appears from your post, that I experienced
another one of my "Senior Moments" whilst composing mine. :eek:

It should, of course, have read...


Change it to this...


<li id="menu-item-3829" class="instagram menu-item menu-item-type-custom menu-item-object-custom menu-item-3829"><a href="https://www.instagram.com/trademarkresidential/" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.instagram.com/trademarkresidential/', 'Instagram');">Instagram</a></li>
<li id="menu-item-3828" class="pinterest menu-item menu-item-type-custom menu-item-object-custom menu-item-3828"><a href="https://www.pinterest.com/TMresidential" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.pinterest.com/TMresidential', 'Pinterest');">Pinterest</a></li>



This will then match the other icons's code.




coothead

[styxlawyer]

you must have either WordPress.com Premium or WordPress.com Business active on your site to be able to add custom CSS to your site
.
.


No, you don't need "Premium" or "Business", any Wordpress site can have custom CSS added by using this plug-in:

https://en-gb.wordpress.org/plugins/simple-custom-css/

I've built several Wordpress sites with this plug-in and it works perfectly.

[mlegg]

Thanks, I didn't know that. I tried doing Wordpress for a friend.

[eman]

Thanks John, that corrected it. Have a good one.

[eman]

John again thanks it works great except for Firefox. It still shows the two pinterest icons. Is there a way to fix that? Thanks

[jscheuer1]

Change it to (just a longer hand way of saying it):


#menu-item-3829 a {background-position: -42px 0 !important;}

Apparently FF doesn't respect the -x background-position property. All others will be fine with this as well.