Changing background and font colour on only one page

  • Resolved David Hunter – LAS

    (@david-hunter-las)


    5 years, 12 months ago

    Hi,

    I need to change the background colour and the text colour on only one page within my WordPress website (it is a page, not a post).

    I’ve Googled extensively and found quite a lot of examples of people getting this to work. But it simply does not work for me. I don’t get any error messages… things just don’t change. I’m not sure if I’m putting the CSS in the right place or if I’m even creating the CSS correctly.

    I am running WordPress version: 4.9.8.

    I am running the theme: Twenty Seventeen (by WordPress).

    I need to change the white background to black and change all the text to red (including links).

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

    Thanks in advance.
    David

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    Try this css under theme custom css section:

    body.page-id-3957 .site-content-contain{background-color: #000; color: red;}
body.page-id-3957 .entry-title{ color: red;}
    Thread Starter David Hunter – LAS

    (@david-hunter-las)

    Ah, that’s a step in the right direction! Thanks.
    I realise where I was going wrong – I was putting the CSS in the wrong place.

    Anyway, there are a few lines of text that remain grey instead of red at that page. Could you please advise how I change the colour of the text that is now grey?

    Thanks again for your help.

    Thread Starter David Hunter – LAS

    (@david-hunter-las)

    Never mind; got it working by adding in the following custom CSS:

    body.page-id-3884 .site-content-contain{background-color: #000; color: red;}
    body.page-id-3884 .entry-title{ color: red;}

    body.page-id-3957 .site-content-contain{background-color: #000; color: red;}
    body.page-id-3957 .entry-title{ color: red;}

    body.page-id-3957 a {
    color: #299471;
    text-decoration: none;
    }

    body.page-id-3957 a:focus {
    outline: thin dotted;
    }

    body.page-id-3957 a:hover,
    a:active {
    color: #0bc9da;
    }

    body.page-id-3884 a {
    color: #299471;
    text-decoration: none;
    }

    body.page-id-3884 a:focus {
    outline: thin dotted;
    }

    body.page-id-3884 a:hover,
    a:active {
    color: #0bc9da;
    }

    body.page-id-3884 label {
    color: red;
    display: block;
    font-weight: 800;
    margin-bottom: 0.5em;
    }

    body.page-id-3957 label {
    color: red;
    display: block;
    font-weight: 800;
    margin-bottom: 0.5em;
    }

    body.page:not(.twentyseventeen-front-page) .entry-title {
    color: red;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    }

    (I needed it on two pages, hence id-3884 and id-3957)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing background and font colour on only one page’ is closed to new replies.