Port Theme: Add semi-transparent overlay to Static and Featured content

  • Unknown's avatar
    slowwaterfarm · Member ·

    Hi. I’m attempting to add the semi-transparent overlay to the Featured content and Static content sections of my blog. I am new to css and haven’t been able to get an overlay to completely fill either section. The css for this would be awesome. Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the white you are seeing is actually colors set for the #middle div. By default, it is white. We can assign a semi-transparent color to that div and it will be overlaid on the base white of the body. 

    #middle {
background-color: rgba(0, 0, 0, 0.4) !important;
}

    The first three numbers in the parentheses are the RGB color and the fourth, 0.4, is the opacity (the closer to 0, the more transparent).

    If you can explain a little more what effect you are wanting, we can get more specific.

  • Unknown's avatar
    slowwaterfarm · Member ·

    Thanks for your response! I currently have white text in both the Featured Content and Static Content sections. The photos I have used as a background are pretty light so the text does not show up as well as I’d like, especially on a mobile device. In the Port Demo it appears like there is a transparent color applied to those 2 sections making the text stand out but also allowing the background photo to be visible. I would like to achieve the same effect on my blog.
    http://www.slowwaterfarm.com

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, for the title in the middle of the top image, give this a try. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. I’ve used an RGB color (first three numbers in parentheses) and then a 0.3 opacity (the closer to 0, the more transparent). 

    #home-banner #banner-text {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
}
#home-banner #banner-text .secondary p {
    margin-bottom: 10px;
}

    We can do the same sort of thing with your site title with the following. 

    .home.has-banner #header .top {
    background-color: rgba(0, 0, 0, 0.3);
}

    On the image further down the page with the Wendell Berry quote, we can do the same with this. 

    #home-content.home-section .inside {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px !important;
}

    Let me know what you think.

  • Unknown's avatar
    slowwaterfarm · Member ·

    Hi. That is just what I was looking for. Now how would I make the color box a different size? I would like the home banner text box to be the same size as the background photo, and the same for the section that I have the quote (so it looks as if there is not a box).
    I don’t currently have have anything in the “featured section” but I plan to. How would I achieve the same effect there?
    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    You know, I can do it for the top image, but I’m having problems doing it for the lower image. Here is the code for the top image. I have to run out for a bit and will look at the bottom image and text when I get back. 

    #home-banner #banner-text {
    height: 100%;
    margin-left: 0;
    margin-top: 0 !important;
    width: 100%;
}
#home-banner #banner-text .main {
    margin-top: 346px;
}
  • The topic ‘Port Theme: Add semi-transparent overlay to Static and Featured content’ is closed to new replies.