Invert colors for blog pages

[pixxadoo]

Hi there,

I tried to set the general background color of all my pages to a dark color.
However, the default shows a white page with dark text. I want to simply invert it.
I tricked it by changing the section background color to dark.

However, on my blog site, this trick is not possible.
The website is on: libertango-baden.org and the blog on http://libertango-baden.org/konzerte/

I saw this question several times already but only to manipulate the css code directly.
I would appreciate your help.
thanks.
Best,
Franziska

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

.blog .x-container.main:before {
    background-color: #4d4b4b;
}

Let us know how it goes!

[pixxadoo]

Thanks a lot That really helped for the main blog page.
What do I need to do for the single posts page?
Example: http://libertango-baden.org/2018/01/06/tango2/
The post background is white but what is worse the sidebar is overshadowed so it’s not readable since the text is in the dark.
Furthermore, the top of the section is cut off by the header

best,
Franziska

[rad]

Hi there,

Please add this CSS as well,

 .single-post .x-container.main:before {
    right: -20%;
}
    

As for readability, should the background changed to lighter or should the sidebar links be colored white?

And for the top section, you set your header to have a 70px height, it should be 168px. Please go to Admin > X > Launch > Theme Options > Header > NAVBAR > NAVBAR TOP HEIGHT (PX) and set it to 168 (no px).

Thanks!

[pixxadoo]

Thanks. That worked. as well.

For readability: Everything should be dark and the text white or light grey.
But I would like to play around with different shades myself if that’s possible so I can see what looks best.
How would I modify this?

Also now the header menu has those long vertical lines down which do not look really nice. Is there a way to make them disappear or at least shorter?

Thanks again for your awesome and really fast response

[christopher]

Hi there,

For the background color of the single blog posts kindly add the code below to X > Launch > Options > CSS:

.single-post #top {
    background-color: hsl(0,2%,30%);
}

For the sidebar, you see that most of the items are links, and the heading tags with border colors, kindly add the code below:

body .x-sidebar .widget a,
body .x-sidebar .widget ul li a {
    color: hsl(0,0%,84%);
    text-decoration: none;
}

body .x-sidebar .widget a:hover,
body .x-sidebar .widget ul li a:hover {
    color: hsl(0,0%,50%);
}

body .x-sidebar .widget li {
    border-color: hsl(0,0%,50%) !important;
}

body .x-sidebar .widget .h-widget {
    border-color: hsl(0,0%,50%);
    color: hsl(0,0%,50%);
}

You are welcomed to change the colors in the code and play with them to see what will be the correct case for you.

Finally, add the code below to the same place to remove the vertical lines of the header menu:

.x-navbar .desktop .x-nav>li>a {
    border-color: transparent !important;
}

Kindly open up separate threads for each additional question, that will help us to focus on each case and give you a better service.

Thank you.

[pixxadoo]

Thanks so much. And yes, I will open another thread for each subject.

[ruenel]

You’re most welcome.
We will be responding your new threads shortly.