The new layout is up!
Finally, after searching thousands of of websites (oh okay, 25 is the rough estimation...), looking for the inspirations to change the design of this one, and gathering those ideas, and putting them into a template that Blogger can understand... it's finally done!
For those of you who notice some similarities of the layout with other website(s), please bear with it and remember:
plagiarism is the sincerest form of flattery :)
The layout has actually been up for a while now. But it's been lacking some basic navigation of the site's functions, that's been fulfilled by the menu, and with it, the header's design now seemed more balanced. And finally putting the 'recent entries' part with the current layout, which make more sense than the standard Blogger's Archive layout, now the layout is in its final form.
The main menu was created using graphics to prevent inconsistencies between browsers and also making it simply better than standard text links :) One of the troubles in making image links was how to make them look good next to each other. Since I wanted to make each image equal in dimensions, something must be done to the text since longer text took more space than the shorter one, and vice versa. For instance, the
links image had the shorter text than the others, so at first, it looked like this:
Notice the space between the text and the down-arrow. When put together with the other images in the menu, this would make the menu odd and inconsistent. So, something had to be done. The ol' Photoshop had a text toolbox that gave many options for the text you're editing. Since we needed to move the text closer to the down-arrow, at first I thought a simple scaling would do:
I set the text scaling to a bigger number, thus moved the text nearer to the down-arrow. But it also made the individual letters more 'fat':
Unfortunately, this made the menu odd with some image had a thin text, while other image had fatter text :( On further probing, I found another option that would suit my need: horizontal tracking. Basically, this option sets the spacing of each letter of the text. Hence, I can move the text closer to the down-arrow, but still maintain the size of each letters. So, I set the option:
And produced the final image that I wanted:
On another note, moving the Bloggers' element from the default location to another custom location was a pain in the ass, because apparently each element could have a setting that could only be set when you're adding the element, but the setting was not included in the HTML layout. For instance, you added an RSS element. When you were adding this, Blogger asked for other information such as the URL of the RSS. But, once done, when checked in the HTML layout, the information was not saved there. Instead, Blogger used other means to save the element additional data. This could prove to be a problem when you want to make another element like that, but customized it to be displayed as you liked. Since it was not made by adding a page element the usual way, no additional data could be added, not even to the HTML layout.
The correct way now, it seems, is to add the page element the usual way, then moving it manually in the HTML layout. Check
here and
here for more information on Blogger's page elements and the HTML layout.
Well, enjoy the new layout. It's far from perfect, and expect it to be continuously modified :) Now, if only I can figure out how to rotate the header image automatically like that other website...
