Hi there.
With the help of Themeco support, I wrote some CSS to make the home page of my site transparent.
.home, .transparent .x-container.main:before {
background-color: transparent;
}
All of the main content on the other pages has a white background.
It works fine on a desk/laptop but, on mobile devices, the background is transparent on all of the pages, making the content unreadable.
Please tell me how to fix this.
You can find the site here.
Thank you!
Hi There,
To fix this issue, please also add this CSS:
@media (max-width: 767px){
.x-container.main:before {
background: rgba(255, 255, 255, 0.7) !important;
left: 0 !important;
right: 0 !important;
width: 100%;
}
}
Hi there,
Thank you so much for your response.
Unfortunately, it isn’t working on Safari and mobile devices still.
I am going to include ALL of the CSS that Themeco support gave to me. I only want the Home page to be transparent, allowing the site background to show through. Can you see where the error is here?
@media (max-width: 767px){
.x-container.main:before {
background: rgba(255, 255, 255, 0.7) !important;
left: 0 !important;
right: 0 !important;
width: 100%;
}
}
.home, .transparent .x-container.main:before {
background-color: transparent;
}
.x-container.main:before {
border-radius: 15px;
left: -5%;
margin-top: 10px;
width: 80%;
background-color: #fff;
}
.archives .body {border-radius: 15px;
left: -5%;
margin-top: 10px;
width: 80%;
}
body.transparent {
opacity: 1 !important;
}
Thank you so much for your input & expertise. If you see a better way for me to only make the home page main content transparent (while keeping a white bg for the main content of every other page), please advise!
Thank you thank you
Hi there,
I like to clarify the issue, would you like to make it transparent in desktop and semi-transparent in mobile? Because that’s how I currently seeing it. Though the semi-transparent makes the text unreadable in mobile, I’m not sure if that’s the direction you wish to do.
Or do you wish to make it totally transparent on both desktop and mobile?
Thanks!
Hi there,
Here’s what I’d like to be transparent on mobile and desktop:
Let’s just pretend there is no CSS in place to do any of this because I deleted it all since nobody could read the site.
Thanks!
Hi there,
In that case, please add this CSS replacing the above CSS.
.x-boxed-layout-active .site,
.x-boxed-layout-active .x-site,
.x-topbar,
.x-colophon.bottom,
.x-colophon.top,
.home .x-container.main:before {
background: transparent!important;
}
body:not(.home) .x-container.main:before {
border-radius: 15px;
left: -2%;
margin-top: 10px;
width: 77%;
background-color: #fff;
}
.page .x-main.left .hentry .entry-featured, .single-post .x-main.left .hentry .entry-featured {
margin-top: -5px;
}
Then please remove the transparent class to your home page, and remove this CSS
.blog .x-main.left, .single-post .x-main.left {
background: #fff none repeat scroll 0 0;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 35px;
padding-top:0;
margin-top:0;
}
Thanks!
Hi! Thanks for your help! This made everything on the Home page transparent, unfortunately! Even the content in the top bar, nav, sidebar, main area, footer…it’s just an empty dark page!
It totally worked for all of the other pages though so we are on the right track.
Let me know what to do to make the content show up on the Home page 
Hi there,
Could you apply the CSS first? I don’t see it being added. Plus, you said the footer, topbar, the sidebar should be transparent SITE WIDE, then have the main content SITE WIDE to be transparent too except the home page content. Which means all elements on the home page are transparent as requested. I also asked that in my previous reply that if you do that, the content will not be readable on mobile.
How about providing screenshots of what you’re expecting to see?
Thanks.
Hello.
I’m so sorry, I guess I wasn’t clear.
Here are the things that should be transparent:
Again, none of the content should be transparent, just the background areas of the content.
Make sense?
When I applied the CSS given, it worked for all of the pages except it also made the content of the Home page transparent, which I don’t want. If there’s a way to modify the CSS so that it doesn’t make the content of the Home page transparent but just makes the backgrounds transparent, that would be great!
Apex will only let me upload 1 image per post so here’s the first of 3 and I’ll add the other 2 in separate posts.
The 2 following images show what we want all pages except home to look like with transparent backgrounds for top bar, side bar, nav bar, and footer. The CSS you provided did just that and it’s great!
Below is what we want the home page to look like (except that this screenshot shows everything slightly transparent while we want the content to be not transparent at all. You can see that there is a transparent background for the main content area under the slider (.
Hi There,
Thank you for the clarification. See this: https://screencast-o-matic.com/watch/cbXnnf2hhQ
.x-boxed-layout-active .site { /* This will make everything transparent first*/
background-color: transparent;
}
.home .x-container.max.width.main { /* Make the content container same with topbar and footer so everything is aligned properly on left and right*/
width: 100%;
}
.home .x-main.left {
background-color: #fff; /*Put back white background on the content on the left*/
}
For more design changes, please use the screencast as guide on how to use browser dev tools to inspect element and apply custom CSS.
Hope this helps.
Thank you, @Lely!
Now how do I change the background of the content on the left on the HOME page only transparent instead of white?
All other pages are fine with the white background.
Here’s a link to the page I want to change.
Thanks in advance
Hi,
To make it transparent, you need to change this code.
.home .x-main.left {
background-color: #fff; /*Put back white background on the content on the left*/
}
to this
/* Transparent on the content on the left of homepage only */
.home .x-main.left {
background-color: transparent;
}
.home .x-container.main:before {
background-color: transparent;
}
For future reference, I came up with this code using Chrome Inspect element.
Hope that helps
Thanks for your reply!
It worked for a while. But I haven’t made any changes and now all the other pages are also fully transparent. I’d like to put the white background behind the left main content on all other pages except for home. 
Sorry for this hassle.
Thanks again in advance.
Hi,
Can you provide us the exact url of the page where it is transparent.
I check some of your pages and the backgound is white.
Try to clear your browser cache and check again.
Thanks
Hey. Hi again.
Ok. So I have tried everything and have cleared my cache. I am still not seeing what I"m asking for.
To recap, here’s what I want:
ON ALL PAGES
HOME PAGE
Ive added a bunch of CSS (see above) but it is now broken
Thanks!
Ariel
Hi Ariel,
This thread is 6 months old and the information there is old and not applied to the new versions.
Also, I see that you use a very old version of the theme with the latest version of the cornerstone. Those are not compatible and will have problems.
Please backup your website completely and update the theme to version 6.1.6.
After that, please open a separate thread for each question and we will do our best to follow up the cases one by one.
Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.
Thank you.