How do I change the main post container to 75% opacity?

Hey. I’ve got a question. I’m currently building out some posts with the new Gutenberg editor from wordpress. Sometimes, I just want to write posts without going into cornerstone.

In this case, I would like to know how to make the main container for the post about 50% or 75% opactiy, so that the background shows through but the text is still legible.

Here’s the example of how I want it to look —> https://intothemythica.com/into-the-mythica-the-journey-home/

(This is a page I did in cornerstone (or the X pro equivalent) and I adjusted the Section’s individual background so that main background showed through in a semi-opaque way.

However, what I want is to be able to use the regular wordpress editor on a post, and have the whole section of the post be semi-transparent, without having to go into cornerstone.

Reason - I do a lot of writing on an iPad. Can’t really do cornerstone on that, and i’d like to have a more streamlined and less design-intensive blogging experience for posts.

How would I set the opacity of post container to be in that way? * and * can I set it so that ONLY posts of a certain category have this function?

Here’s the example that i’m working with —> https://intothemythica.com/heart-of-faerie-remake/

I’d like some CSS to make this second example look more like the first one if possible, so that all the content within the post (including text, images, etc.) are on the semi-transparent background. That way I can publish from iPad more easily with the visual I want. Also, being able to specify category let’s me do that style for a specific bit of writing.

Thanks!

Hey @Peter_Fae,

Your 1st page’s background is all white so I’m not sure about the “semi-opaque” background you’re referring to.

Your post, currently shows part of the background because you are using the Ethos stack. I’d recommend you use the Renew Stack if you don’t want the background to show.

If you wish to stay with Ethos, you would need to override it’s design. Before I give you the CSS, please understand that overriding the theme’s design and functionality is outside the scope of our support. The code that I’ll give you should only serve as a guide. You or your developer should be responsible to fix issues arising from the use of it and further enhancements. Here’s the code:

.x-container.main:before {
    left: -100em !important;
}

It should look like this:

Hope that helps and thank you for understanding.

Ah thank you so much. Actually, the way they appear is different in Chrome and in Safari. Would you please try looking at those pages in Safari rather than Chrome. For some reason, backgrounds haven’t shown through properly in Chrome, which is another issue I have to address with support (which I forgot about)

Are you referring to the Sidebar? The issue is coming from a custom CSS. You’re using RGBA and the value within is only RGB

Try adding transparency like this:

Please note that the issue is coming from a custom code. Even if you got it from us, this is not a part of our support service to fix issues coming from custom code.

Please also remember that we can’t continually custom develop your site. Tweaking the theme’s design requires knowledge of CSS and it is the responsibility of the user.

In the future, you might have flexibility in designing your blog layout. Please read our latest status report at https://theme.co/apex/forum/t/status-report-july-31-2018/39909

Thanks.

I hear you.

I get that you can’t keep helping to customize the site and I have witnessed a gradual movement in X-theme support to be more clarified in what support helps with and what is outside the scope. Yet since we’re in this conversation to begin with, when I asked X-theme support in the past they were very helpful with the CSS. I’m assuming that it’s just too much for support to do all of that for the users and will take more responsibility for the CSS as my publishing schedule permits.

That being said, i’ve still got the issue and we’re *in it * right now, so I kindly ask to get this dialed so I can move forward.

I have tried changing the stack from Ethos to Integrity and see what you mean about the white container and the background on standard posts. Since I am in this crossroads of publishing and launching as well as wishing to add a beautiful background visual within Ethos on standard posts and do not yet understand CSS properly, I would very much appreciate clearing out this particular issue.

There are actually two questions in here that i’m resolving and they feel related.

One - The ‘1st page’ you mentioned in your first comments shows up with the semi-transparent background on mobile (iPad) on Chrome. If it’s not displaying properly on Chrome on desktop, i’d like to know why. Safari doesn’t seem to have the issue on either platform.

What i’m asking is both the color of the sidebar and the container around the post writing. I’m wanting to create that transparency in the sidebar container, and in the main blog post container, on a CSS level, to make it either white (while showing the background around it), or 75% opacity, to show a little of the background through.

Could this be explained please? Within Ethos? Basically, i’m wanting to have a background with the stadard post stil being legible. Right now, in standard posts, it removes the color of the post container (if i’m naming it correctly) and makes it transparent, which leaves it illegible. I realize I must change the color of the post container and the sidebar and would like to know how to do this as it’s integral to the use of backgrounds behind my posts. Even if I shifted this to standard ‘white’ or semi-transparent for all posts it would make the site way more visually consistent. Thank you for understanding.

Hello There,

Do you want something like this?

If that is the case, you will need to use this css code:

.single-post .x-container.main:before,
.single-post .x-sidebar {
    background-color: rgba(255,255,255, 0.75);
}

.single-post .x-sidebar {
    padding: 20px;
}

.single-post .x-main {
    padding-top: 20px;
}

.single-post .x-container.main:before {
    top: 0;
}

Please keep in mind that this is a custom css specifically for your single blog posts. This will not affect the pages. It may create issues with other elements in your blog posts which may complicate this things later on.

Please let us know how it goes.

Thank you. Most kind. I do not wish to affect the showing of pages so that works beautifully. Is there a way to limit the effect to blog posts of a particular category?

I am capable of inserting code into the FTP folders if necessary. Thank you again for the support as we are just entering a deep publishing phase and this visual effect is beautiful for the design.

What would be perfect is to have this effect, as said, only on particular category, whilst leaving other post categories unaffected.

Hi There,

Yes that is possible, but you need to manually put a class to those posts that belong to the said category.



Then append that class on Ruenel’s CSS code above.

e.g.

.single-post.this-category-class .x-container.main:before,
.single-post.this-category-class .x-sidebar {
    background-color: rgba(255,255,255, 0.75);
}

.single-post.this-category-class .x-sidebar {
    padding: 20px;
}

.single-post.this-category-class .x-main {
    padding-top: 20px;
}

.single-post.this-category-class .x-container.main:before {
    top: 0;
}

Thanks,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.