Change link color via CSS

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
User avatar
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany

Re: Need help?

Post by yellowled » Fri Jun 22, 2018 8:52 pm

Kylie99 wrote:
Fri Jun 22, 2018 10:25 am
I want to change the color of my links in my entries to my blog and then I want different link colors for my sidebars, such as my calendar and archives links. For example I want my calendar and archive links in my side bar to be black but my links in my entries to be a dark orange. How would I go about doing this?

And since I am on this. How would I specifically edit each individual side bar item. Such as if I wanted to align all the my archive links to the left but in my calendar side bar I want all the links centered?
Well, this may take a while to explain. I won't be able to explain it all in a forum post, and since I don't know what you already know (you said you edited a template?), I might give too little or too much information. Please ask if you need more.

Styling things in web pages and blogs is done in a language called CSS (Cascading Style Sheets). You may have noticed a file called style.css in the folder of the theme you edited, that's one place to put it. But that will be overwritten if you ever update the theme, so we created a nifty way to put your changes in a separate files called user.css (it has to be called exactly that) in the same directory, and s9y will automagically use it. Since you have to create it, s9y will never delete or overwrite it. Due to the way CSS works, you can overwrite things from styles.css in user.css.

This is how CSS works:

Code: Select all

selector {
    attribute: value;
    anotherAttribute: value;
For example, an attribute can be color (for the foreground color) and it's value can (for instance, but not limited to) be a hexadecimal value like #ffa500 (yup, that's orange). Now, what's a selector? Well, it's basically a way to tell ("select") which element's attribute to apply said values to. For instance, the selector for a link would be a, so to make all links in your blog orange, you would write

Code: Select all

a {
    color: #ffa500;
Other selectors can be classes that are assigned to groups of elements (for example, .serendipity_plugin_categories usually selects the sidebar plugin for the categories) or ids that select one specific elements. (None of this is specific to s9y, by the way; it's just how web sites work – HTML to mark up the contents and CSS to style them.)

As you probably already assume, there's way more to it, but since it's all open standards, it's documented very well. A good starting point is the Mozilla Developer Network, which has docs on HTML and CSS. (I would have provided some starter code, but for that, I would have to be able to access your blog, and for some odd reason, the URL you provided does not seem to work for me …?)

I know this sounds like a lot, and it is, but you don't have to learn everything at once, and we're here to help if you have questions. However, learning HTML and CSS is not something that we can cover in this forum or our docs (since it's not specific to s9y).

amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply