Transparent site

I have a problem I hope you can help me with.

My site is transparent because I’m using the following code:

.page-template-template-blank-4-php .x-main, .page-template-template-blank-5-php .x-main, .page-template-template-blank-6-php .x-main, .page-template-template-blank-8-php .x-main, .site {
background-color: transparent;
}

I like this look. However I have 1 problem. My template pages like my shop page, post page, and account page have transparent headers and sidebars because they are not custom pages.

What is the best way to fix this?

I was thinking I could just make my main pages transparent, which I tried by adding .page-id-82… to the line of code. It works for the page but the headers and site bars are still transparent.

Please help!
Thanks

Hello @quituck,

Thanks for writing in!

Please update your code and remove the ,.site from your code above. It should only be:

.page-template-template-blank-4-php .x-main, 
.page-template-template-blank-5-php .x-main, 
.page-template-template-blank-6-php .x-main, 
.page-template-template-blank-8-php .x-main {
      background-color: transparent;
}

so that only those pages using the template will have a transparent background color.

Best Regards.

I tried that and unfortunately that did not solve my problem. When I remove .site my websites main pages are no longer transparent. My shop, blog, and post pages sidebars and header and no longer transparent, which is good but the sites main pages are not transparent when I remove .site and I want them to stay transparent.

Please advise.

Thanks

Hello @quituck,

If that is the case, then you can have this code:

.page-template-template-blank-4-php .x-main,
.page-template-template-blank-4-php .site, 
.page-template-template-blank-5-php .x-main,
.page-template-template-blank-5-php .site, 
.page-template-template-blank-6-php .x-main,
.page-template-template-blank-6-php .site, 
.page-template-template-blank-8-php .x-main,
.page-template-template-blank-8-php .site {
      background-color: transparent;
}

Having it this way, the .site is target just for these pages only. Hope this helps.

That solved my problem but I ran into another issue.

How do I keep my navbar transparent on those pages?

Hello @quituck,

You can use this custom CSS code to make the navbar transparent.

.page-template-template-blank-4-php .x-navbar,
.page-template-template-blank-4-php .x-logobar, 
.page-template-template-blank-5-php .x-navbar,
.page-template-template-blank-5-php .x-logobar, 
.page-template-template-blank-6-php .x-navbar,
.page-template-template-blank-6-php .x-logobar, 
.page-template-template-blank-8-php .x-navbar,
.page-template-template-blank-8-php .x-logobar {
      background-color: transparent;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

So, that did not work. My site blog page is nav is still not transparent and the sites main pages are completely transparent. They look white.

See attached image for reference.

Please advise on how to fix.

Hi @quituck,

To make that code work for the Blog page too, you need to use the blog class instead of .page-template-template classes. It should look like the following. Please remember that blog class only points the blog page not the other archive pages.

.blog .x-navbar,
.blog .x-logobar 
{
    background-color: transparent;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

Unfortunately that did not work. I’ll spend a little more time figuring out this transparency issue on my own since, I know all the classes to the nav bar now.

I appreciate all of your help. Thanks!

Feel free to resolve this post even though you guys did not help me to solve this problem. I appreciate your efforts.

Hi @quituck,

Great! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

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