CSS Modification #sidebar

The sidebar can be consider as important as the post body of a blog. The sidebar holds important information, internal or external links. It is the opposite of the post area while holding some of it’s features. The post area is dynamic, meaning that the information is constantly flowing, in comparison with the more static use of the sidebar. The sidebar area is used to keep some information static while serves as a feed for certain other applications.

At the moment I am using this area for both types of information. I will keep some important links to other pages that showcase my work, a twitter feed and links to other peoples websites. In the future, depending on the use of this blog, I might need archiving widgets, in order to make access of information easier, as it will be more than today. I explain more about the widgets I am using, on this post.

Starting with dimension and font. I increased the width as I had already increased the #wrapper width. The font order was changed. Helvetica is first. The line-height, which is the gap between lines of text was decreased from 160% to 125%. I added a border to the right of the sidebar with a fixed width of 8 pixels and colour of #f1f1f1 to blend with other borders. At the end bottom end of this border I added a radius of 18 pixels, and a border at the bottom of 1 pixel and the same colour. The two borders blend and create a nice rounded corner. I need to add the browser-specific radii properties for the just to be sure it’s compatible.

As I described in a previous post about the functions of this theme, apart from changing the specific symbol of this function, I changed its CSS property. Margin (left) had a value of -15 pixels which made the symbols float between the body and the sidebar. By setting this to -4 pixels it’s aligned with the rest elements of the sidebar.

For the sidebar’s link styles I changed the tag #sidebar with selectors :hover :focus and :active. The text-decoration was underline and I changed to none and the colour was #000, which I changed to #1c9bdc.
This way the links will be visible on hover by changing colour instead of underline.

Advertisements

CSS Modification #navigation

On this theme the navigation bar is located on a separate tag than header. As I changed fonts throughout the blog, I decided to change the #nav ul tag from Charcoal, to Helvetica and as a second option Arial. Next on the #nav li a:visited I set the text-decoration to none because underlined links impact on the minimal design I try to preserve.
Finally, I did one more change on the #nav li a:hover, #nav .current_page_item a tags. Swapped underline with none and give it some colour when hovering, the #1c9bdc.

CSS Modification .tags

I made some changes to the .tags class. Tags are displayed at the bottom of each post, which I will keep as is. The styling didn’t involve much because everything is inherited from other div tags, which I intend to alter as it’s confusing. In every post’s categories, timestamp, tags and body there is the same styling in the font. For start I changed the tags. The border-top property became a double 3 pixel line instead of a 1px solid. I kept the colour #dadada the same. I added the property font-variant which game that different look I wanted when compared to the main body. This property messes with the case of the font. I chose small-caps which converts all letters into capitals but smaller than the first of each word.

I needed though to make visible that every tag is a link (when you click on the tag it takes you to a search result with posts of the same tag). When I added colour to the class .tag , every letter of the area became coloured. In order to make only the links coloured I had to add a new class applicable to the .tags class only. The way is by setting a new class and an anchor pseudo-class after that class.
Like this .tags a:link. This new class will be effective only into the links of the specified class. I added the properties color and font-variant in order to achieve the desired look.

before

screenshot of the tags area under the post

after
tags area screenshot with all letters in colour

final
tags area screenshot 3

Although it looks good it is not finished yet. After you have clicked on the link the colour changes back to the inherited. This means I will have to add more selectors like the :visited and the :active.