WordPress.org

Ready to get started?Download WordPress

Forums

Link Colour in Twenty Twelve (18 posts)

  1. MarlenMiceli
    Member
    Posted 11 months ago #

    Hi all,

    my website is http://www.hypevibes.co.uk

    I am looking to change the colour of the post titles on the home screen, they are currently blue and when you hover over them they turn black.

    If someone could provide me with a code to change this I would be grateful.

    I have looked at many different threads on this site regarding this and tried all of them, none of them seem to be working.

    Any help would be appreciated.

  2. alchymyth
    The Sweeper & Moderator
    Posted 11 months ago #

    start by installing a plugin for custon css (if you are only planning to make formatting customisations) or by creating a child theme of Twenty Twelve (if you are planning to edit the templates as well).

    http://wordpress.org/extend/plugins/search.php?q=custom+css

    http://codex.wordpress.org/Child_Themes

    you can use a browser inspection tool (such as Firebug for Firefox) to find out where and how the title links are formatted in style.css of the theme.

  3. MarlenMiceli
    Member
    Posted 11 months ago #

    I just used Firebug to locate the correct code, I then checked the hex code that was written to make sure it was the correct one, and it was, I then changed this hex code to 000000 for black, and it's still blue!

  4. Aditya Pandey
    Member
    Posted 11 months ago #

    I just firebug-ed your site and can't find anywhere defined #000 in it.

    You need to modify color accordingly in following code:

    a {
    	color: #21759b;
    }
    a:hover {
    	color: #0f3647;
    }
  5. MarlenMiceli
    Member
    Posted 11 months ago #

    I already have that code at the bottom of my Style.CSS

    http://postimg.org/image/99ppdmwdn/

  6. MarlenMiceli
    Member
    Posted 11 months ago #

    i've used the find function in firefox to locate all the bits of code that contain the colour 21759b, changed them all to 000000 and seen no change?

  7. Aditya Pandey
    Member
    Posted 11 months ago #

    Okay.

    But that is getting overridden.
    Best practice will be :
    Using child theme adding that code in child theme's style.css.
    http://codex.wordpress.org/Child_Themes

    And easiest solution will be:

    To give it priority use !important :

    a:link {
    color:#000000 !important;
    }
    a:visited {
    color:#000000 !important;
    }
    a:hover {
    color:#b5b5b5 !important;
    }

    You should also read more about !important tag here: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 11 months ago #

    You also have a syntax error in your style.css file. You can try adding to the bottom of the stylesheet:

    body {
     border: 10px solid red;
    }

    And nothing will happen.

    Please do not edit the theme's files, it is vital to have a non-editied version of the default themes for debugging.

    Move all of your CSS modifications in a Child Theme or Custom CSS plugin .

  9. MarlenMiceli
    Member
    Posted 11 months ago #

    Thanks for all your help, I'm going to make a child theme now.

    You can close the thread.

  10. Aditya Pandey
    Member
    Posted 11 months ago #

    I investigated the syntax error in your style.css and found 3 syntax error.

    On line 1747, 1750, 1753 : You forget or accidentely removed closing curly bracket }.

  11. MarlenMiceli
    Member
    Posted 11 months ago #

    Is there any easy way to find those lines?

  12. Aditya Pandey
    Member
    Posted 11 months ago #

    Yes, use a code editor like Notepad++.

  13. MarlenMiceli
    Member
    Posted 11 months ago #

    I use a mac

  14. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  15. Aditya Pandey
    Member
    Posted 11 months ago #

    Follow the advice as mentioned by esmi or try this: http://www.sublimetext.com/2

  16. MarlenMiceli
    Member
    Posted 11 months ago #

    Im still unable to find the syntax error, it now appears next to my search box.

  17. MarlenMiceli
    Member
    Posted 11 months ago #

    I've found the lines you mentioned, and added the curly brackets to the end of them, but to no avail.. Any help from anyone? Or can anyone simply take my login and do the deed for me.

  18. Aditya Pandey
    Member
    Posted 11 months ago #

    Since you've corrected the syntax error in style.css, hover color is changed.

    The Syntax Error you're seeing near search box is completely different. It means you edited something in .php file and it didn't worked.

Reply

You must log in to post.

About this Topic