Jump to content


Photo
- - - - -

Change Opacity Of Social Media Icons In The Header


Best Answer Danny , 07 December 2012 - 10:05 AM

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>
Go to the full post


  • Please log in to reply
6 replies to this topic

#1 steveandrews

steveandrews

    Advanced Member

  • Members
  • 53 posts
  • Country: Country Flag

Posted 06 December 2012 - 02:55 PM

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.

 

Please Login or Register to see this Hidden Content

 

Thanks in advance, Steve

 



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 December 2012 - 03:40 PM

What CSS did you use?



#3 steveandrews

steveandrews

    Advanced Member

  • Members
  • 53 posts
  • Country: Country Flag

Posted 06 December 2012 - 03:49 PM

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

 

Please Login or Register to see this Hidden Content



#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 December 2012 - 01:17 AM

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



#5 steveandrews

steveandrews

    Advanced Member

  • Members
  • 53 posts
  • Country: Country Flag

Posted 07 December 2012 - 09:29 AM

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.

 

Please Login or Register to see this Hidden Content

 

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.

Please Login or Register to see this Hidden Content



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 December 2012 - 10:05 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content



#7 steveandrews

steveandrews

    Advanced Member

  • Members
  • 53 posts
  • Country: Country Flag

Posted 07 December 2012 - 11:42 AM

Thanks James, that did the trick  :D