-
seannittnerParticipant
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?
MindscannerParticipantWell 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.beAlexanderParticipantHi seannittner,
Try to add:
a.social-media-icon {
background-position: 0 -32px;
}to your css file.
Cheers,
Alexander @ http://www.mouseclick.comseannittnerParticipantThanks 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
AlexanderParticipantHi 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.comseannittnerParticipantYep, 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
AlexanderParticipantThe 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”> <![endif]–)
(Exchange the round brackets with squared ones)
Cheers,
Alexander @ http://www.mouseclick.comAlexanderParticipantAgain:
(!--[if IE 7]) (link rel="stylesheet" type="text/css" href="http://www.yoursite/wp-content/themes/pinboard/styles/_ie/ie7.css") (![endif]--)
seannittnerParticipantThanks.
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
AlexanderParticipantIf 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
Tagged: header, social media
You must be logged in to reply to this topic.