Two weeks ago I changed my wordpress theme. I created a child theme and made some quick adjustments, but still, there were some things that bothered me and that I needed to tune up. Today I am like 90% happy with the results. This is a difficulty with being a perfectionist ;)
First of all, I made myself a new catqbat logo. It’s based on my old idea of combining a cat and a bat together with the letter Q. Cat because I like cats, its pretty obvious ;) Bat rhymes with cat and together with Q sounds just like my surname. My previous logo was black and orange, but I had to change the colors to match my new theme. This is my final version (at least for now).
I work with Microsoft Expression Design 4 for creating simple vector graphics. One of the key features is its ability to export graphics to xaml format, I used this a lot while I was working on my windows phone / windows 8 apps. The next great thing about the app is that it can import .eps and .ai files. And last but not least: it’s free.
Logo is one thing, but most of the time I spent playing around with my css file. In this blog post I’m going to show you the safe way of changing css attributes of html elements. First of all, you need to create a wordpress child theme. Follow the steps described here or use one of the many available plugins.
We are going to modify style.css file which is placed in child theme’s main directory. And talking about analyzing css… In complex scenarios you need a tool which will help you to understand why particular element (a link, a header) has been rendered with a red color or with a bold font. I’m using Chrome Dev Tools and it has all I need (plus many many more features) to fine tune my theme.
I don’t really like underlines and bolds in text. I prefer highlighting with font size and colors. My theme came up with a css that used text underline with h1-h5 headers. I needed to change this. With chrome dev tools it’s pretty straightforward. Right click on a element, and choose Inspect item.
An additional window will popup in your browser’s window showing all attributes of the element. You can see there’s a text-decoration with value of underline which makes my header look this way.
A cool thing is that you can uncheck the value and show the results immediately in your browser’s window. But there’s more: click on the style.css?ver=4.7.3:396 element and you’ll see the exact entry from your css file that’s responsible for having underline in the header.
This entry comes from theme’s original css. I copied the line and pasted it in my child theme’s empty style.css file:
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {text-decoration: none; font-weight: bold;}
Within child theme you only have to change the values that you want to override, for example there’s no need to put the margin-top attribute. Save your style.css and upload to your child theme’s directory. Reload the page and check the results. Hint: chrome uses some kind of cache mechanism and simple page reloading is sometimes not enough to see the changes you’ve just made. In this case clear browser cache by hitting ctrl + shift + del. What’s funny, Chrome gives me a tip: use Incognito mode next time:
Dear Chrome, no, I wasn’t watching porn ;)
So my header looks now like this:
I followed the same steps for changing typography, the appearance of links and getting rid of rounded corners :) I also istalled Disqus for comments, did some php programming ;) and set up different sidebars for my Get Noticed posts. But this is a topic for another blog entry. Stay tuned ;)
