Jump to content
Sign in to follow this  
thumbstorm12

social icon fade

Recommended Posts

thumbstorm12    0
thumbstorm12

Hello, I have the facebook and twitter icons on my site. They start out faded at .5 and go to 1.0 when you hover. I would like them to be at 1.0 all the time. I figured out how to get them to start at 1.0 but when you hover and then move the mouse off of them the icon goes back to .5. Any way to fix this? thanks for any help.

Share this post


Link to post
Share on other sites
Rob    547
Rob
Do you have Firebug for Firefox? If not, I'd suggest you install it from http://www.getfirebug.com. Using it, I see that your branding image extends at 100% over the Facebook icon, possibly creating a conflict. How did you position the icons? With settings or CSS? I think the problem may be in their z-index. Are you familiar with that CSS element?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
thumbstorm12    0
thumbstorm12
Yep, I'm using firebug. That's how I figured out how to make it start at 1.0. I'm not very familiar with CSS. The icons were added by pagelines, all I did was enter my twitter and facebook info in the header and footer tab under the global settings. What's messing me up is it changes on when my mouse leaves the button and I can't figure out how to access whatever is causing it to change opacity. Could it be javascript or jquery?

Share this post


Link to post
Share on other sites
catrina    103
catrina
What CSS fix did you use to get them to start at 1.0? The fade is being controlled with CSS and no Javascript or jquery, so a CSS solution should do the trick.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
thumbstorm12    0
thumbstorm12
I put the following into the custom code section: .icons a { opacity: 1.0; }

Share this post


Link to post
Share on other sites
thumbstorm12    0
thumbstorm12
Still doesn't work. Is there a CSS equivalent to OnMouseLeave?

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
According to your site's CSS, the CSS for that section is: [code].icons a { display: block; float: right; height: 24px; margin-left: 8px; opacity: 0.5; text-align: right; width: 24px; }[/code] So the opacity is not taking affect. You may need to add [b]!important[/b] to it.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
thumbstorm12    0
thumbstorm12
Awesome The !important worked. Thank You so much.

Share this post


Link to post
Share on other sites
Rob    547
Rob
Glad that worked for you.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×