• Resolved mnewing

    (@mnewing)


    This is really driving me crazy and i would appreciate a bit of assistance.

    I want to change the colour of the page title but my custom CSS is not working.

    Here is my CSS
    .entry-title {
    background: pink;
    color: green;
    }

    the background colour change is working but the text colour is not changing. When i inspect the element i can see that the colour is being removed.

    i have tried with the h2 in as well then the background colour is ignored.

    I am clearly doing something stupid please can somebody point it out for me.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi, Would you be able to link us to an example page you’re trying to style?

    Hello mnewing,

    Try below css :


    .entry-title {
    background-color: #FF2272 ;
    color: #019002 !important;
    }

    Hope this will helps you.

    Thread Starter mnewing

    (@mnewing)

    i have tried to use the !important tag and it does not help.

    I am setting up a trial site which i could share as this has been done on a client site which i don’t want to make public yet.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Are you sure you’re using the right selectors? The page title uses the following selectors:

    
    .page .panel-content .entry-title, 
    .page-title, 
    body.page:not(.twentyseventeen-front-page) .entry-title
    

    Tip: Try to avoid using ‘!important’ rules in CSS. These are a pain to override and will lead to headache later on in development.

    Thread Starter mnewing

    (@mnewing)

    trial site setup at https://webyworks.uk/devWP2/

    custom CSS is:

    .entry-title {
    color: white; !important;
    background: #5A005A;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi @mnewing, Did you try the selectors I posted above?
    For future I would recommend using a browser developer tool like the one that’s built into Chrome to find the appropriate selectors. For example, if you right-click on the title and select ‘Inspect element’ a toolbar will show you the CSS that is applying to that title – helping you understand the selectors to use: https://developer.chrome.com/devtools#dom-and-styles

    I try below css code by inspecting in your site and it is working.


    .page .panel-content .entry-title {
    background-color: #FF2272 ;
    color: #019002 ;
    }

    Thread Starter mnewing

    (@mnewing)

    that has fixed it thank you

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘.entry-title colour change not working’ is closed to new replies.