WordPress.org

Ready to get started?Download WordPress

Forums

Change H1 colour in veryplaintxt? (12 posts)

  1. chrisgreenmusic
    Member
    Posted 10 months ago #

    Hi

    I've recently created this website using the veryplaintxt theme

    http://www.licencetoquill.co.uk

    I have a very rudimentary knowledge of css, but can't work out how to change the colour of h1 (the main title). If anyone could enlighten me I'd be very grateful!

    Many thanks

    Chris

  2. Adrian Houle
    Member
    Posted 10 months ago #

    #blog-title > a {
    color: pink;
    }

    Unfortunately this only works if you change the colour to pink. I am 100% serious. ;)

    By the way you are correct about it being an h1 font, the #blog-title is a h1 element, but its the link that holds the color property. So this selector could also have read:

    h1 > a {
    color: pink;
    }

    Problem with this is it would change the color of every link that was the direct first child of a h1 header element, the previouse is specific to that header. Also being specific gives it specifity points in the case of competing style changes (like if a plugin tries to apply CSS to it, you want to beat that plugins style changes)

  3. CrouchingBruin
    Member
    Posted 10 months ago #

    You can target just the site title by including the ID in the selector:

    #blog-title a:link,
    #blog-title a:visited,
    #blog-title a:hover
    {
       color: #00FF00;
    }

    I set all three pseudoclasses (I left out active) to the same color, because most sites don't have their site titles changing color on hover. If the theme has a Custom CSS option, then add the above rule to that field. If it doesn't, use a CSS plugin.

    What's weird about this theme is that the style.css file uses the British spelling of the word colour instead of color, so all of the CSS rules which uses that property aren't working.

  4. Adrian Houle
    Member
    Posted 10 months ago #

    What's weird about this theme is that the style.css file uses the British spelling of the word colour instead of color, so all of the CSS rules which uses that property aren't working.

    Haha that pretty funny.

    Good point about covering the effects too, I guess I should have mentioned that.

  5. chrisgreenmusic
    Member
    Posted 10 months ago #

    Pasted CrouchingBruin's code into the Custom CSS plugin and it worked a treat. Thanks for all your help guys!

    Chris

  6. CrouchingBruin
    Member
    Posted 10 months ago #

    You may want to do the same thing for your menu; I noticed that I get different link colors depending upon whether or not I've visited a page.

    #menu a:link,
    #menu a:visited,
    #menu a:hover
    {
       color: #9C080B;
    }

    Or, if you want to make the menu item change on mouse hover:

    #menu a:link,
    #menu a:visited
    {
       color: #9C080B;
    }
    #menu a:hover
    {
       background-color: #9C080B;
       color: #ffffff;
    }
  7. chrisgreenmusic
    Member
    Posted 10 months ago #

    CrouchingBruin - thank you!

  8. CrouchingBruin
    Member
    Posted 10 months ago #

    I've also just noticed that your menu displays two Home links when you go to any page other than the Home page. If your theme supports Custom Menus, then you should try creating a custom menu and adding it to your theme's main menu location.

  9. chrisgreenmusic
    Member
    Posted 10 months ago #

    Thanks again - you've been more than helpful!

    It appears that the theme doesn't natively support custom menus and I can only place them in the sidebar which I want to keep free for contact details. I guess there's no way to sort it via css?

  10. CrouchingBruin
    Member
    Posted 10 months ago #

    Actually there is. Doing it through a custom menu would have been more elegant, but brute force will work.

    div#globalnav ul li.home-link {
      display: none;
    }
  11. chrisgreenmusic
    Member
    Posted 10 months ago #

    Wow - thank you! I'm seriously grateful. Thank you so much for all your help!

    Chris

  12. CrouchingBruin
    Member
    Posted 10 months ago #

    You're welcome. Next time, though, try to pick a theme out of the WordPress Theme Repository. They are usually up-to-date (e.g., support custom menus), follow certain theme development standards, and are generally easier to support since anyone can install the theme to take a look at it.

Reply

You must log in to post.

About this Topic