Change colour of text in header on certain pages?

Viewing 15 replies - 1 through 15 (of 36 total)

  • Hi,

    You could do it in CSS itself, if you have a class assigned to your <body> for example;

    <body class=”home xxx xxx <!– is usually how things look. In that case, in your CSS you would do the following;

    .home #masthead {color:#333;}

    That’s for every page is each page’s body has a class for that page;

    <body class=”home xxx xxxx
    <body class=”about xxx xxxx

    If not, you can do that by changing your theme or you can add a little bit of code at the bottom of your template setup like footer.php file doing something like this;

    <?php if (is_page('home')) { ?>
<style type="text/css">#masterhead {color:#333}</style>
<?php } elseif (is_page('about')) { ?>
<style type="text/css">#masterhead {color:#000}</style>
<?php } ?>

    And so on. What text are you trying to change?

    Thread Starter WSmith7069

    (@wsmith7069)

    Ill try doing that.

    Its the text in the header.

    Home, about, gallery etc. I want that to be black on all the other pages.

    Thanks

    All other pages but Homepage?

    Thread Starter WSmith7069

    (@wsmith7069)

    That is correct

    <?php if (is_page('home')) { ?>
<style type="text/css">#masterhead {color:#FFFFFF !important}</style>
<?php } else { ?>
<style type="text/css">#masterhead {color:#00000 !important;}</style>
<?php } ?>
</body>    <!-- don't add these, just showing you where the above code should be placed
</html>     <!-- don't add these, just showing you where the above code should be placed

    Easy hack ?? Let me know if that works.

    Thread Starter WSmith7069

    (@wsmith7069)

    Ive done this

    View post on imgur.com

    There has been no change on the about page?

    Hi,

    You have to flip the colors… so for the about page, it would look like so;

    <?php if (is_page('about')) { ?>
<style type="text/css">#masterhead {color:#00000 !important}</style>
<?php } else { ?>
<style type="text/css">#masterhead {color:#FFFFF !important;}</style>
<?php } ?>

    Hope that helps.

    Thread Starter WSmith7069

    (@wsmith7069)

    Nope, that still hasn’t worked. Do you think having it set so when I hover over the text it changes to a different colour could affect the code?

    Ahhhh I see, alright let’s try this;

    <?php if (is_page('about')) { ?>
<style type="text/css">
.site-header a, .main-navigation ul ul a, #header-right-menu ul ul a, .menu-open, .dashicons.menu-open, .menu-close, .dashicons.menu-close {
    color:#000 !important;
}
.top-navigation ul li a, #header-right-menu ul li a {
   color:#000 !important;
}
<?php } ?>

    Let me know if that works. The above will only work for the “about” page. If you want it for all pages but homepage let me know, I’ll do a different code.

    Thread Starter WSmith7069

    (@wsmith7069)

    That didn’t work.

    Just to confirm Im adding this to footer.php. Not header.php?

    Hi,

    Yes in footer.php … so it loads last. However, I don’t see it yet in the code. I do see that you are using cache plugins, can you dump the cache. Also does footer.php control all pages or is there one for homepage and about page, etc..?

    Thank you.

    Thread Starter WSmith7069

    (@wsmith7069)

    Hi

    I have got it working.

    I dumped the code into a simple css plugin I have installed. That seemed to work.

    How can I get it to work for all the pages other than homepage?

    Apparently cache plugins, help speed up the site, but haven’t done enough research into them. Are they a big problem?

    To answer your question, they are no other pages like homepage.php.

    Thanks

    Thread Starter WSmith7069

    (@wsmith7069)

    Hang on I spoke to soon, it has changed all the text to black, even the homepage.

    Cache plugins are O.K. if you ask me. Host should do everything to speed your website up and not plugins, because like in your case, you don’t see changes upon submitting them.

    However, he’s the code to get all but the homepage black letters;

    <?php if ( !is_page('home') ) { ?>
<style type="text/css">
.site-header a, .main-navigation ul ul a, #header-right-menu ul ul a, .menu-open, .dashicons.menu-open, .menu-close, .dashicons.menu-close {
    color:#000 !important;
}
.top-navigation ul li a, #header-right-menu ul li a {
   color:#000 !important;
}
<?php } ?>

    Forgot to mention that every time you update anything in the Footer.php file, clear cache within your cache plugin ??

Viewing 15 replies - 1 through 15 (of 36 total)
  • The topic ‘Change colour of text in header on certain pages?’ is closed to new replies.