-
seannittner
ParticipantI’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?
Mindscanner
ParticipantWell 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.beAlexander
ParticipantHi seannittner,
Try to add:
a.social-media-icon {
background-position: 0 -32px;
}to your css file.
Cheers,
Alexander @ http://www.mouseclick.comseannittner
ParticipantThanks 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
Alexander
ParticipantHi 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.comseannittner
ParticipantYep, 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
Alexander
ParticipantThe 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.comAlexander
ParticipantAgain:
(!--[if IE 7]) (link rel="stylesheet" type="text/css" href="http://www.yoursite/wp-content/themes/pinboard/styles/_ie/ie7.css") (![endif]--)
seannittner
ParticipantThanks.
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
Alexander
ParticipantIf 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.