Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Without harming the content. This is an example from the Responsive theme.
Hi,
It’s been a week trying to figure out a way but keep ending up with the same result.. The images get affected by the opacity css but I only need the content area (white bits) adjusted. Cannot state the domain name here but will email if required as the site hasn’t launched yet.. Please help! :)
Hi H B
RGBA is the solution:
http://css-tricks.com/rgba-browser-support/
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_rgba
For Vantage you can set the opacity of the main container div by adding the following to Appearance > Custom CSS and adjusting as required:
/* Vantage Set Page Opacity */#main {background: rgba(200, 54, 54, 0.5); }Hey Andrew,
That worked great! I’ve got couple questions.. I’ve got Lightwight Social Icons widget posted on all pages via Page Builder and when I hover over the icons the background of the icons is solid color and wondering if its possible to adjust the opacity just like the main container. Same goes for the main navigation buttons. I’ve also set a border around the whole container (layout bound: boxed) and wondering if I could add shadow so it looks like the border is fading away. Thanks.
Glad that helped.
If you can identify the correct selector you can add opacity on hover for your icons. The properties are:
Ref: http://css-tricks.com/css-transparency-settings-for-all-broswers/
You can set menu opacity in the same way we did for the #main container:
/* Vantage Menu Opacity */ .main-navigation { background: rgba(255,0,0,0.3) !important; }To add a shadow around your container you’d use the box-shadow property: http://css-tricks.com/snippets/css/css-box-shadow/.
Custom CSS tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
Thanks for the help! I just have one more question.. My nav menu.. Social widget and footer are centred.. When I compare the footer with the widget.. It looks centred and when I compare the footer with the nav menu it looks centred but when I compare the widget with the nav menu it doesn’t look centred. I’m really confused.. I’ll post link to a screen shot in the morning if that will help.
http://i60.tinypic.com/izmbt1.png
Ignore the previous link http://oi60.tinypic.com/izmbt1.jpg
I’d need to take a look like to try help out. Please send through a link. I can always remove it.
— URL removed —
Might sort it out:
.lsi-social-icons li:last-of-type { margin-right: 0 !important; }I’ve inserted the css, can you please take a look for me.
The nav and social icons look centered but the footer looks slightly off to my eyes.
Are you certain the Custom CSS is in place? Where is it saved?
The issue is the social icons – 382px to the right border, 374px to the left border. Do you have Photoshop installed? Can measure it out if you do.
Hi yes the css is placed in Custom CSS.
But if the icons get moved to the right to match the nav then the footer will look to the left. So maybe i would need to apply a similar code to the colophon?
What is happening with those social icons is there is a 8px right margin – having the 8px applied to the last icon throws everything out. This is what I can see is the problem. I’ve measured this out in Photoshop but it’s a little beyond our free support scope to redo that right now. If you have a further more specific question I can assist.
I’ve applied -8px to the margin css and it looks ok but now the nav looks off.. Omg ._.
You are missing px from 8. You need say 8px, right now it just says 8. Ensure that you’ve copied in exactly my original snippet provided.
Ooops think I missed the px. Thanks for letting me know. Now the footer looks off.. It’s like I’m going in circles ._.
The Custom CSS I sent through was 0. Please try that. It should resolve this.
.lsi-social-icons li:last-of-type { margin-right: 0 !important; }For the future though, this is how you’d approach a challenge like this:
1. Measure everything out in Photoshop.
2. Find the source of the issue.
3. Use your browsers developer tool to inspect the CSS concerned.
4. Write Custom CSS to resolve.
If you don’t have Photoshop you could use Gimp or another free alternative.
Strange how the code didn’t do anything earlier but it has worked! Thank you so much!
Super, glad to hear that helped.