Struggling to change opacity

  • Hi – new user here, beginner with basic knowledge.

    I am using the Rock N Rolla theme, and am trying to make the black background behind the text on my pages opaque, so as to show the background image behind.

    I have tried countless additions to Custom CSS based on google searches, all to no avail.

    Can anybody please offer me some help or advice?

    I would like to change it in the main body of the text, and also the widgets.

    And also I have a dark shaded bar across the fact of the guitarist, I would like to get rid of that too.

    Many thanks.

    • This topic was modified 6 years, 9 months ago by musicalbatman.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • for each element (currently set as background: #000 which is black) use

    
background: rgba(0, 0, 0, 0.5);

    this gives black with 50% opacity
    you can adjust the opacity by changing the 0.5; so 0.1 is very faint and 0.9 is almost completely black

    example element

    
#main {
    padding: 20px;
    background: #000;
}

.widget {
    margin: 0 0 1.5em;
    background: #000;
    padding: 20px;
}
    Thread Starter musicalbatman

    (@musicalbatman)

    thanks, but where exactly must I do that? I cant find mention of background anywhere.

    the code is in style.css

    but

    you can change it using your WordPress dashboard

    Appearance >> Customise >> Additional CSS

    
#main {
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
}

.widget {
    margin: 0 0 1.5em;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
}

    this is better as if you update your theme, unless it’s a child theme, the code would be overwritten in style.css but not if you’ve placed it in the Additional CSS.

    Both codes will exist but the one in Additional CSS will get priority in the browser.

    If still ambiguous, let me know.

    this is over the guitarist’s face

    .black-overlay {
    background: rgba(0, 0, 0, 0.5);
}

    you can use:

    .black-overlay {
    background: none;
}
    Thread Starter musicalbatman

    (@musicalbatman)

    thanks so much for your help, I have made some changes and already it looks better.

    Really appreciated. So glad I found this forum.

    Thread Starter musicalbatman

    (@musicalbatman)

    1 further question if anyone is still watching this thread, how could I move the main text body on the home page a little higher closer to the header? Thanks

    you have the following in style.css

    
.entry-header {
    min-height: 440px;
}

    this is the size of the gap from header to content

    if you remove the min- part it will change the content height to what you set it to.

    for example

    
.entry-header {
    height: 40px;
}

    will reduce the space between the content and top header to a 40px separation. You can decide what looks best for what you are attempting to achieve.

    Any ambiguity, let me know and we can look again.

    As an aside, are you familiar with your browser inspector?

    Usually if you right-click in the browser and select Inspect, it’ll split the screen and you can then see the site and the working.
    You can then select any area and it should show you the CSS too, you can experiment with it before making any actual changes. This is a good way to find code and what it is doing.

    P.S. As far as i’m aware, this topic remains open until you change it to Resolved or a moderator decides it’s had its day.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Struggling to change opacity’ is closed to new replies.