Glad you like Pictorico!
You can modify the colour of specific elements by adding some custom CSS.
As Red Deer mentioned, it’s always easier to help with these sorts of specific customizations of we have a link to your site, but generally, here’s what’s needed for the changes you want.
To change the colour of the text within posts and pages – not including meta information like the date:
.entry-content {
color: #fff;
}
To change the link colours:
.entry-content a:link {
color: #0f47a9;
}
.entry-content a:hover, .entry-content a:active {
color: #f15330;
}
Tweak the specific colour codes as you like.
Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
Red Deer Web Design;
Thank you, I didn’t realize no bumping.
My website is Dots on Screen. I’ve actually figured out how to change the color of the text, but am having trouble figuring out how to change the links and add a rollover state. Any help would be great!
Did you try the code I provided above to change the link colours?
Kathryn,
I did try your code and I think it will work for text in the body of my content, but it doesn’t work for the meta, footer, or comment links. Do I need to add separate CSS code for each of those areas?
Do I need to add separate CSS code for each of those areas?
Yes, you do, since the element entry-content only includes the body of posts or pages.
You can use a browser inspector like Firebug or the one built into Chrome to find each of those elements, and then add it to the CSS I gave you above, with each statement separated by a comma.
For example, if you want the links in each post footer (entry-footer) to be the same colours as above, you would use this:
.entry-content a:link, .entry-footer a:link {
color: #0f47a9;
}
.entry-content a:hover, .entry-content a:active, .entry-footer a:hover, .entry-footer a:active {
color: #f15330;
}
Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:
https://dailypost.wordpress.com/2013/07/25/css-selectors/
http://dailypost.wordpress.com/2013/06/21/css-intro/
http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
If CSS is new to you, here are some resources for learning more about it:
Kathryn,
I have a rudimentary understanding of CSS and can usually work my way through the changes I need on my own. However, in this case, I’m having some trouble. For example, I’ve now added the following code to my custom CSS file;
/* Sets page text link color to blue */
.entry-meta a-link, .entry-content a:link, .entry-footer a:link, .comments-area a:link {
color: #07a1f2;
}
/* Sets page text link hover and active color to orange */
.entry-meta a:hover, .entry-meta a:active, .entry-content a:hover, .entry-content a:active, .entry-footer a:hover, .entry-footer a:active, .comments-area a:hover, .comments-area a:active {
color: #ff9933;
}
The above SHOULD turn all text links to a blue color, with an orange highlight when active. However, if you look at an individual page of my site, for example A New Beginning, you’ll see that the meta links are not blue, yet they turn orange when active. Even more confusing, if you look at the footer which contains the text “This entry was posted…” you’ll see that MOST of the links are blue with orange active states, yet the permalink is NOT.
*** EDIT ***
The permalink is blue when I am not logged in to WordPress. If I am logged in to my WordPress dashboard and the “Edit” button is visible, then BOTH the “Edit” and the “Permalink” links are grey, yet turn orange when active. Looking at the source code for the page does not reveal why this would happen for the “Permalink” link.
*** /Edit***
I’m having trouble understanding why some links are properly affected by the custom CSS and why some are ignoring the link state and only using the active state.
There’s a typo in the first line here:
.entry-meta a-link, .entry-content a:link, .entry-footer a:link, .comments-area a:link {
color: #07a1f2;
}
a-link should be a:link – see if fixing that solves the issue!
I’ll look at the permalink issue separately.
Thanks for catching that!
OK, now here’s an odd thing. The links are all blue with orange active states, which is what I wanted, so yay. However, if I am logged in to WordPress (which puts the black editing bar on the top of the page and adds an “Edit” link to the post) then the meta links and the permalink link are NOT blue. I only discovered this because I checked the site in incognito mode and everything looked correct there
Is this a bug in the code?
I think the permalink is grey because that’s the visited link colour, and when you’re on the single post you’ve already visited the permalink:
If you want links to stay blue even after they’ve been visited, you can use this to add the visited states:
.entry-meta a:link, .entry-content a:link, .entry-footer a:link, .comments-area link,.entry-meta a:visited, .entry-content a:visited, .entry-footer a:visited, .comments-area a:visited {
color: #07a1f2;
}
Kathryn,
That worked for the permalink (I should have thought of this, duh!), however the meta links are still grey when I’m logged into WordPress, but blue if I visit in incognito mode. It’s a little weird. I also tried being more specific by adding .entry-format, .posted-on, and .byline to the list to see if that would help. Nothing seems to work on the meta links using the class ids in the code I can see.
On a related note, I have another thread where I’m looking for help rearranging the location of some page elements. Would love some help with that, too, if you can spare some time.
Appreciate any and all help! You’re awesome!
the meta links are still grey when I’m logged into WordPress, but blue if I visit in incognito mode.
Could you please show me a screenshot of which specific links are grey and a link to the page/post it was taken on?
Here’s a guide on how to make a screenshot, if you’re not sure: http://en.support.wordpress.com/make-a-screenshot/
You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Imgur or Snaggy.
Thanks for the screenshot – very helpful. You could try adding a few more visited-link styles for the specific elements within the entry-meta element:
.entry-format a:visited, .posted-on a:visited, .bylinea:visited, .author a:visited {
color: #07a1f2;
}
