CSS code for customizing background color and font color for individual pages

  • Unknown's avatar
    cantbeatemeatem · Member ·

    I am trying to customize the background color and font color for individual pages, not just blog posts. I have succeeded in customizing the font color for my static Front page Hero section (from white to black), but I don’t know how to customize the rest of the Front page below that i.e. Features section, etc. And, I don’t know how to customize individual pages within my website.

    Thank you for your help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi there!

    I can see that you’ve added a fair bit of custom CSS to your site already. Is this something that you’re fairly familiar with?

    We have a support guide on how to use your browser’s web inspector in order to find your theme’s CSS. If you’re interested in changing just certain parts of your site then this will help you to find the CSS that corresponds with those parts:
    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    Using my web inspector, I was able to find that the features section on your homepage has a class of ‘features’ assigned to it. In CSS, we can select a class using a ‘.’ like this:

    .features {
  background-color: #73baf1;
}

    The above CSS snippet changes the background colour of the features section to match the rest of your front page’s background colour. If you’d like, you can change the value here to a different ‘hex code.’ You can search online for different hex codes and their corresponding colours.

    Similarly, I used the web inspector again to find that the content on your site’s individual pages has IDs of ‘content’ and ‘page-header’. We select IDs using a ‘#’ like this:

    #content, #page-header {
  background-color: #73baf1;
}

    The above CSS snippet change the background colours of all the pages on your site.

    Let me know if this helps or if you have any extra questions. I’ll be happy to assist further. In addition, did you know that we have a CSS forum dedicated to these sort of questions? Our wonderful community of CSS helpers specialise in helping with these here:
    https://en.forums.wordpress.com/forum/css-customization

  • Unknown's avatar
    cantbeatemeatem · Member ·

    Thanks so much. I am not really familiar with CSS, the code you saw was something the another staffer helped me with!

    I do need to change all of the font color on the entire site to black. Could you send me the code for that – I couldn’t find it when using the web inspector. :(

    Also, how to I customize the background and font color for Testimonials and Team?

    Thanks for your patience – I am on a super tight timeline to complete the entire website in about 5 days!

    Tamara

  • Unknown's avatar
    siobhyb · Member ·

    Hi Tamara.

    I do need to change all of the font color on the entire site to black. Could you send me the code for that – I couldn’t find it when using the web inspector.

    Most of the text on your site does look to be black to me already. Could you clarify which specific sections you’re trying to change the colour for?

    Also, how to I customize the background and font color for Testimonials and Team?

    You can change the testimonials section through the following CSS snippet:

    #testimonials {
  background-color: #73baf1;
}

    Hope this helps!

  • Unknown's avatar
    cantbeatemeatem · Member ·

    Hi again!

    Thanks so much for your help – you have been wonderful!

    The font color for the ‘Team’ section and the ‘Testimonial’ section on the Home page is a dark gray, and I need to change it to black.

    Also, the following links are gray on the Home page, and I would like to change them to black:

    Feature section link on the Home page: THE CHEF BEHIND THE ASIAN CARP SOLUTION

    Testimonial section link on the Home page: OUR CHAMPIONS

    Also, when I click to go to the Testimonial Archives, the background is not the blue I love, but the individual testimonials are blocks of white – how do I change the background to match the page’s background.

    Thanks again,

    Tamara

  • Unknown's avatar
    siobhyb · Member ·

    Hi Tamara!

    The font color for the ‘Team’ section and the ‘Testimonial’ section on the Home page is a dark gray, and I need to change it to black.

    The font colour in those sections is defined as black (#000) in the CSS. The only difference I can see is that the text towards the top of your page is bold, which makes it look a little darker. If you’d like, you can add the following CSS snippet to change the font-weight for all paragraphs on your site:

    p {
  font-weight: 400;
}

    Feature section link on the Home page: THE CHEF BEHIND THE ASIAN CARP SOLUTION
    Testimonial section link on the Home page: OUR CHAMPIONS

    The CSS selectors for those two sections are as follows:

    .features .label

    and:

    #testimonials .label a

    Do you think you could find the CSS you need to add based on what we’ve added so far? It’ll be similar to other snippets where we’ve changed the font colour, but you’ll need to switch the CSS selectors out.

    Also, when I click to go to the Testimonial Archives, the background is not the blue I love, but the individual testimonials are blocks of white – how do I change the background to match the page’s background.

    Similar to above, the CSS selector for those boxes is as follows:

    .archive .jetpack-testimonial

    Do you think you can get the needed CSS using that, based on the previous CSS used to change the background colour of sections on your site?

    Let me know how you get on with this!

  • Unknown's avatar
    cantbeatemeatem · Member ·

    I have the hang of CSS coding now – at least for the easy stuff! Thank you so much.

    I do have one more question:

    I use Chrome, and most people I know use Chrome. But, thought I would try to view the site in Internet Explorer – when I did, it looks an absolute mess. It’s not even readable, images are sized all wrong, misplaced, and a visual disaster. Why is this happening, and what can be done?

    I am hoping that the majority of the world uses Chrome.

    Thanks again, for your help.

    Tamara

  • Unknown's avatar
    alexjgustafson · Member ·

    Hi Tamara!

    Siobhan is out for a few days, so wanted to pop in. :)

    Which version of IE were you using to view your site in that caused a mess? We keep everything on WordPress.com useable as possible on older browsers, but for Internet Explorer most themes will only work correctly back to Internet Explorer 9:

    Solve Common Browser Issues

    If you have a reader that has trouble on the site because they’re using an older browser, we have a site where they can find links to the most recent version of all web browsers:

    http://browsehappy.com/

    I am hoping that the majority of the world uses Chrome.

    Note quite a majority, but Chrome is the most popular browser right now:

    http://www.w3counter.com/globalstats.php

    -Alex G.

  • Unknown's avatar
    cantbeatemeatem · Member ·

    Hi Alex,

    Ahhh, yes. I have an old version. My operating system won’t support the newest version: IE 11. I can’t tell what version I have – the details show: IE (64-bit) and IE .lnk

    The site looks gorgeous in Chrome and Firefox, and hopefully most folks that use IE will have the latest version.

    Thanks for your help.

    Tamara

  • The topic ‘CSS code for customizing background color and font color for individual pages’ is closed to new replies.