
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:
- 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’
- Went to my WordPress dashboard where I had ‘Appearance – Customize – Additional CSS’ already open, and added the following text:
.main-navbar {
background-color: purple
}
- 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;
}
- 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.
- 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
OMG i love this post! I need to find the time to try out some of this coding. I was a computer programmer years ago so this appeals. I understand a little about HTML and do tweak but this post will certainly give me more confidence to try some other bits. Wonderful!
May x
I am so happy you like this. CSS has really helped me a lot to change those small things a theme didn’t include. Enjoy the tweaking xox
I’ve always wondered how to do this. Thanks Marie, this will be most helpful 🙂
Always happy to help, MrsK 🙂
Growing up before computers were a thing (I took, and failed, a typing class in high school where we used type writers. The old kind with the manual slide…) my computer skills are below optimal. If it’s not user friendly I cannot seem to grasp it. I am missing out… My wife is so bad I had to take away her laptop and get her an iPad because she constantly locked it up and had to call me to fix it. Neither of us used computers for work much until the past few years so we had no real need to learn. Regretting that now.
The first time I touched a computer was somewhere in my early 20’s, and ever since I was intrigued by them. The one thing I regret is that I didn’t go into programming, as I think I would’ve greatly enjoyed that. But, they say you are never too old to learn, right? 😉
I would love to learn some coding. I know hke to read very very basic HTML but I’d really like to learn more and some CSS to make changes to my site. Thanks for sharing these tips.
I might do a couple more coding posts, but if there’s something specific you want to know, just let me know 🙂