Chad
(@lynneandchad)
Hi there!
The easiest way would be to modify the CSS. Add this to your style.css file:
.site-header {
opacity:.5;
}
the .5 sets the opacity to 50%. .75 would be 75%, and so on 🙂
Hi Chad!
Thanks for the help! 🙂
Your suggestion worked… but it also made my navigation links in the header transparent. I’m trying to adjust the background color opacity only.
The Tesseract Theme CSS has this code
.site-header { background-color: rgba(0, 0, 0, 0.2); }
but messing with the decimal number doesn’t seem to change anything.
Any ideas????
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Andrew,
I’m using WAMP to host my site locally until I am ready to launch it.
Chad
(@lynneandchad)
Yea, that would be a problem, sorry 😛
Rather than altering the opacity of the element, lets just tweak the background color of the header with a similar rgba value to what you just mentioned. This worked in my test:
#masthead {
background-color: rgba(89,188,217,.5);
}
The background will fade out, but the text and color of everything inside the header will remain opaque.
Enjoy!
Chad that’s perfect! So much help!
After playing with it I found
#masthead {
background-color: rgba(255, 255, 255, 0.2);
}
to be what works best for me but you solved my problem!
Thanks So Much!
Chad
(@lynneandchad)
Awesome! Glad I could help!
Chad, James, i am new to CCS and trying to get to grips. I use the same Tessaract theme. Where exactly would I include the code for the opacity to work?
Chad
(@lynneandchad)
Hi Rudi
Sorry for the delay in getting back to you.
I’d recommend adding this into section “Header Area” section of the stylesheet (style.css), to keep it nice and organized.
Of course, you’ll want to make sure you’re using a Child Theme so you don’t loose your changes in an update.
Hi Chad,
I tried changing my site styles.css file from
#masthead {
padding: 0 20px;
}
to
#masthead {
padding: 0 20px;
background-color: rgba(255,255,255,.2);
}
and nothing happened. Is there something I’m doing wrong?
Also how do I make sure I’m using a Child Theme?
Thanks
Chad
(@lynneandchad)
The link I posted above will explain all about Child Themes. Setting one up is easy 🙂
Can you add a link to your site so I can see what it looks like? I’m assuming you’re also using the Tesseract theme?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
