My first experience with blogging and working with bloggers is probably not what you’d expect. Technically I did have a blog, but main gig was a blog designer and developer. I started a web design company when I moved to Chicago that eventually turned into a business that focused solely on WordPress blog design. Why? It was a whole lot more fun and creative than designing corporate websites.
I closed my design business almost two years ago now, but I still love designing and my knowledge of CSS and code has made it easier and cheaper to make tweaks to my blog design when I want to. When it comes to the big stuff, like adding new functions to my site, I rely on my web developer, Rob Sefer. He’s actually the one that coded our BFK blog themes and shopping plugin and if you’re in need of a developer, we couldn’t recommend him more!
But today I wanted to show you guys how to make small tweaks to your design with custom CSS. If all this sounds like gibberish to you, you’re not alone! CSS stands for Cascading Style Sheet and this file (typically your style.css file in WordPress) describes how HTML elements are to be displayed. Think color, font size, font family, alignment, and so much more! Most elements of your blog will have some sort of style applied to them via CSS and if you want to change them, it’s as easy as editing or writing a new style to replace it.
For the purposes of this tutorial and to keep you from drowning in technical lingo, I recommend that when editing your own CSS, you stick to the basics like fonts, colors, sizes and don’t try to make mega changes like creating a sticky navigation bar. It’s not that you can’t do those things with CSS, but sometimes the mobile and tablet versions of your site can be negatively affected when you start making too many changes. Sticking to the basics shouldn’t cause any issues though!
How to Edit Your Blog Design CSS
Install the Simple Custom CSS Plugin
Before we make any changes, I always recommend that you install the Simple Custom CSS plugin, so you can add your new styles here instead of editing your themes core files. The reason for this is that if you mess something up and can’t figure out what you did, you can delete your extra styles rather than trying to find them in the core files. It’s best to just leave those untouched. Another reason for this is because themes occasionally get updated and if you update your theme, any changes you made to your stylesheet will be deleted and replaced with the updated theme files. If you have your styles sitting safely in the Simple Custom CSS plugin, you won’t have to worry! However, with theme updates, you may still find that some things change and you may have to edit your own styles at that point, but they won’t be completely overwritten.
Install Google Chrome
I’m sure other browsers have their own tools that allow you to look at code, but Chrome’s Developer Tools is the industry standard and is what everyone I know uses. So, if you don’t already have the Google Chrome browser set up, install it now.
How to Open Chrome Developer Tools
Once you have Google Chrome installed, look in the righthand corner and you’ll see three small dots. Click on that and navigate down to ‘More Tools’ > ‘Developer Tools’ and click on that. At the bottom or side of your page, you’ll see a new box that opens up with a bunch of code. Good job, you’ve opened your Developer Tools!
How to Use Chrome Developer Tools
To change and element, you’ll want to “inspect” it. At the top lefthand corner of the Developer Tools area, you’ll see a small box with a mouse arrow over it. Click that, when you do, it should turn blue which means you can now inspect any area of your site.
Let’s say you want to change the font size and family of your post titles. Simply, move your mouse over, the post title and when it’s highlighted blue, click on it. Below you’ll see that if you hover slightly over the area it’s showing a style called “h2.entry-title” and if you hover in a little closer, it shows “a”. The “h2.entry-title” refers to the whole post title chunk, while “a” refers to the link only. We’ll want to make the majority of our edits to the “h2.entry-title” style. That way any entry titles that aren’t linked will look the same as the linked ones. If you want your linked post titles to have a different color or font-weight, then you’d apply a new style to the “a”.
Hover over the “h2.entry-title” and click. Now look at the righthand side of Developer Tools, you’re now viewing the styles applied to this style. Since every theme is different, your styles may have different names than mine—style names are not universal! Certain things like “p” (paragraph) and “a” (link) will mean the same across the board, but there can be little differences, so don’t be alarmed if yours isn’t showing the same thing.
Edit Current Styles
To test things out, click on the font size and change it to something big to see the changes in real-time. Don’t worry, these changes are not actually being made to your site, it’s just to allow you to see what they’d look like if you did add those styles!
Let’s say you want to change the font family. You’ll notice here that this style has no set font family. But, if you scroll down a bit, you’ll see that the font-family is actually specified in another style. If you want to change the look and feel of all your headers, you can change the font family here. If you don’t want to change all the headers, just the post title, then you can simply add a new style.
Add New Styles
To add a new style, scroll up or re-inspect the “h2.entry-title” style again. Click on the last element within here and tab until you get to next line. Then type “font-family:”, now hit the tab key and then type in the font family you want to use. You want to open this with a single quotation mark, type in your font, then close it with another single font. You also want to have a back-up font that fills in if someone doesn’t have that specific font on their computer. You can do something as simple as “serif” or “sans-serif”.
It’s important to note that you can’t simply use any font you want. The web doesn’t read all the same fonts that desktops do, so if you have some fancy font you’ve purchased and downloaded to your computer, it might show up that way for you, but if I open your site and don’t have that same font installed, I won’t see it the same way. It’s best to stick to Google web fonts or simple fonts that most people have. I’ll go into web fonts more towards the end of this post.
When a Style Doesn’t Seem to Work
Sometimes you’ll add a new style and notice that nothing happens. This can be frustrating, but there’s nothing wrong. What it typically means is that another style has already been written that’s overwriting that style. For the post titles here, I’ve attempted to change the color, but you’ll see that even though I set the color to grey and the font style to italic, nothing happened—why? It’s because the color and font style are being defined by that link style, “a”. So, inspect the “a” and edit the color and font-style there. Pretty cool, right?
How to Make These Changes Real
It’s fun to play around, but onto the real fun, making these changes go live! Open a new browser tab and log into the backend of your WordPress, and navigate to ‘Appearances’ > ‘Custom CSS’. This is where you’ll add your new styles.
Go back to your developer tools, and highlight your new style. Make sure to include the closing “}” as well. Copy “Command + C” and paste “Command + V” your style into the Simple Custom CSS plugin. Technically, you only need to include the styles you’ve changed or added. But if you leave the whole chunk, that’s fine too. You’ll notice that at the end of each individual style, there’s a semicolon. If you don’t have the semi-colon, the style will not be read and will not show up properly. That’s the frustrating thing about code. Tiny errors like this can cause big problems!
Before you exit the plugin, make sure to hit the “Update Custom CSS” button to save your changes. Once you’ve saved, go to your page and hit refresh to see them live. If you’re not seeing them. They might be cached, so clear your browser history and cache or turn off your caching plugin.
CSS Styles Worth Knowing
There are so many out there, but I wanted to share some of the ones that you will most likely use when editing these basic things. When you type in a style and hit tab, it may start pulling up options as you start typing. Play around with these to see what they do.
- font-family: I explained this in depth above, but this is how you change the actual font family!
- text-transform: You can set this to “none, uppercase or lowercase”. None will display the text exactly as you’ve typed it, uppercase and lowercase will apply those setting to all the text.
- letter-spacing: This allows you to add kerning (space between letters) to your text. This is helpful if you have a narrow, tall font that’s a bit tough to read.
- font-style: You can set this to “normal, italic or underline”
- font-weight: Set the weight of your font by adding this style with “bold, normal” or specific weights like “100, 300, 500, 700, 900” as defined by the font itself.
- text-align: By default, left is normal, but your theme may have it set to something else. You can change the alignment to “left, right or center”
- color: When setting the color, you’ll want to use a hex code, which is a six-digit code of letters and numbers that define a web color. If you’re not sure what hex code to use, try this site. All hex codes start with the pound key (“#”)
How to Use Google Web Fonts
As I mentioned earlier, the internet doesn’t read all fonts, so it’s best to stick to basic fonts that most computers have, or use Google web fonts. These web fonts allow you to use prettier fonts on your website by adding a short bit of code. I recommend selecting no more than 2 web fonts to use on your site and sticking to a basic font when it comes to your body copy. There’s far more body copy that post title text, so having to wait for a web font to load the entirety of your body copy could take longer! It won’t take that long, so if you really want to use one, you totally can, but just wanted to share.
To select a font, click on the “+” next to it and you’ll see at the bottom of the screen that a font has been selected. Once you’ve made your font decisions, click on that bar at the bottom and when it pops up, you’ll see an are called ‘Embed’. Copy that short code and go back to the backend of WordPress.
Before you start tinkering, make sure to make a copy of this header file beforehand just in case!
We want to add this code to our header file, so on the backend of WordPress, navigate to ‘Appearances’ > ‘Editor’ and find the “header.php” file. Note, some themes (like Genesis) may have an area for you to drop header scripts, if so, you can paste the code there and hit save. If not, open the header.php file and search (Command + F) for the closing head tag that looks like “< /head >” without the spaces.
Put your cursor just before that tag and paste your code. Hit update file. Your Google fonts are ready to be used! If you’re not sure how to use them in your styles, refer back to the Google fonts page as it shows you exactly how to type them into your stylesheet so they appear correctly. You can find this just under the ‘Embed’ area and can see it in the screenshot above.
There is also plugin called Easy Google Fonts that you can use, but if you can use less plugins, that’s better! Every extra plugin you add can slow your site down, so I recommend doing it the manual way to avoid another clunky plugin!
That was a long one, but I hope it cleared up some questions you might have had about editing your blog design and hopefully let’s you make some changes of your own! If you have any questions, feel free to leave them below and I’ll do my best to answer!