Notice the nice looking H2 & H3 heading tags on WPOutcast’s blog posts and pages? Do you want to do the same thing with your blog to give your site a little more eye candy? Just by adding some simple lines of code into your style.css file, you can accomplish this. This design change is for all WordPress Frameworks, the Genesis Framwork, and most of all, the code works on any type of WordPress blog.
This design change for your “H” tags is a minor change compared to altering the theme layout but it does break up a blog post and page from the boring text size’s when using any “H” tag. The colors are easily customizable in this line of code.
If you use the code below, please consider mentioning WPoutcast as I took the time to write this tutorial.
Follow The Steps In Order to Change Heading Tags
- Make a full backup of your blog either through your web host or through one of these WordPress backup plugins. It’s important that you backup your blog every 24 hours. A plugin can do this or, depending on your web host, this is done automatically for you. My web host CloudWays, does this for me automatically.
- Navigate to “Appearance” in your admin dashboard and select “editor“. You should now be on your theme’s files page. Example end result is pictured below.
You should already be on your “style.css” theme file. If not, click on it and let’s get to the next section
The Next Steps Are Important!
Right click on the folder image below, click “save as” and save it to a location on your desktop where you can find it in a minute or less. This is the folder you will see on the left-hand side of the demo image further down in this blog post. After you have saved it, upload this image on your WordPress theme “images” folder via. FTP. We then will need to grab that image URL to insert it into a portion of the code below.
It’s time to complete this design change for your blog posts and pages. I’ll explain what exactly to change if you wish to have 2 different colors.
If you are not on your themes “Style.css” theme file still, get back over there now and copy the below code at the very bottom of this theme file. Make it the last code like I did. You can use this code for all the “H” heading tags. I am just using this code for the 2 tags I mentioned in the title of this post.
.entry-content h3{
margin-bottom: 20px;
background-color: #80bfff;
color: #FFF;
padding: 0px 10px 0px 0px;
}
.entry-content h3:before {
padding: 24px 27px;
display: inline-block;
margin: 0px 10px -11px 0px;
}
.entry-content h3:before {
content: "";
background: #ef5d6e url("https://www.wpoutcast.com/wp-content/uploads/note.png") no-repeat scroll center center;
}
Using the folder image, you need to copy the image URL into the code above. Do not remove any of the ” characters in the code, put the URL in between them. Save your “style.css” file, clear your cache, and all your “H3” heading tags will be looking like WPOutcast’s.
Add another “H” tag to have this same design look by doing the same thing as above. Copy the same code right under the previous code you just copied. Another example is my other tag; I placed this code under the one above and changed the text “H3” to “H2“. You have to manually edit the “h3” characters 3 times in the code then save it.
.entry-content h2{
margin-bottom: 20px;
background-color: #80bfff;
color: #FFF;
padding: 0px 10px 0px 0px;
}
.entry-content h2:before {
padding: 24px 27px;
display: inline-block;
margin: 0px 10px -11px 0px;
}
.entry-content h2:before {
content: "";
background: #ef5d6e url("https://www.wpoutcast.com/wp-content/uploads/note.png") no-repeat scroll center center;
}
You should clear your cache after saving your changes. For Cloudflare customers, this can be done in a matter of seconds using their tutorial for the instructions. Most of us have caching plugins installed such as WordFence Security which is our recommended top security plugin.
Customize The Heading Tags
Do not like the red or blue colors I have used? It’s easy to change them. You just need to insert a new color code into the codes. I used a cool website for helping in finding my perfect Color Code combination used in my code.
The color code in the code below will change the color background of the folder icon to “red”. Just replace this color code below with your own.
#80bfff
The color code below changes the background color behind your “H” text to blue.
#0085da
You might have to clear your cache again to see the new colors.
Alternative Look
Like the current design of WPOutcast’s H3 & H2 tag’s? We use Font awesome icons so you just need to copy and paste the code below and change the number which creates the graphical image.
Make sure you have Font Awesome code in your functions.php file. Use can put this code in there.
//* Add Font Awesome Support
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}Add this code to the bottom of your styles.css file. (I used a different icon that reminds you of Facebook)
.entry-content h3:before{content:"f0a4";color:#0092cc;font-family:fontawesome;padding:20px 0;display:inline-block;margin:0 10px -11px}Replace the f0a4 with a code from the Font awesome website. You might have to tweak the css code as that’s the code that works for this blog.
Genesis Framework Exclusive
Interested in more tweaks for your theme? If your blog is running off the Genesis Framework, the tips mentioned in the tutorial below will work on your blog. I have not actually tested them on a blog without the framework.
- Suggested Tutorial – 5 Simple Codes To Customize Your Theme After Installation
Do search through this category for other useful tutorials that will certainly help your blog out.
- Must Read on how to customize the Genesis Framework categories
If you have found this tutorial helpful, please consider sharing it online with your followers.
Hi
I was looking for this exact solution to highlight the headings. Thank you very much.