• chrisgreenmusic

    (@chrisgreenmusic)


    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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Adrian Houle

    (@adrian-houle)

    #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)

    CrouchingBruin

    (@crouchingbruin)

    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.

    Adrian Houle

    (@adrian-houle)

    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.

    Thread Starter chrisgreenmusic

    (@chrisgreenmusic)

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

    Chris

    CrouchingBruin

    (@crouchingbruin)

    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;
    }

    Thread Starter chrisgreenmusic

    (@chrisgreenmusic)

    CrouchingBruin – thank you!

    CrouchingBruin

    (@crouchingbruin)

    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.

    Thread Starter chrisgreenmusic

    (@chrisgreenmusic)

    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?

    CrouchingBruin

    (@crouchingbruin)

    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;
    }

    Thread Starter chrisgreenmusic

    (@chrisgreenmusic)

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

    Chris

    CrouchingBruin

    (@crouchingbruin)

    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.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Change H1 colour in veryplaintxt?’ is closed to new replies.