Archived

This topic is now archived and is closed to further replies.

  • 0

Change Opacity Of Social Media Icons In The Header

Question

Posted · Report post

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

6 answers to this question

Posted · Report post

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>

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

Thanks James, that did the trick  :D

Share this post


Link to post
Share on other sites

Posted · Report post

What CSS did you use?

Share this post


Link to post
Share on other sites

Posted · Report post

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