Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

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

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

Home Forums Support How to make my pages default background semi transparent

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #199919
    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 */
    }

    #199925
    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

    #199929
    Tom
    Lead Developer
    Lead Developer

    RGBA is the way to go for sure.

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

    #200184
    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 5 years, 5 months ago by KENNETH.
    #200201
    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.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #200210
    Tom
    Lead Developer
    Lead Developer

    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.

    #200297
    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?

    #200321
    Tom
    Lead Developer
    Lead Developer

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

    #210676
    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

    #210704
    Bishop

    Hi there,

    Here are the syntax you are looking for:

    .site-info
    .footer-widgets
    .sidebar .widget 
    .main-navigation
    #210725
    Matthias

    Thanks Bishop!

    #210857
    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?

    #210882
    Tom
    Lead Developer
    Lead Developer

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

    #210951
    Matthias

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

    #210971
    Bishop

    Should be .sidebar .widget

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.