I’ve Got The New Blog Theme Blues

So I finally got bored enough of my old blog design (or “theme” as WordPress is wont to call it) and so I got off my butt to choose a new one. After eleventy billion hours of searching through themes, I finally settled on “Designfolio“. I like the look of it, but there’s one nagging thing that I can’t seem to figure out how to fix. Long-time readers of NTBTWK will know that I loves me some links. But in this particular blog theme, the words that are hyperlinked don’t show up in a different colour, so readers will be unaware that there are links in the posting unless they mouse over them, at which point the hyperlinked word becomes underlined.

blog posting image 1

With my limited (and rusty) knowledge of web designing, I knew that I needed to do something with my Cascading Style Sheet (CSS). I have the Jetpack plug in, which gives me a handy-dandy place where I can add stuff to my CSS. According to the “Edit Stylesheet” page on my admin site:

By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don’t need to copy all your theme’s stylesheet content.

Some Googling lead me to believe that if I added the following to my CSS, it would make links that the reader hasn’t recently visited show up in blue and those that the reader has recently visited show up in purple:

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

But when I added that to my CSS, it made *every* hyperlinked item on the entire blog turn those colours, including the blog posting headers, the post tags, and the stuff in the side bar.

blog posting image 2

For the life of me, I cannot figure out how to make my colour changes only apply to the body of the blog postings, but not anything else. As suggested by my friend Rick, I tried right-clicking on a link the body of my blog posting while in Chrome and selecting “Inspect Element”, but it was at this point that I remembered that I don’t have a clue what I’m doing.

Can someone who actually knows what they are doing tell me how to make my blog do what I want, so I can go back to postings pictures of my cats and frogs?

Comments |5|

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Hiya

    Excellent description of the problem. I don’t remember the syntax off the top of my head; I will look it up tomorrow unless (as I suspect will be the case) others have already provided the solution in detail.

    In CSS you can indicate scope for your changes, so that fx only links within blog posts (not in your header, sidebar, etc) get modified.

    Sorry that that was just a teaser and not a fix. :-/ But at least now you know it’s very fixable. đŸ™‚

    -Jan

    Reply

  • Hey Jan,

    Kalev replied to this on Facebook and provided this suggestion:

    .post a:link {
    color: blue;
    }

    .post a:visited {
    color: purple;
    }

    That seems to work to keep it from turning all the stuff on the sidebar colours, but the post headings and tags are affected by it – I guess they must be part of the “post” class. I guess I just need to now figure out what class (in addition to “post”) the blog post headings and tags are and tell them not to do that? Wish me luck!

    Reply

  • Also, I’m posting all of Kalev’s comments from FB here so that when I need to refer back to them (which I’m sure I will), I’ll be able to find them (otherwise they’ll get lost in the unending black hole that is Facebook):

    Kalev:

    Uh…http://www.nottobetrustedwithknives.com/about-2/overseer-of-deb0rking-and-tsar-of-the-nerdery/

    .post a:link {
    color: blue;
    }

    .post a:visited {
    color: purple;
    }

    Also, I think links by default in that theme are in a different colour from the text, just it’s a dark navy which seems to be effectively indistinguishable from what looks like pure black text. Which is dumb. But hey, I didn’t design the theme.

    And just to explain since I know you love learning, the above CSS says: for all items where class=”post” (turns out all posts on your blog have class “post”), change the hyperlink and visited hyperlink colours. Or, put another way, it limits the changes to hyperlink colours just to items where their class is “post” (as opposed to everywhere on your blog).

    Reply

  • Reply

  • Reply

Legend *) Required fields are marked
**) You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>