Jump to content
steveandrews

Change Opacity Of Social Media Icons In The Header

Recommended Posts

steveandrews    0
steveandrews

I've managed to change the opacity of the icons to 0.35.

 

When the page first loads, everything is ok and rolling over the icons makes them fade in.

 

The problem is when they fade out - they only fade to 0.5 (the default), not the 0.35 I've specified in my CSS.

 

http://unicorntraining.com.s133625.gridserver.com/

 

Thanks in advance, Steve

 

Share this post


Link to post
Share on other sites
steveandrews    0
steveandrews

I've set the opacity in a custom hook, not the CSS. My mistake. 

 

add_action('pagelines_inside_top_branding', 'my_unique_icons');
// function name
function my_unique_icons(){
?>
<div class="icons">
<a target="_blank" href="http://unicorntraining.com.s133625.gridserver.com/feed/" style="opacity: 0.35;"><img src="/wp-content/uploads/images/ui/RSS_hover.gif" alt="RSS"></a>
<a target="_blank" href="https://twitter.com/unicorntraining" style="opacity: 0.35;"><img src="/wp-content/uploads/images/ui/Twitter_hover.gif" alt="Twitter"></a>
<a target="_blank" href="http://www.linkedin.com/company/unicorn-training-group" style="opacity: 0.35;"><img src="/wp-content/uploads/images/ui/LinkedIn_hover.gif" alt="LinkedIn"></a>
<a target="_blank" href="http://www.youtube.com/user/unicorntrainingtv" style="opacity: 0.35;"><img src="/wp-content/uploads/images/ui/YouTube_hover.gif" alt="Youtube"></a>
</div>

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Steve, have you managed to resolve this by overriding the css?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
steveandrews    0
steveandrews

Hi James. I've tried using inline and external CSS  but haven't resolved it yet.

 

If you look at the site now, the RSS button has external CSS - using the style.css file. The problem is the icon no longer fades in and out using this method.

 

.rsslink{
   opacity: 0.2!important;	
}

 

The other 3 links have inline styling - see below. They fade in and out but return to the default opacity (0.5) rather than the 0.35 I've set.

<div class="icons">
<a target="_blank" href="http://unicorntraining.com.s133625.gridserver.com/feed/" class="rsslink"><img src="/wp-content/uploads/images/ui/RSS_hover.gif" alt="RSS"></a>
<a target="_blank" href="https://twitter.com/unicorntraining" style="opacity: 0.35;"><img src="/wp-content/uploads/images/ui/Twitter_hover.gif" alt="Twitter"></a>
<a target="_blank" href="http://www.linkedin.com/company/unicorn-training-group" style="opacity: 0.35;"><img src="/wp-content/uploads/images/ui/LinkedIn_hover.gif" alt="LinkedIn"></a>
<a target="_blank" href="http://www.youtube.com/user/unicorntrainingtv" style="opacity: 0.35;"><img src="/wp-content/uploads/images/ui/YouTube_hover.gif" alt="Youtube"></a>
</div>

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The opacity of the icons is set via a script in the Branding section.php file. I recommend you create a child of the Branding section and edit the script.

 

Here is the line of code you're looking for.

 

<script type="text/javascript"> 
jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);});
</script>

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
steveandrews    0
steveandrews

Thanks James, that did the trick  :D

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


×