Thesis 2.0 Guide – Part 5 – CSS Editor – Links Package Options

Part 5 of the Thesis 2.0 guide will continue to cover all the options available to you in the default theme classic. In the previous guide Part 4, we covered all the options found in the Single Element Styles. This guide will cover the options found in the Links package.

If you haven’t read them already you can find the rest of this guide below.

Thesis 2.0 Getting Started Site Options Part 1

Thesis 2.0 Getting Started Part 2 – HTML Editor

Thesis 2.0 Getting Started Part 3 – CSS Editor Overview

Thesis 2.0 Part 4 – CSS Editor – Single Element Styles

You ready?

Let’s begin!

Links CSS Package

The links CSS package is designed to give you control over the selector (a) which is used for creating links like.

<a href="http://sitename.com"></a>

Note – the default theme classics Headline links are controlled via the post box CSS package, you can find it in the additional CSS tab.

If you wish for all your links to be controlled by the Links package you can simple remove the lines that say

.headline a, .byline a:hover, .num_comments { color: $c1; }
.headline a:hover { color: $c2; }

The Links CSS package comes with all the options you need to style your links and they are as follows.

Links

  • Text Color – for selecting the color of your links in general.
  • Text Decoration– Here you can select some decorations for your links. They are as follows.
    • Underline
    • Overline
    • Line through
    • Blink
  • Background Color – if you need to select a specific background color then this is the place to go.
  • Padding – this is to add some space around the link.

As you may or may not know, links also have what we call Pseudo-classes. The Pseudo-class is what allows the link to visually change depending on the actions performed by the user.

Pseudo-classes

The Pseudo-class in HTML format for links look like the following.

selector.class:pseudo-class {property:value;}

For the average web user, your probably thinking WT… does that mean.

To make it simpler, ill add the elements your more familiar with.

a:hover {color:#cc0000;}

This would produce the same hover effect that my menu and titles have.

Luckily for you, Thesis 2.0 does this for you.

All you have to do is configure a couple of options.

Hovered Links

The same options found in the general Links options are also found here, if you wish to differ the color, decoration and background color when someone hovers their cursor over the link then this is where you would configure that.

Note – there is no option for padding, this is because you already configured that in the options above. Pseudo-classes do not require padding to be added because they act on the selector, in this case (a).

This automatically targets the Pseudo-class

a:hover {}

Active Links

The Active Pseudo-class  is used to style the link when you click on it.

The active link Pseudo-class must come after the hover Pseudo class.

Luckily, Thesis 2.0 does this for you, so no need to worry about that.

Again the same options found in Hovered Links can be found here.

Additional CSS

Like all Thesis 2.0 packages, you can add some custom CSS via the additional CSS tab. Just remember to use the correct classes.

This concludes Part 5 of this series.

Proceed toThesis 2.0 Part 6 – CSS Editor – Menu Package Options
Don’t have Thesis check it out here

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

11 comments… add one
  • Campbell Oct 14, 2012, 6:30 pm

    Hey nice articles Matt keep em coming : )

    • Matthew Horne Oct 14, 2012, 7:37 pm

      Always, plenty more to come, making a box though at the moment.

  • jfwagner Oct 14, 2012, 7:39 pm

    You have made Thesis 2.0 a lot clearer for me to understand now. I posted a link on DIYThemes Forum for the users there to be able to read your posts on Thesis 2.o. I think you posts were great and thanks.

    I am working on my new site http://JohnFWagners.mobi now.

    • Matthew Horne Oct 14, 2012, 7:45 pm

      Thank you, it’s always helpful to hear that, my site is based on information for people based on my experience and tools that I use, thesis 2.0 is my main tool, so I write these posts to help others make sense of it as its a very new and unique way of developing. As I learned how to use it on the first day, it is only right for me to write about it for others to make sense of it.

      Regards

      • jfwagner Oct 14, 2012, 10:06 pm

        I would like to see an article on creating fixed social icons on a page. It would be helpful to me. I am not sure if it would require a box or not.

  • Derleit Oct 16, 2012, 4:13 pm

    how I do magazine style home.
    Thank you

  • Derlit Oct 18, 2012, 5:15 pm

    Hi!
    My images are not being redimencionated from the thesis. I used spaces from posts and have been put at skin editor boxes but i dont have any sucess.
    I would wish to keep the thumbnail by side the post how i look to your home page. How can i do it?

    • Matthew Horne Oct 18, 2012, 5:42 pm

      I am using wp-featured images and then floated them left. Aswell as using excerpts to display the text.

  • Derleit Oct 18, 2012, 7:40 pm

    Yes i did, but not have a thumbnail 🙁

    • Matthew Horne Oct 18, 2012, 8:51 pm

      You can add the thumbnails via the post editor, if you select the add featured image link on the right sidebar on the post editor.

Leave a Comment