Dear SO,
I’m struggling to get boxed layout background transparency right on my site http://www.hearthdecko.com/. I applied a couple custom CSS solutions but I can’t work it out.
HEADER & MENU
I would like the masthead header ánd menu to be partly transparent. The header currently is ok as it is. I managed to make them both transparent with:
header#masthead {opacity:0.8;}
But this made the header logo, widgets etc. transparent too.
Ideally the menu should be transparent like the header now is but the menu dropdown should not be transparent.
Alternatively the complete menu (whole lane from BROWSE DECKS to the SEARCH ICON) can remain solid white but with a purple border (like the boxes on my home page)
HOME PAGE vs ARCHIVES & POSTS
Secondly I’ve set the main-box opacity to about 0.5 but this is a workaround. As the CSS I found impacts the main-box on pages, posts and archives, when I set opacity to 100% the posts/archives are nearly unreadable.
What I want is the background on the homepage to be 100% transparent and in posts/archives to not be transparent or just slightly.
Currently using this CSS:
/* Vantage Full Width Set Page Opacity */
header#masthead {background: rgba(255, 255, 255, 0.5) !important; }
#main {background: rgba(255, 255, 255, 0.5) !important; }
#colophon {background: rgba(255, 255, 255, 0.5) !important; }Thanks and kind regards,
Bucko
Hi Bucko
You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
#page-wrapper .main-navigation { background: rgba(255,255,255,0.5); } #page-wrapper #search-icon #search-icon-icon { background: rgba(255,255,255,0); }You might also need to install the SiteOrigin CSS Editor.
You can prefix rules for your home page as follows:
.home header#masthead {background: rgba(255, 255, 255, 0.5) !important; } .home #main {background: rgba(255, 255, 255, 0.5) !important; } .home #colophon {background: rgba(255, 255, 255, 0.5) !important; }So you could use cascading rules like this:
/* Applies globally */ header#masthead {background: rgba(255, 255, 255, 0.5) } #main {background: rgba(255, 255, 255, 0.5) } #colophon {background: rgba(255, 255, 255, 0.5) } /* Applies for the home page */ .home header#masthead {background: rgba(255, 255, 255, 0.5) } .home #main {background: rgba(255, 255, 255, 0.5) } .home #colophon {background: rgba(255, 255, 255, 0.5) }We’ve removed !important here. If there are issues from this then we’ll need to increase specificity.
Hi there!
this works perfect. Well almost perfect.
I am happy with the transparency settings sitewide using these settings:
/* Menu transparency */#page-wrapper .main-navigation { background: rgba(255,255,255,0.0);}#page-wrapper #search-icon #search-icon-icon { background: rgba(255,255,255,0);}/* Page Transparency Globally */header#masthead {background: rgba(255, 255, 255, 0.0) } #main {background: rgba(255, 255, 255, 0.9) }#colophon {background: rgba(255, 255, 255, 0.9) }/* Page Transparency Home Page */.home header#masthead {background: rgba(255, 255, 255, 0.0) } .home #main {background: rgba(255, 255, 255, 0.0) }.home #colophon {background: rgba(255, 255, 255, 0.0) }Although the Page Transparency Globally “0.9” don’t take hold. Adding “important” behind it affects the home page too so I left it and it’s fine like this.
Just one more question: the hover background of the menu is blue somehow. I checked the appearance->customize settings bould could not get this right. It would be great if the first level hover background would remain transparent.
Thanks again for your great support!
Bucko
Try the following for the blue removal:
.main-navigation ul li:hover > a { background: transparent; }Page global at 0.9 should work if we add !important.
#main {background: rgba(255, 255, 255, 0.9) !important; }Hi guys,
this worked out great! Thanks for your superb support! The call can be closed now from my side.
Thanks again and have a great day!
Bucko
Awesome :) Glad to hear that did the trick.
All the best with your site.