Docs

[therealmusician]

Georgemullerauto.com

Latest versions of WordPress, and X, and Cornerstone (just updated today).

I’m trying to make the green background behind “George Muller Auto” at the top transparent. If I make the green background transparent, the site underneath (which is white) is now the color.

If I make that site color transparent, then the whole site goes transparent, which fixes the header problem but creates a new one.

I then tried making the site background white, which fixed it on the home page but then the blog pages are still messed.

Is there an easier way to do this? I like the look when the logo background is transparent. I would ideally like to make the topbar transparent too. I’ve looked at some of the other articles on it, but they don’t seem to address my problem in quite the same way.

Thanks a bunch!

[Christopher]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.x-logobar {
    background-color: transparent;
}
.x-main.full {
    background-color: #fff;
}
.site {
    background-color: transparent;
}

Hope that helps.

[therealmusician]

Hi Christopher,

I tried out the code, but it still made my site transparent when you visit any of the blog/article pages. The home page displayed correctly, but no other pages.

http://georgemullerauto.com/wp-content/uploads/Screen-Shot-4.png

Here is an example of one of the pages (I’ve fixed it now so that visitors can view the site properly):

http://georgemullerauto.com/classic-cars/

[Rupok]

Hi there,

Thanks for updating. maybe we didn’t get you properly. Would you add a mockup of what you are trying to achieve?

Cheers!

[therealmusician]

I’m just trying to have the header background transparent without the body of the article turning transparent. Look at my previous screenshot compared to this one:

http://georgemullerauto.com/wp-content/uploads/Screen-Shot-4-1.png

[Zeshan]

Hi there @therealmusician,

Thanks for writing back!

What you are trying to achieve is not easily possible because your site is using boxed layout. However, you can try using following CSS code under Custom > CSS in the Customizer:

.x-logobar {
    background-color: transparent;
}
.x-main.full {
    background-color: #fff;
}
.site {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.x-header-landmark {
  background-color: #fff;
}

.x-header-landmark+.x-container.max.width {
  background-color: #fff;
}

.x-header-landmark+.x-container.max.width:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff;
  display: block;
  left: 0;
  margin-top: -33px;
  z-index: -1;
}

Hope this helps. 🙂

Thank you!

[therealmusician]

Thanks a ton. It did work. Might be a good idea to have transparent headers available in every stack as a default option!

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts