Twenty Twelve: how to change hyperlink color on pages
-
URL: http://www.perthpunk.com
Theme: Twenty Twelve childI 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
-
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=1One 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
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!
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
RossThis 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=18I’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.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,
GabrielGabriel, 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:hoverSo, 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
RossHi 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?
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
RossHi 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.
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
- The topic ‘Twenty Twelve: how to change hyperlink color on pages’ is closed to new replies.