I know that some of you are probably designers yourselves, or are at least somewhat familiar with CSS and WordPress theme styling. However, I usually work with writers. Many of them love WordPress for hosting either blogs or professional websites, but they often aren’t sure how to make simple CSS and HTML changes to improve their designs or alter a free theme they’d like to customize.

I’m sure there are plenty of bloggers outside of the writing community with the same problem. They use themes out-of-the-box not necessarily because they want to but because they don’t know how to change things. With those WordPress or CSS newbies in mind, let’s take a non-technical look at some quick HTML and CSS tips and tricks a new WordPress user can use to improve their blog design. Note: I’m not a designer — these are meant to be practical tips to help non-coders work around common WordPress design issues on their own. I do not claim that they’re necessarily the best solutions in all cases. If you’d like to share other methods, please do so in the comments.

1. Replace your blog title with a logo

By default, your WordPress theme might include a blog title link in the header, but to customize and brand your site you want to replace it with a logo. Here’s how to do that. First upload your logo image and have the URL / address for the file on-hand. Then go to the WordPress templates editor in your admin panel and find header.php. You might see something like this:

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

That code adds a link to your home page (with the text of your blog title). On my business site, this is what the site name looks like without a logo:

If you want to use a logo image instead, you would remove everything between the <h1> tags and replace it with something like this:

<a href=”YourBlogURL.com”><img src=”WebAddressOfYourLogoGoesHere” alt=”YourBlogTitleGoesHere”/>

That code will add your logo in place of the linked blog title. Here is what my site’s name looks like when making the change:

2. Add margins around images or theme areas.

Is your new logo image all the way at the top of the screen or too far to the left? You can fix that by adding margins around the image. Here’s what your logo might look like without margins or padding:

Let’s look at some inline CSS you can use to adjust the margins / positioning of a specific image. Go back into your header.php file and find the logo code you just added. We’re going to wrap that code in div tags (the new code is bolded below). Here’s what you would get (and yes, I know that purists would prefer to do this in the stylesheet, but I’m sticking to inline here to give non-CSS folks easier control over individual images):

<div style=”margin: 9px 6px 9px 12px”><a href=”YourBlogURL.com”><img src=”WebAddressOfYourLogoGoesHere” alt=”YourBlogTitleGoesHere”/></div>

This adds a 9 pixel margin above the image, 6 pixels to the right, 9 pixels at the bottom, and 12 pixels on the left. You can use any margins that you want to — whatever works for your site’s design. Here’s what mine looks like when adjusted:

Note: If your theme’s stylesheet already moves your logo section away from the template edges, you might not need to do this, but you can still try it to see how it makes the logo move and apply the styling to other images as needed.

3. Change colors.

Sometimes you’ll find WordPress themes you love, but you aren’t quite crazy about the color scheme. Fortunately that’s a very easy fix. Colors are represented by six-digit hex color codes. To change a color, you find the existing code in your stylesheet (style.css for most themes) and you swap it out with the hex code for the color you really want.

Take a look at my business writing blog as an example. I designed this site to be minimalist. As you can see on the live version the background is white. What if I wanted to give the body (the area surrounding the main theme / content area) a dark gray background for some contrast?

First, I would find the body style block in the stylesheet. It looks like this:

body {
background:#ffffff;
font-family: arial;
font-size: 14px;
padding:6px;
}

The #ffffff hex code represents the white background. Next I have to choose my desired shade of gray and find its hex code. I can do that using image editing software or by referring to a hex color chart. I’m going to choose the dark gray with the hex code of #333333. To make my body background gray, I just edit my style.css file and replace #ffffff with #333333. Here is the result:

Pro Business Writing Blog with a Gray Background

4. Change default font sizes.

Some themes have unusually small font sizes by default (I’m always baffled by how many designers think it’s a good idea). It can negatively impact readability. Again, it’s an easy fix. Just find the font size in your stylesheet and increase it. For example, the font size for the main blog content on the blog mentioned earlier is 14 px (you can see that in the body style code above).

I wanted my blog post headlines to be bigger though — 18px. So in my stylesheet I simply went to the area dictating h1 tag font style (h1 tags are your primary headings, like your blog title perhaps). Here is what it shows now:

.post h1 {
font-size: 18px;
color: #ff0033;
padding-bottom: 12px;
padding-top: 12px;
}

Note: The proper section of your stylesheet might be titled differently. For example, it might be called content instead of post, or you might not have post H1 tags — just default H1 tag styles that apply everywhere  on the site.

This is how the blog looks now, with post headings a larger font size than the post body text:

5. Add bullet images.

We all know that it’s important to use lists and bold headings when writing for the Web — it makes the content easier for a reader to visually scan through. But plain old bullet points are boring, and they make your website or blog look incredibly plain. Why not replace them with your own bullet images to either use pictures, shapes, or colors to help draw the readers’ eyes down your page? Here’s an example of the bullet images I use on my business writing blog:

I bring the pink from other areas of my site into my bullet points. You can do that by finding the unordered list (ul) styling in your style.css file and the list item styles for them (li). You would create and upload your image, and then just point your stylesheet to that bullet point file on your server. For example, here’s what mine looks like:

.post ul li {
background: url(images/bullet.gif) no-repeat 0 5px;
padding-left: 15px;
padding-bottom: 12px;
}

That code formats the bullet points for unordered lists (not numbered lists which are “ol” for ordered lists) in my blog posts. However, your stylesheet might format bullets in different areas of your site in different ways, such as your sidebar. If you want to use the same bullet point image for all, you’ll need to edit the list style for each section. I choose to use similar arrows, but gray ones, for my sidebar.

These might seem like very small changes on the surface, but those small design edits add up. You can take any existing theme and truly make it your own (figuratively speaking of course). In about a year I went from knowing nothing about coding to being able to code full css sites from scratch. Now I occasionally design and code my own simple WordPress themes too. Even if this feels foreign to you now, stick with it. We aren’t all cut out to be designers (I’m certainly not!), but we can all learn enough to help us get what we want out of existing designs.