Minor changes

I made minor changes to the css file as recommended by Christopher Trafford on his comment.  I added colour to the links (with #content a:link) on top of each post, in order to differentiate the categories, time and date from main text of the post. In the future I will either change the font or simply put a background to make the more distinct.

screenshot minor changes css code

To answer his comment, the images pulled from flickr on the sidebar, that seem to overflow are an intentional design decision. The idea is to make it different and “break” the minimalistic but also monotonous design I have done so far.

The category titles are something I want to change as the developer of this theme had styled as code. The main issue for me was that they are embedded in the php code with some functions I am not familiar yet. I tried a few times and I broke the blog. Luckily I had a backup. Also I managed to remove some of these pointed brackets at the navigation element and in the sidebar. When I have more time I will learn the functions and change them. fixed

The bottom border is a good idea to differentiate meta from body, although I have to create a new div tag for meta as it doesn’t exist so far. Lousy developer…

edit: Just found some time to deal with the div id content and gave it a make over. After I added the class .post .date on the CSS code, I added a background, colour #f1f1f1 with a dashed 1 pixel border, pushed the .post .title inwards with padding-left of 7 pixels.

Further down added .entry a:link so I can give some colour when hover the links of the post entry, as well as remove the underline styling from the post.

screenshot of css code

screenshot of css code


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.

Installing Plugins

I started modifying the blog’s main features from the dashboard and downloaded a few plugins in order to make it look like my wordpress.com one. At the moment I am using Automattic’s Akismet for comment and trackback spam and Jetpack for taking advantage of some great features I have been using in wordpress.com hosted blogs. Some of its features I mainly use are the Site Stats, Publicize, Notifications and their Gravatar integration. Also I did search the endless plugins pool and found some handy plugins with social media integration. Located to the top of my sidebar you will find the Social Media Widget where I use to link to my Google+, Flickr and Vimeo pages, where a lot of content I produce leaves. Social Media Widget works by having loads of empty website presets, in groups, awaiting for a link. Once you place a link, you have the option to adjust the resolution of the icon, give it a title, alternative text and other CSS related options.

Right below, Quick Flickr Widget displays the 3 latest photographs in my photostream. It pulls them straight from the RSS feed integrated to every account. So, by coping the feed or just your profile link, setting the number of images and maybe a specific tag to display, it’s ready! Very simple, very easy to setup, had no issues so far.

Finally, the PluginChief Twitter Badge Widget which handles my twitter feed. It has all the necessary options, though it doesn’t sit very nice on this sidebar. This is a chance for me to learn a bit of CSS as I am going to modify it to suit this theme.