Confused, Frustrated and a Revamped Rainbow Journal

More than a year ago we acquired the rainbowjournal.com domain, started writing articles last May and finally launched rainbow journal after almost three months. Until that time my knowledge of Photoshop is next to nothing, and CSS is all Greek to me; so designing rainbow journal’s header (of great import as it serves as the websites identity) using Photoshop felt like a Herculean task.

This overhaul would be the third incarnation of rainbow journal (check -and please like- my facebook page for the photos) since it went active last July. The main difference of the current design, from the last two, is planning. A simpler, smaller header and eye-friendly pastel colors this time. The main menu and social icons are moved to the sidebar for easier navigation and less clutter.

As my blog is supposed to be my online journal, I used a free, “handwriting” font courtesy of google web fonts for the article titles. The same font is adopted for the main menu as well as the sidebar widget’s titles; icons are also incorporated to make things more fun.

Creating a template in Photoshop made migrating the design into wordpress less taxing, but it wasn’t all peachy either… Given my Lilliputian familiarity with CSS and its codes, the realization of my Photoshop design still had me forehead-wrinkling, eyebrow-raising, blank-staring, stress-eating (haha!) in confusion and frustration.

Here are some of the CSS codes I used in customizing the main menu…

#navigation {display: none;}
#menu-main, #menu-main li {margin: 0; padding: 0 !important;}
#menu-main li {list-style: none;}
#menu-main li a {display: block; font-size: 24px; font-family: cedarville cursive; background-color: #fbbbbb; padding: 5px 5px 5px 50px; margin-bottom: 5px; -webkit-
border-radius: 3px; border-radius: 3px; line-height: 1.5em; text-transform: none; text-shadow: 1px 2px 2px #bdbdbd;
filter: dropshadow(color=#bdbdbd, offx=1, offy=2);}
#menu-main li.menu-item-41 a {background: transparent url(https://rainbowjournal.com/wp-content/uploads/2012/09/home_03.png) no-repeat 5px center;}
#menu-main li.menu-item-41 a {background-color: #fbbbbb;}

Looking at these codes still trigger a throbbing pain in my head and have me reaching for the peanut butter jar for comfort! Hahaha!

Several lines of CSS codes (and a few unwanted pounds) later, rainbow journal’s makeover is complete! I’m positively proud of the work I’ve done; also, those codes are beginning to look less Greek to me. Hahaha! This time I’m satisfied with the simpler, cleaner, more colorful look of my blog (for the time being at least).

You might also like:
Join me on facebook!

Share your thoughts