6 replies to this topic
#1
Posted 20 November 2012 - 10:56 AM
Hi
How can I change the opacity of the social icons so they display 'bright' all the time, instead of the default setting which is set to on rollover only?
My website background is black and they're a little hard to see for first time viewers.
Thanks
How can I change the opacity of the social icons so they display 'bright' all the time, instead of the default setting which is set to on rollover only?
My website background is black and they're a little hard to see for first time viewers.
Thanks
#2
Posted 20 November 2012 - 03:37 PM
You’ll need to use Custom CSS (in Site Options > Custom Code > Custom CSS). The style of a page element consists of two parts: the selector and the attribute.
Selector: Used to select the page element you want to change (in this case, the page element you want to change is your social icon link).
Attribute: Property that determines what kind of change you want (you’re changing the opacity, so the attribute you want to use is opacity).
To find the selector for the social icon link, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please read and follow these instructions:
For help with the opacity attribute, please see these instructions: http://www.w3schools.com/css/css_image_transparency.asp.
Selector: Used to select the page element you want to change (in this case, the page element you want to change is your social icon link).
Attribute: Property that determines what kind of change you want (you’re changing the opacity, so the attribute you want to use is opacity).
To find the selector for the social icon link, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please read and follow these instructions:
For help with the opacity attribute, please see these instructions: http://www.w3schools.com/css/css_image_transparency.asp.
#3
Posted 21 November 2012 - 02:30 AM
Hi Cat
My site is (please turn your volume down because there's a loud-ish video set to autoplay)
I changed the opacity to 1 using Firebug. Cut & Pasted this into Custom CSS. No love. What am I missing?
<a class="twitterlink" href=" target="_blank" style="opacity: 1;">
<img alt="Twitter" src="
</a>
<a class="facebooklink" href=" target="_blank" style="opacity: 1;">
My site is (please turn your volume down because there's a loud-ish video set to autoplay)
I changed the opacity to 1 using Firebug. Cut & Pasted this into Custom CSS. No love. What am I missing?
<a class="twitterlink" href=" target="_blank" style="opacity: 1;">
<img alt="Twitter" src="
</a>
<a class="facebooklink" href=" target="_blank" style="opacity: 1;">
#4
Posted 21 November 2012 - 03:10 AM
Hi there, it looks like the code above is Html not Css. Css usually appears in the right hand window in firebug, html on the left.
I've pasted the css in below for you
I've pasted the css in below for you
#5
Posted 21 November 2012 - 03:18 AM
Brilliant! Thanks for the heads up solution James. Much appreciated. Cheers
#6
Posted 21 November 2012 - 03:20 AM
You're welcome :-)
#7
Posted 21 November 2012 - 03:20 AM
The topic was marked as resolved.
Also tagged with one or more of these keywords: Resolved
Resolved
PageLines Framework →
Technical Support →
Anything Boxes And Polylang Language Filtering ProblemStarted by janpeeters , 01 Dec 2012 |
|
|
||
Header In Banner AlignmentStarted by bankrollbuilder , 28 Nov 2012 |
|
|
||
Resolved
PageLines Framework →
Customizations →
2 Hero UnitsStarted by starlit , 28 Nov 2012 |
|
|
||
Tabs Do Not Align HorizontallyStarted by hutruk , 28 Nov 2012 |
|
|
||
Resolved
PageLines Framework →
Customizations →
Reduce Margin In Contact FormStarted by texasx , 27 Nov 2012 |
|
|











