• URL: http://www.perthpunk.com
    Theme: Twenty Twelve child

    I want to change the link colour from the default light grey to something a bit more easily readable. However, I only want to change the color of hyperlinks text within a page, without automatically also changing the color of the header text or page title.

    I’ve applied every bit of coding advice I can find on these Support forums, and by googling, and nothing works without also affecting the header and page titles (and sidebar widget links, for that matter, although I don’t mind if these change to the same color as the hyperlinks in page content).

    If anyone has any suggestions, would be much appreciated.

    Cheers
    Ross

Viewing 12 replies - 1 through 12 (of 12 total)
  • I have yet to sort all of that out for myself, but here is where I intend to begin:
    http://wordpress.org/search/change+twenty+twelve+links+color?forums=1

    One thing I do know is that Twenty Twelve has those colors set in more than one location and that the ones inside media queries must be inside media queries in a Child Theme also.

    Hi,

    I use this theme as a parent theme and change many aspects of it using a child theme.

    Please see:

    http://codex.wordpress.org/Child_Themes

    http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

    https://managewp.com/how-to-create-a-child-theme

    If you need more help then there are many online articles about how to create a child theme.

    Once you have child theme, create a style.css file for it.

    This is the css that controls links in posts/pages and widgets:

    /* ———————————- Links */

    a, a:visited {
    color: #0678BE;
    text-decoration: none;
    }

    a:hover {
    color: red;
    text-decoration: underline;
    }

    .widget-area .widget a {
    color: #0678BE;
    }

    .widget-area .widget a:hover {
    color: red;
    text-decoration: underline;
    }

    Success!

    Thread Starter RossB

    (@rossb)

    Hi leejosepho and wpfan1000, and thanks for your responses.

    Leejosepho, as stated, I’ve already been through all the posts on WP Support I could find to do with changing link color in Twenty Twelve. Interesting point you make, though, about link colors being “set in more than one location and that the ones inside media queries must be inside media queries in a Child Theme also.” I’ll have a look at the original Twenty Twelve CSS Stylesheet with that in mind – might offer a clue as to why I haven’t been able to change page hyperlink colors so far.

    wpfan1000, I am well aware of child themes and modifying them – but thanks for the links anyway! The CSS you provided doesn’t work properly on my site, unfortunately. The links in pages remained unchanged. Some widgets did change hover color as per the code changes I made based on your code suggestion, but not all! And others were unchanged.

    So, still stuck – but thanks for your efforts, guys.

    Cheers
    Ross

    This is the thread that led to my eventually getting things fixed here:
    http://wordpress.org/support/topic/lost-my-blue-hyperlinks-in-2012-theme?replies=18

    I’ll have a look at the original Twenty Twelve CSS Stylesheet…might offer a clue as to why I haven’t been able to change page hyperlink colors so far.

    If you are doing (or if you have already done or are planning to do) a lot of modifications, you can keep everything organized and tidy by adding the Template: twentytwelve line to a copy of Twenty Twelve’s entire original style.css (and do *not* add the @import line), and then meld your own previous modifications into that and make that your style.css for your Child Theme. I did that a long time ago, and that makes it much easier to find the correct selector in the proper location and make the modification exactly where-and-as the Twenty Twelve designers and coders intended for it to be rather than being piled in a heap of code at the bottom of a short sheet being processed along with Twenty Twelve’s.

    Thread Starter RossB

    (@rossb)

    Ha! Figured it out by trial and error, after scrutinizing the Twenty Twelve parent stylesheet.

    For the information of others who might happen upon this thread, the following code worked for me in changing the color of hyperlinks within the page content area only (ie: the code has no effect on widgets, header or title text).

    .entry-content a:visited,
    .comment-content a:visited {
    	color: #21759b;
    }
    
    .entry-content a:hover,
    .comment-content a:hover {
    	color: #ff9933;
    }

    Note: I placed the code above all media queries in my stylesheet. It tests fine with site reduced to about cellphone size.

    Cheers all
    Ross

    …worked for me in changing the color of hyperlinks within the page content area only (ie: the code has no effect on widgets, header or title text).

    Cool beans. That has been on my “next” list for quite a while now!

    Hi RossB,
    Thank you for your post.
    I tried your solution and for me, apart of the content area, also is working in the footer, that was added by me. Not in the rest.

    See: http://wordpress.org/support/topic/twenty-twelve-change-link-color?replies=5

    Cheers,
    Gabriel

    Thread Starter RossB

    (@rossb)

    Gabriel, I’m far from adept at coding, but maybe if you provide your site URL on your thread it might be clearer for others to see what your current problems are.

    As stated above, I only arrived at a solution that works for me on my Child Theme by trial and error, based on my observations of the coding on the Twenty Twelve parent theme. I’m sure someone with real expertise in coding will be able to advise you on how to mod my code to achieve what you want.

    Maybe you could try deleting the following lines and see what happens (and of course, deleting the comma after the first lines):

    .comment-content a:visited
    .comment-content a:hover

    So, your lines would be:

    .entry-content a:visited {
    	color: #21759b;
    }
    
    .entry-content a:hover {
    	color: #ff9933;
    }

    Worth a try, but no guarantees – as you see, I just experiment without really knowing what I’m doing! Nothing to lose, though. If it doesn’t give you the results you want, just delete and hope a bona fide techie happens by to help out!

    Cheers
    Ross

    Hi Ross,

    I am sorry that my suggestions didnt work in my post (the 3rd one) in this issue.

    Actually my code will likely work for links in pages, even on your site. However since you didnt mention which links you wanted changed, I didnt provide the css for the links you are interested in.

    Also, I suggested that you use a child theme because you did not mention you were using one.

    I could have been more helpful if I had had more information.

    As for you being sure and not having to experiment with what css you need, I am not sure if you are using Firebug to help you with that?

    Thread Starter RossB

    (@rossb)

    Hi wpfan 1000. I did mention I was using a child theme – right at the very top of my post next to “theme:”. 🙂

    I also specified the links I wanted changed: ” I only want to change the color of hyperlinks text within a page, without automatically also changing the color of the header text or page title.” I’m not sure how I could have been clearer, but am often lacking knowledge of terminology. Maybe you could tell me how I should have expressed myself, for future reference. I do often fear I am not being clear.

    Yes, I know about Firebug, but thanks. I use it, but need to do some tutes on getting the most out of it.

    You code didn’t affect the hyperlink colors on any part of my site. I’m not sure why. As mentioned, coding suggestions from others re changing hyperlink colors didn’t work, either. Anyway, no problem – got it sorted now. But thanks for making the effort to respond.

    Cheers
    Ross

    Hi Ross,

    You did mention it was a child theme as you say. I don’t know how I missed that.

    You also did mention which links. Sorry about that.

    Well I am glad you got your issue sorted out.

    Thread Starter RossB

    (@rossb)

    No worries, wpfan 1000. And again, appreciate your contribution. Your coding doubtless does work – I suspect I’ve modded my child theme so much that my current coding sometimes negates new coding. But maybe it doesn’t work like that! I have much to learn.

    Cheers
    Ross

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Twenty Twelve: how to change hyperlink color on pages’ is closed to new replies.