[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 7 years, 9 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.

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