Changing Social Media Icons

Viewing 10 posts - 1 through 10 (of 10 total)
  • #12096
    seannittner
    Participant

    I’d like to remove the “sliding” animation effect on the social media icons and have them always be the brighter “mouse over” image.

    Any suggestion on how to change this?

    #12099
    Mindscanner
    Participant

    Well i got the same problem to (i use a black version)
    And becose im a bigg noob with codes i can’t change it,so i find a other easy solution.
    @ ‘Social Media Links’ do not add any link or info from you sociaal sites leave it all empty.
    Download ‘Social Media Widget’ and put the widget @ the ‘sidebar top’ and you gone have these results like me http://www.cafeproat.be

    #12139
    Alexander
    Participant

    Hi seannittner,

    Try to add:

    a.social-media-icon {
    background-position: 0 -32px;
    }

    to your css file.

    Cheers,
    Alexander @ http://www.mouseclick.com

    #12243
    seannittner
    Participant

    Thanks Alexander! That worked for almost all of the browsers I have to test on.

    The one browser I’m still having trouble with is IE 8 in compatibility mode. It doesn’t display the background image at all (not even the faded version). In regular mode it’s fine. Any thoughts on how to make compatibility mode work?

    Sean

    #12253
    Alexander
    Participant

    Hi seannittner,

    IE8 in compatibilty mode is a nightmare for cross browser functions. There are many more issues than the social media icons and its a mode which one should only use if really really necessary.

    Cheers,
    Alexander @ http://www.mouseclick.com

    #12257
    seannittner
    Participant

    Yep, when I took a closer look, it is actually that they are aligned really far to the left (over the logo image) and the menu has the wrong CSS as well. I’m not a fan of compatibility mode, but the customer uses it and things that what other end users will experience.

    Screen shot: http://affinityfcublog.com/wp-content/uploads/2013/01/IE8_Compatibility_Mode.jpg

    #12259
    Alexander
    Participant

    The solution would be to add extra css classes for the compatibility mode and a script to detect it. I don’t know exactly how to detect the comp mode but maybe something like this:

    (!–[if IE 7]) (link rel=”stylesheet” type=”text/css” href=”http://www.yoursite/wp-content/themes/pinboard/styles/_ie/ie7.css”&gt; <![endif]–)

    (Exchange the round brackets with squared ones)

    Cheers,
    Alexander @ http://www.mouseclick.com

    #12261
    Alexander
    Participant

    Again:


    (!--[if IE 7]) (link rel="stylesheet" type="text/css" href="http://www.yoursite/wp-content/themes/pinboard/styles/_ie/ie7.css") (![endif]--)

    #12262
    seannittner
    Participant

    Thanks.

    I tried adding to the header.php so IE8 wouldn’t go into compatibility mode. I hope that works for the customer, but if it doesn’t I don’t supose that ie7.css file exists anywhere does it? Or would I be making that from scratch?

    Sean

    #12279
    Alexander
    Participant

    If IE8 is in compatibility mode, this script above should detect it and use the new class you added as described.

    Cheers,
    Alexander @ http://www.mouseclick.com

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.