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.

2 thoughts on “CSS Modification #sidebar”

  1. Thanks for supplying feedback to me, Joseph. Here is mine, to you.

    Everything is there. Everything such as galleries, social media and deep customisation is clearly identified and displayed on both your main content and sidebar areas. Skill and understanding is clearly explained and displayed.

    Your gallery images are overflowing from your blog. A simple flaw like this makes your blog look unfinished and buggy. A simple adjustment to the width of your wrapper will sort the problem out.

    The titles of your sidebars look like CSS code, so it would be great if they were labeled to be identified easily.

    One last thing, the text of your content looks very similar to your post meta (category, date etc). Although I know the difference between content and meta, the similarity between the look of the two increases a sense of repetition as I experience your blog and explore your content. You could add a bottom border to your post meta to separate the content from the post title and such. Just an idea.

  2. Pingback: Minor changes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s