Content Background Color on Ethos | cont

iTurtle · May 13, 2018, 9:17am

dear support,

i open this ticked as you suggested here:

and i am referring to this css:

.x-boxed-layout-active .site,
.x-boxed-layout-active .x-site,
.x-container.main:before {
background-color: rgba(255, 255, 255, 0.7) !important;
}

you gave it to me to make the content background transparent.

now it try to make the header and footer totally transparent. the header is a transparent rev-slider now.

any idea how i could achive this? i tried a lot…

thanks so much! kai

christian · May 13, 2018, 10:46am

Hey Kai,

Please change the code to this:

.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
    background-color: transparent;
    box-shadow: none;
}

See https://youtu.be/NEmFHlPuxzc

Hope that helps.

iTurtle · May 13, 2018, 11:29am

hey christian,

you are the best!!! fast and it works perfectly

addendum: i just now see that the content area with your code is also transparent in the published site. in the preview i in chrome it looked semi transparent with this code:

.x-container.main:before {
background-color: rgba(255, 255, 255, 0.4) !important;
}

but that does not work.

now i tried this:

.x-container.max.width.main {
background-color: rgba(255, 255, 255, 0.4) !important;
}

but that does not cover the whole width of the navigation bar.

any magic snippet to make it perfect?

thanks also for the video! i was trying to find my way around the same way. and i see in your video that the code of the this area (.x-boxed-layout-active .site, .x-boxed-layout-active .x-site) is not being highlighted when you select it. so you might know what to look for, but i just could not find that bit of code it was much easier in “icon” by the way where i did the same.

anyhow thanks again and have a great sunday! kai

christian · May 13, 2018, 12:12pm

You’re welcome, Kai. The code with this selector .x-container.main:before should make the content background semi-transparent. Try replacing the other one with this:

.x-boxed-layout-active .x-container.max.width.main {
    background-color: transparent !important;
}

Achieving this in Ethos is not as straightforward because of its extra markup.

Thanks.

iTurtle · May 13, 2018, 12:42pm

hi christian,

thanks again!!

that makes the preview like in your screenshot look just the way i want to achive.

but the site in safari has now not transparencies at all. https://genius.iturtle.eu/

this is all of my custom css:

.x-container.main:before {
background-color: rgba(255, 255, 255, 0.4) !important;
}

.x-boxed-layout-active .x-container.max.width.main {
background-color: transparent !important;
}

.x-navbar {
background-color: rgba(24, 55, 149, 0.8) !important;
}

.x-colophon.top {
background-color: transparent !important;
}

.masthead-inline .desktop .x-nav {
float: none;
}

thanks again very much! kai

christian · May 13, 2018, 2:07pm

Your codes work but you didn’t add the CSS I gave in my previous reply. See https://youtu.be/lhSUp_VrRsc

iTurtle · May 13, 2018, 2:34pm

thanks christian,
but you said there i should replace the previous code with it.
now i added
.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
background-color: transparent;
box-shadow: none;
}
and the whole site is transparent again.
i guess i am somewhat lost now… sorry.
it again looks good in the preview but not in the published site for which i use a different browser. how come? maybe a safari problem? firefox shows it correctly i just found out.
best wishes, kai

christian · May 13, 2018, 3:03pm

Sorry for the confusion. I meant to change this code. x-site must be transparent in order for the header and footer totally transparent.

It works on my end (Chrome) and also in Firefox. Have you cleared the cache in Safari? Changes should work in Safari too because those are well-supported CSS properties.

Thanks.

iTurtle · May 13, 2018, 4:24pm

hi christian,
thanks again! i hope you stay with me. but i tried a lot and no combination of things work. i also think i know what you mean but it just does not work.
this is the code i use now:

.x-boxed-layout-active .x-site {
background-color: transparent !important;
}
.x-boxed-layout-active .site,
.x-container.main:before {
background-color: rgba(255, 255, 255, 0.7) !important;
}

i made the x-site part transparent. but not it looks different again. i hope you are still at work and that we can finish this today. thanks so much! kai

christian · May 13, 2018, 5:09pm

This code given in my first reply will make the x-site transparent. Should have added that site and x-site are the same.

/* Make the Site Container Transparent */
.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
    background-color: transparent;
    box-shadow: none;
}

I reviewed the discussion again and I should have added that to make the content semi-transparent, you need this code.

/* Make Ethos Content Semi-transparent */
.x-container.main:before {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

Those are the only codes you need to make the site transparent while keeping the content semi-transparent. Those already work in your site as you can see in my last screenshot. Not sure why you changed it. If it’s only not working in Safari, try clearing the cache.

Thanks.

iTurtle · May 13, 2018, 5:10pm

dear christian,

thanks a lot! forgot to mention that i cleared the cache and restartet safari. i now also used a different mac with safari and it seems to be a safari related problem. the semitransparent area does not show up. the whole site is transparent now.

i used your css like this:

/* Make the Site Container Transparent */
.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
background-color: transparent;
box-shadow: none;
}

/* Make Ethos Content Semi-transparent */
.x-container.main:before {
background-color: rgba(255, 255, 255, 0.7) !important;
}

firefox and chrome display it correctly.

i hope we don’t have to give up on this… thanks so much! kai

christian · May 13, 2018, 5:14pm

What version of Safari are you using? rgba is supported in Safari. Try changing this code

/* Make Ethos Content Semi-transparent */
.x-container.main:before {
background-color: rgba(255, 255, 255, 0.7) !important;
}

to this:

/* Make Ethos Content Semi-transparent */
.x-container.main:before {
background-color: #fff !important;
background-color: rgba(255, 255, 255, 0.7) !important;
}

If Safari does not support rgba, you should see a white background for your content.

Thanks.

iTurtle · May 13, 2018, 5:36pm

dear christian,

thanks so much!

but… it did not do the trick.

i have the latest version of safari (Version 11.1 (12605.1.33.1.4) on macos sierra.

the other computer has macos high sierra installed with the latest version of safari. same problem.

thanks a million! kai

rad · May 13, 2018, 6:56pm

Hi there,

The problem is with :before selector, it doesn’t fully work on safari. Try replacing this

.x-container.main:before {
background-color: #fff !important;
background-color: rgba(255, 255, 255, 0.7) !important;
}

with this

.x-container.main:before {
display: none;
}
.x-container.main {
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
}
.x-container>.offset {
    margin-top: 0px;
}

Hope this helps.

iTurtle · May 13, 2018, 7:47pm

HEUREKA!!!
that did the trick and i am so relieved and happy!
don’t know how to thank you properly. what a great support. will recommend you anytime!
all the best! kai

ruenel · May 13, 2018, 10:47pm

Hello Kai,

No need to mention it.
We’re just glad we were able to help you out.

Regards.

system · May 23, 2018, 10:48pm

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