How to tweak your site using CSS

When choosing a theme for your site, you choose it because you like what it looks like, and it has the functionality that you need to present your site to the world. However, there are always some small things that just doesn’t work like you want it to work. You can change those things by using CSS.

I am definitely not an expert on CSS, but over the years I have learned how to do the basic things, and today I want to share that knowledge with you.

First, what is CSS?

Cascading Style Sheets or CSS is used to add style — fonts, colors, spacing — to web documents.

This means, if you know where to find the element that you want to change, you can add CSS to your website and that element will be changed throughout your website.

The website I use to help me with the code I need describes CSS as follows:

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

Source w3schools.com

What kind of elements can you change with CSS?

When you use free themes, you will find that not all elements can be changed using the built-in theme options. With some free themes you can change the basic colors, and with others you have to use the color the designer has used, or you have to buy the pro version to be able to adjust the colors. Sometimes you want to change the font to something else, but you can’t. Or you want to display the links in your text in different colors, but the option is not in your theme.

If you know what an element on your website is called, you can actually change anything you want. Some elements, like links or the body font, are always easy to change, as those are the same on all websites, but when a designer build a website, they might for instance call the navigation bar in their design different from what the next designer calls it. Examples of all these will follow further on in this post.

How do you find what an element is called?

To me this is always the hardest of the process of using CSS. Sometimes it takes trial and error to find those elements.

To find the names of those elements you want to change, go to your WordPress dashboard — Appearance — Customize and then look for Additional CSS on the left. In the right you will see your website. Make sure the element you want to change can be seen on the right, for instance your menu bar.

Now go to the front end of your website. You can do these steps in the customize screen too, but you will then also see the code of the customize screen. On the front end you will see only the code of your website.

On the front end, right click on your menu bar and in the pop-up menu, choose “Inspect” (this is in Chrome — in Firefox it’s called ‘Inspect element, and for other browsers you will have to look what it’s called). A screen opens to the right (at the bottom in Firefox) and the item you have just clicked on will be highlighted. Moving your mouse over the code will highlight the specific item on the right, on your website, and from here you can derive the name of the element you need.

Don’t worry, in the examples below it will become clearer! Let’s first look at some elements that are the same throughout all websites.

Changing the color of links

On some websites the links are not clearly visible, as they either have the same color as the rest of the text and are not underlined, or whatever color they have is too light. Sometimes they are underlined and you don’t want that, but only want them to have a different color.

You can change those as follows:

/* unvisited link */
a:link {
color: teal;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: red;
}

Of course you can change the colors to what fits the colors of your website. By deleting the colors I have above, and starting to type a new color, WordPress automatically ‘suggests’ the available colors.

Changing the font

The default font on Rebel’s Notes was grey-ish and I found it to be a bit too light on the white background, so I changed that to black, using the following CSS:

body {
color: black;
}

The same way you can change the font on different elements. In the above example, I only changed the color of the body, but you can also change the font on other elements, for instance, changing the font size of your headers:

h1 {
font-size: 30px;
}

h2 {
font-size: 20px;
}

Or changing the font size of all your paragraphs, when you find the default font too small:

p {
font-size: 14px;
}

Also, if you ever use tables on your site, you can also change the font size of the table elements (th = table header / td = table data):

th, td {
font-size: 14px;
}

Changing the color of a menu bar

I am using the old Smut Marathon site to demonstrate how to find an element and change it.

These are the steps I took, and for each there’s a photo in the slider below:

1. Right-clicked on the menubar just left of the Home button, and selected ‘Inspect’ in the dropdown menu. Just above the highlighted line in the screen on the right, I noticed the elements ‘main-navbar’ and ‘sticky-nav’
2. Went to my WordPress dashboard where I had ‘Appearance – Customize – Additional CSS’ already open, and added the following text:

.main-navbar {
background-color: purple
}

3. Note how the Home button was still blue? I used the first picture again, and tried a couple of elements, until this worked:

.main-navigation a {
background-color: purple !important;
}

4. That had the desired effect, but now it wasn’t clear which menu item was selected, so I went back to the front end, and right clicked on the home button.
5. Yet again I tried a couple of elements, and found the CSS that worked:

.current_page_item a {
background-color: blueviolet !important;
}

Removing a featured image from a single post

When you write a post, you can add a featured post to the post, which is then displayed on your homepage, or on your blog page. Mostly this same image, sometimes together with others, is added somewhere in your blog post.

Most themes display the featured image at the top of the blog post too, but this is not something we always want. Removing the featured image from your post, means it won’t be displayed on the single post, but then again you don’t have an image for your homepage or blog page. The majority of memes offer the option where you can decide whether you want the featured image on a single page or not. Some themes just don’t have the option, and then you can use CSS to remove the featured image from your single posts.

For this example I have used my test domain, where I test all memes before I start using them.

In the first image below you see a screenshot, where the featured image is above the post title. In the second image I have right clicked on the featured image, and selected ‘inspect’ in the menu. I added the following to the CSS (see image 3):

.post-thumbnail {
display: none;
}

The last image below shows you what it now looks like on the front end. The featured image above the title is gone.

Post scriptum on CSS

On my own website, Rebel’s Notes, I have recently added some CSS to make some minor (major to me) changes, such as centering my logo, centering my menu, hiding my site name but showing the tagline, and putting rounded corners on all images and widgets. The things you can do with CSS is almost limitless.

It’s a great way to tweak your theme so it perfectly fits what you want. I will never tell you that using CSS is easy, especially if like me, you have to learn it all by yourself. I sometimes spend hours before I finally get something to work, and sometimes I just give up. I have thought about doing a CSS training, but feel that’s a bit too much for the number of times I ‘need’ it for my blog.

Remember, you don’t have to do this yourself. You can contact your theme support for help too. Sometimes they are more than willing to give you the code, and if they have a forum, chances are someone else has asked the same question before, and received the code from theme support. However, if your theme support is not great, please get in contact with me and I will try to help you with the code you need.

Happy ‘programming’!

Image from Pixabay