Caturday Art: The Blog Design Edition

I am going to cheat a little bit for today’s Caturday Art post because instead of having my human create some new digital cat art, I am going to explain a little bit about how she did my blog redesign. If you stay calm and keep an open mind, you may find out that lots of it is not as scary as you think!

Because my human isn’t well-versed in things like php code and is not really a web designer, she began with a pre-made theme. It did not take her long to find one she liked. It’s called Modern Blogger Pro:

As you can see, it’s already very pretty. This designer has some very nice, clean designs and I hear she has great support for you (although my human hasn’t used it yet). If you want a pretty WordPress design you might check out her work. Anyway, Modern Blogger Pro is based on the Genesis Framework. What that means is that the creators of Genesis did the heavy php code lifting to make the basic design work on WordPress. Modern Blogger Pro is a “child theme,” which means the Modern Blogger Pro designer added the code and images that made it look so nice, and added additional functionality too.

The two parts of the design that my human worked with were a) the CSS (Cascading Style Sheet) and b) the images. Every blog has a CSS page (often more than one). The main one is almost always called style.css, and you can find the path to it in a Chrome browser by going to the top menu and clicking on View->Developer->View Source. It is generally near the top of the page. It looks like a mess of letters and numbers to non-coders, but there are meaningful bits in there that can easily be changed, like the fonts and colors.

When my human purchased Modern Blogger Pro (combined with the Genesis Framework, they are under $100 together), she got the style.css sheet. One of the first things she did was change the fonts for the titles, headlines and menus. Here are the original fonts:

Although she liked the original fonts for these, she wanted something a little more light-hearted and fun for me. So she browsed through Google Fonts. There are a bunch! And they are all available to use on blogs, if you have access to your style.css. I don’t know how to access or change that file on Blogger, but if you go to the Blogger Template Designer and click on Advanced, you will find a bunch of fonts there. These are the fonts she chose for my blog — as you can see, she stuck with Lato for the body (post) text because she liked it:

One note on picking fonts. It is okay to use cute or fancy or high personality fonts for titles, but it is a bad idea to use them for your whole post (that would be Text Font in the Advanced section of Blogger’s Template Designer). It is exhausting to read a whole paragraph of a fancy font. So those fonts should be kept simple and fairly traditional.

Next, my human changed the colors of the Menu bar and the links. She didn’t feel the magenta color was right for me, and she likes yellows and oranges because they go nicely with my fur and eyes. On websites, the colors are identified by a series of 6 numbers and letters, preceded by a hashtag. White is #ffffff and black is #000000. Red is #FF0000. She wanted to change the colors on the style.css — but she needed to find what the number was for the magenta.

The Chrome browser has a cool function where if you right click over a section of a blog, it opens up a menu that includes “Inspect Element.” Click on that and it shows you the code behind it — and the colors often have a little colored square next to them so you can easily find them in the middle of all the gobblety-gook (yes, much of the code looks like that to my human too!). To find the colors she wanted to use, she either used what was on my old blog design or used a cool web page with an html color picker. When she found what she wanted she opened up the style.css (after saving a version with the original code in case she messed up!) and replaced the color numbers she didn’t want with the ones she did.

To open up the style.css, by the way, my human used a free program called Text Wrangler. She likes it because it’s basic, and the coding is in different colors so it makes it easier to identify what is going on (if you know coding). She just did a find and replace search for the color codes. Text Wrangler is only available for Mac, but I am sure there are Windows text editors out there that do exactly the same thing. Once she made these changes and uploaded the new style.css to my blog, she demo’ed it to make sure the colors worked together and didn’t make any of the menu or button text hard to read. It is easy to do this in WordPress — you just go to Appearance->Themes on the left hand menu in the Dashboard and you can live preview any of the themes that are there without making changes to your blog until you are ready.

You probably want to know about the background images too. These came from a site called Deposit Photos. My human got an “image pack” on special some months ago (thanks, Glogirly for the head’s up on that!), and she used credits to download the black and white cat background and another background that contained the fishbones. She fiddled with them a bit, resizing them for the web and lightening them a bunch when she knew there was going to be text on top of them. She also saved them as .png files instead of .jpgs because graphics look better on the internet saved as pngs.

When she downloaded the Modern Blogger Pro theme, it came with the images you see there, so she just figured out where they were listed on the style.css and made sure the original images and the ones she was replacing were the same size, if they had to be (like the fishbones in the header). Then she uploaded her new images in the same folder as the original ones were and switched out the names on the style.css (and crossed her fingers), and it worked!

While a lot goes into designing the way a blog looks, there are some things like colors and fonts that non-coders can change that aren’t hard (images are little riskier, but still not difficult if you are already used to working with them). And they really do make a difference!
* * *
Having problems with your human or the other cats in your house? As the internet’s “Dear Abby With Claws,” I have answers to many annoying problems in my two award-winning books! Visit my author’s page on Amazon to buy one or both of my awesome Dear Sparkle books!