Support » Theme: Twenty Twenty-One » Changing background and font color on only one page

  • Resolved elieauf

    (@elieauf)


    Hi,

    I need to change the background color and the text color on only one page (my front/home page in this instance) within my WordPress website (it is a page, not a post).

    I run WordPress 5.6.1. with the theme Twenty-Twenty One.

    I need to change the front page to a black background and all the text/menu on the front page to white. The rest of the website is in a custom blue.

    Could someone please give me a step-by-step guide to achieving this?

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael

    (@alchymyth)

    step one: learn CSS, particularly the background and color properties;
    step two: get familiar with using the ‘inspect’ tools of most browsers to identify which CSS selectors to use;
    step three: go to the dashboard to ‘Appearance’ – ‘Customize’ – ‘Additional CSS’;
    step four: add this into the Additional CSS and click ‘publish’:

    body.home { background-color: black; }
    body.home * { color: white!important; }
    Thread Starter elieauf

    (@elieauf)

    Hi Michael,

    Thanks a lot for steps three and four, worked like a charm.
    I’ll make sure to address steps one and two to becomes more independent and flexible in how I can work with WordPress.

    In the meantime, if there’s an “easy” tip as to how to write the same codes for different pages I’ll take it with pleasure.

    Thanks again !

    Elie

    Thread Starter elieauf

    (@elieauf)

    resolved

    Michael

    (@alchymyth)

    how to write the same codes for different pages

    if pages have more written content, ot gets more compicated…

    in the given CSS, .home refers to the body_class for the home page;
    static pages would have .page and .page-id-123 where 123 is the id of the page.
    see https://developer.wordpress.org/reference/functions/body_class/ and https://developer.wordpress.org/reference/functions/body_class/#comment-1930

    with that, you could easily set an individual background color for any page.

    the font colors in the given CSS was set using a rather brutal way by using * as the selector for anything in the site, and enforcing the font color by using !important. it only worked because the front page had very little limited text.

    if the page is full of various texts and links etc which each might have a different color to start with, you would need to style each font colors more selectively and individually…

    Thread Starter elieauf

    (@elieauf)

    Great, thanks so much for this thorough explanation! Will look it through.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.