[Resolved] How to make my pages default background semi transparent

[KENNETH]

Hi,

i added this in the editor, the whole pages including my content gets opaque, i just want to the pages background to the be opaque 0.4, so i can form up and see the main background.

“.entry-content{
opacity: 0.5;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
“

[Roberto Enrique]

Instead of using opacity: 0.5; try using background-color: rgba(255,255,255,0.8) !important; obviously you can change your RGB values to the color you like

[Tom]

RGBA is the way to go for sure.

You might also want to target .inside-article instead of .entry-content.

[KENNETH]

Thanks got it.

What about Header?

I set my logo under header background.

My Header logo is .png. I just want to Transparent the white potion, but not the logo, thus i can see the body background.

The below code doesn’t work, it get my logo transparent too and i can’t see my body background.
t

.inside-header {
background-color: rgba(255,255,255,0.8) !important;
}

• This reply was modified 7 years, 3 months ago by KENNETH.

[Jamal]

Im not too sure Kenneth but i think your header image has to have transparency in the first place inorder to achieve what you want.

[Tom]

Yea, there will have to be no color set for the header in “Customize > Colors > Header Colors”.

Then try to apply it to the .site-header element.

[KENNETH]

Thanks, Got it!

1 more Question.

Under pages> Page Header
there are 4 tabs, <Image Settings> <Video Settings> <Content Settings> <Advance Settings>

With Page Header Position > Inside Content Area
<Image Settings>
I added a Image and resulting a max-width of 940px overlapping the inside.acticle padding

however
In <Content Settings>
I try adding the SAME image, my result is width 860px and having the inside.acticle padding.

how can I add the image in <Content Settings> with the max width of 940px, overlap the padding?

[Tom]

Is the “add padding” option enabled in the content settings perhaps?

[Matthias]

Hi Tom,

how to make this for the other objects (Footer, Footer Widgets, Sidebar, Navigation etc.)? I don’t know the excat syntax of the elements.

Thanks
Matthias

[Bishop]

Hi there,

Here are the syntax you are looking for:

.site-info
.footer-widgets
.sidebar .widget 
.main-navigation

[Matthias]

Thanks Bishop!

[Matthias]

One more thing. If I only wants to make the background of the sidebar semi transperent it doesn’t work. If I use “.sidebar.widget” or “.sidebar-widget” or “.sidebar .widget” nothing happens? Maybe the wrong syntax? I have also tried “.sidebar-widgets” and so on, but nothing worked.
“.footer-widgets” works perfectly.

Any ideas?

[Tom]

If you want to apply it to the entire sidebar and not just the widgets, you would use .sidebar.

[Matthias]

Thanks Tom and what to use if I want to apply it to the siedebar widgets?

[Bishop]

Should be .sidebar .widget

[Author]

Posts