Look update

This post was originally published in October 2014. However, just a short time after this, my need for a “fresh start” was met by the guys hosting my site going out of business without warning, taking the whole site and all my work down with them – more about this here.


After neglecting the blog for quite a while, I decided to blow the dust away and invest more time and energy in this endeavor. I also came to the conclusion that if I wanted a fresh start, a new look was needed, as well as a redefining of what I want to concentrate on. For the first part, i decided to select a template that had responsive design so that it will look similar on computer screens, tablets and phones.

After changing a few templates that looked promising, I finally settled on Theme in progress‘ Nova lite template, and then started to tweak it to my liking. The theme as it was seemed to waste quite a lot of space on a full HD screen, so I found myself analyzing the code and widening the theme to make better use of the space available. Also, the post area and sidebar width looked a little off, so I tweaked that too. All this meant digging deep in the template’s files, to see what each was doing. I discovered what I needed in the bootstrap files, which at first were a pain to look at. The authors made do without any line breaks, tabs and everything that has to do with readability in order to reduce size (and thus bandwidth) to the maximum. As I needed to be able to read the file to understand it, I added line breaks – maybe even more than it originally had.

Something that I struggled with from the beginning of this blog was first line indent. When I write longer texts, I want readers to see where paragraphs begin and end. Furthermore, I consider this aspect to be more elegant, as is justified text. For the latter there was from the beginning the option to justify html paragraphs, but when I started I knew little about css and styling, so I had to use non-breaking spaces in the text editor of wordpress to get some sort of indentation. This was also impractical because going to the visual tab even by mistake usually removed these spaces and poof! there went half an hour of indentation. Now, however, I am better prepared for the battle: I know some css, I know css can do a lot of things, and I also know google is my friend. So I found a little bit of code that I added to the theme’s stylesheet like this:

p {
margin-left: 0;
text-indent: 5in;
}

This formats all paragraphs as having a first line indent – all over the blog, for new and old posts alike, and can be overridden if necessary by some other styling code stating other indentations in the paragraph description.

Another thing I wanted to add was bullets for unordered lists, since for some bizarre reason the template, which otherwise is excellent, did not seem to address this at all. And since I was there, I went a little overboard and added code for a bunch of different style bullets, different colors and different signs, just in case I’ll need them. The icons themselves are part of FamFamFam Silk Icons, and are free to use – you can see the ones that I chose in the image to the right.

The code added in the theme stylesheet looks like this:
.bullet_red li{
list-style-image:url('http://dorunegru.ro/blog/wp-content/uploads/logo/bullet_red.png');
line-height:1.8em;
margin-left:1.8em !important;
}

To make an unordered list with one of these styles, all I have to do is add a class definition to my ul tag, like this: <ul class="bullet_red">

There are several more things that I needed to do – since some of the posts on this blog will remain both in Romanian and in English, I looked for a simple way to add two columns so that I can put both versions in the same post. What I settled on was a plugin called Column shortcodes, from Codepress, which makes it very easy to add columns to my posts as needed.

Also, some of the specific Romanian characters look wrong thus I need to tweak the fonts to include the proper characters – still in the works.

(Visited 26 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *