Most useful Custom CSS Code For WordPress

Last updated on June 21st, at 09:33 am

Here are some very useful custom CSS codes for a word press CMS site/ Blog.

No theme is perfect, as every web designer / blogger has his or her own taste.

You may be using a free or a paid theme, you may still want to change the look & feel of the theme. Something like the color of the link, remove the tags, remove the date from the post etc.

I am not a coder, but after blogging for more than a couple of years, I have learned quite a few custom CSS codes, that really helped me to design my site as wanted it to be.

Question! where to write the Custom CSS Code?

Many themes come with the custom CSS option. But likewise, many themes do not have that option. If your theme doesn’t have the custom CSS option, we have a post about the most useful Custom CSS plugin for wordpress. Download and install this plugin.

Check out: How To Create A Sticky Floating Sidebar Widget In WordPress

The latest version of word press 4.9.6 there is an option as Additional CSS under theme customization. You can use that.

Here are some of the most useful custom CSS Code

Just add these codes on the Custom CSS plugin / Additional CSS under customization.

1: How to remove the yellow background displayed just before Google AdSense appears. Use this Custom CSS code.

.entry .adsbygoogle {
background: #fff;
}
a {
text-decoration: none;
}

2: Change the font color of post excerpts description. Add this custom CSS code.

.entry { color: #111111; }
.entry.excerpt { color: #111111; }

( you can choose whatever color you want just replace the color code)

3: To remove the post byline that displays author name, published date etc.

.post-byline {
display: none;
}

4: Change the padding gap between your content and sidebar widget.

.sidebar .widget {
padding:30px 10px 20px;
}

( change the padding figures as per your liking, it must be in pixels)

5: Change the Link color in your post:

a:link {
color: #317dbf;

}

6:Change the Post thumbnail size:

.post-thumbnail img {
display:block;
height:auto;
width:80%;
}
a img {
transition:opacity 0.2s ease;
}

img {
border-radius:2px;
}

img {
height:auto;
max-width:80%;
}

7: Remove the post published date from the theme:

.published-date {
display:none;
}

.post-date {
display:none;
}

8: Remove the post tags, that most themes displays and there is no option to disable.

.post-tags {
display:none;
}

9: Remove the date from comments: very useful .if you are removing the post published date

#comments .commentlist .comment-meta {
display: none;
}

10: Change the color of site title

.site-title a {
color:#59b6ea;
max-width:100%;
}

11: Change the color of side bar widget description and Link

.widget, .widget a {
color:#000000;
}

12: To change the color of the post container and also the background color:

body {
background-color: white;
}

.container {
background-color: white;
}

I hope these custom CSS codes help. I will update, as and when something needs to be changed, and I learn something. I’m sure many word press blogger will find these custom CSS code very useful

Note: All color codes and sizes mentioned here are my own. You may copy or use your own color codes. 

Ben Jamir

Hello! I am Ben Jamir, Founder, and Author of this blog Tipsnfreeware. I blog about computer tips & tricks, share tested free Software’s, Networking, WordPress tips, SEO tips. If you like my post /Tips then please like and share it with your friends.

tipsnfreeware.com