Transparent content area

  • Resolved jrod236

    (@jrod236)


    7 years, 6 months ago

    Hi.

    I know this question have be asked before, on several occasions. And I have read them all, but still not solved my issue.

    I’m working with the Theme OnePress, trying to make the entire content area a dark gray that is mostly transparent so the background image appears faintly through it.

    I know that this can be done by some CSS styling, but I’m very new to it all, so i really need some help.

    This is the site I’m working on.

    I’m trying to make it look something like this site. Very simple, with some different backgrounds, some content where you can see the background through, and so on.

    Hope that some of you are able to help me achieve this.
    But also, if you know of another Theme where this is easier doable, please let me know.

    Thank you in advance.

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

  • Hello, the best thing would be for you to create a child theme and do it there, but this is a good solution since you are a beginner.
    If it is the content area that you want to make a bit transparent you should go to the WordPress admin panel > Appearance > Customize and look at the end for Additional CSS and paste this code there 

    .site {
	background: rgba(255, 255, 255, 0.8) !important;
}

    What this code does is that it sets your content area to white and it’s opacity to 80%, if you are not happy with the results you can change 0.8 to whatever opacity you want going from 0 to 1.

    Thread Starter jrod236

    (@jrod236)

    Hi systemsbox

    Thank you very much for taking your time to help me.
    The code works perfect! Very cool! ??
    Its precisely the effect i was looking for.

    I will try to look into how to create a Child Theme, and then work from there, as you suggested.

    If i may ask one more question of you, how would you go about, making the footer also slightly transparent? So its basically only the header that is full colour

    Thank you again.

    Thread Starter jrod236

    (@jrod236)

    Actually.. I found out ??

    I could not get it to work, because i used

    .site-footer

    But that was the “wrong” footer, i needed to use .site.info

    .site-info {
	background: rgba(104, 104, 104, 0.0) !important;
}

    Now its working, again thank you very much for pointing me in the right direction.

    /Jrod

    Great, I’m glad I helped you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Transparent content area’ is closed to new replies.