Changing Background Colors

Hi again :slight_smile:
I want to make the whole Website a bit darker, so i want to change the color of the top, thats still white, the team bg, the news bg and the contact bg. Also, if thats possible i will have to adjust the text color too.

I am using Contact Form 7 for the Contact area, and the submit butten (“Senden” on my site) still takes the main color of the theme, even though i changed it to something else. Can we do something about that too?

Kind regards
Chris

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the colors by going to Appearance > Customize > Additional CSS and pasting it there.


/*Header*/
#header-wrap {
    background-color: #000;
}

#nav-expander i.fa-bars {
    color: #fff;
}

.logo, .main-navigation a {
    color: #fff;
}

/*News section*/
#news, #team, #testimonials {
    background-color: #000;
}

.light-section-heading, .section-sub-heading, .pixova-blogpost-title, h1, h2, h3, h4, h5, h6 {
    color: #fff;
}

#contact, #works {
    background-color: #000;
}

.wpcf7-form label {
    color: white;
}

/*Contact button color*/
input#submit, input[type=submit] {
    background: red;
}

Best Regards,
Support

That worked like a charm, thank you very much :slight_smile: Last question: I also need to change the background colors for my Blogpage, so i need to edit the white area there.Then im perfectly happy :slight_smile:

Hello there,

This should help:


/*Container background color*/
#container, #footer {
    background-color: black;
}

Best Regards,
Support

Thanks, That also worked, Next last question (im so sorry to annoy you all the time) now that i have a dark background, i also need white text like in HERE

EDIT: And of course I also need white text for my blogposts.

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*css turns paragraph tags to white*/
p{
  color:white !important;
}

Best regards,
Support.

Dear support, that also worked great, but it brought another problem up:
No. 1: On my main page in the news section, when theres a new post, the text has the same color as the background (see file “main page blog”), i might need darker thext there.So tthe title below the date is only visible, when i hover over it with the mouse. (see file “mouseover”).

No. 2: The Title, author, “no comments”, category and date are pretty dark on the blogpage when theres a blog post, i would prefer a lighter text color for that, white would be okay there. (see file “Blogpost”).

Thanks a lot in advance and im sorry for the inconvenience.

Hello there,

The following CS should help:


a.pixova-blogpost-title {
    color: red;
}

.entry-meta {
    color: white;
}

.entry-title a {
    color: lightpink;
}

Best Regards,
Support

Thanks a lot for your help, i really appreciate it. Now the last things (i hope i wont have to bother you any more after that) are the following:

  1. The “no comments” is still pretty dark, like on the Blogpost.png, its the “Keine Kommentare” field.

  2. On the page of the Blogpost itself, the entry meta remains dark, whereas in the overview page of all posts its white. I need it in white too :slight_smile:

  3. Above the blog picture on the same page I linked theres an overview on where I am on the page, and the blog title after the red “Home” is also black, i need it white too, please :slight_smile:

  4. Last issue: if i want to add a comment, the text has the same color as the comment box, can we either darken the box or make the text black? (I am afraid, this might interfere with some other CSS code that made the text black)

Thanks a lot again, dear support, youre doing a great job :slight_smile:

EDIT: Also the headline right above the textfield where you can add a comment is white, or at least pretty light :slight_smile:

Hello there,

Please try the following:


.entry-meta a {
    color: white;
}

.pixova-lite-breadcrumbs span {
    margin-right: 5px;
    color: white;
}

#respond textarea {
    color: black;
}


As for the 2nd issue, the entry meta is white on my end or are you referring to something else?

Best Regards,
Support

Issue 2 seems to be resolved now, maybe it was displayed wrongly :slight_smile:

Okay now the line

/*css turns paragraph tags to white*/ p{ color:white !important; }

turns my texts into white, which is awesome, but it also turns the preview text of my blogposts white, which makes them invisible. I made it blue in my picture, so you know what i mean. Is there a css to only change the color of these preview texts, cause when i change it into black, other texts also get black and will be invisible again, because of the dark background.

Kind regards
Chris

EDIT: The “Kommentar” is still white and invisible, see my second picture, where i highlighted it.

Hey there,

You can use the CSS below to address that issue:

Admin Area -> Appearance -> Customize -> Additional CSS

/*form color*/
p.comment-notes, label, input{
  color:black !important;;
}

Best regards,
Support.

That did solve the second issue, but also turns the text color of the contact form on my homepage black and makes it invisible, since the contact form on my homepage is dark, the comment section below the blogposts is light. :smiley:
I think the easiest way (if theres a CSS for it) would be to turn the comment section below the blogposts dark, is there such a CSS?

Also I still have no solution for the first issue i addressed in the post above :slight_smile:

Kind regards
Chris

Hello there,

I hope you are doing well today.

This CSS should change the homepage form to white and change the font color of the post excerpt:


.home .wpcf7-form-control-wrap textarea {
    color: #fff;
}

.owl-item p {
    color: black !important;
}

Best Regards,
Support

Dear support, we are pretty close now :slight_smile:
The following problems occur now:

  1. The Text in my contact form is now white, except for the first text fields. See “Problem 1”

  2. The

/css turns paragraph tags to white/
p{
color:white !important;
}

works, but also causes the following issue somehow. The “Kommentar” is white, and my text in the blogpost is also whit, i need the blogpost text white and the “Kommentar” black, or i can keep it both white, if theres the possibility to change the color of the “add comment” section on my blogpage here. I added 2 pictures to show you what it looks like with or without the code i pasted above.

Thanks in advance and still sorry for all the different problems i have

Chris

Hello there,

Please try the following:


.home input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    color: white;
}

.home input.wpcf7-form-control.wpcf7-text {
    color: white;
}

div#comments span {
    color: black !important;
}

p.comment-notes {
    color: black !important;
}

Best Regards,
Support

Thanks again, the first 2 codes worked, as the text in the contactform is now white, the last 2 however, seem to change nothing at all for the comment field. i dont know if theres some code interferring with this one? I dont have another “comment” css though.

Hello there,

Please remove the CSS that is not working and add this set instead:


span#email-notes {
    color: black;
}
p.comment-notes {
    color: black !important;
}
#comments #respond label {
    color: black;
}

Best Regards,
Support

You are really amazing! It worked :slight_smile:

Okay, my final question now, my footer is dark, but as soon as i scroll down, it turns back to light, is there a way to keep it dark?
This is really the last thing i need :slight_smile:

Kind regards
Chris

EDIT: This also requires to make the dark text in the header menu into light text :slight_smile:

Hello there,

I am not seeing the footer color change at all on my end.
Please try clearing your browser cache then reload the page.

It would also help to have an image of this issue.

Best Regards,
Support