Most useful Custom CSS Code For WordPress

Custom CSS Code

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.

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

Here are some of the most useful custom CSS Code, I was talking about. 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

.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;
}

Hope these custom CSS codes helps. 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.

MORE ARTICLES YOU MIGHT LIKE

 

Ben Jamir is the Founder and Author of Tipsnfreeware. He is a part time Blogger, sharing his experience and giving a Helping hand to Home users. You will find here the best Windows Tips,Tricks and quality Freeware.

2 thoughts on “Most useful Custom CSS Code For WordPress”

  1. Subodh Gupta

    Is there any code to minify CSS, javascript, HTML, and image compression? I am using WP Super Cache plugin. It loads well. But my page load time is showing in page source: 1.44 sec and Pingdom tool result showing 4.71 sec load time + 1.2 Mb page size. Image compression showing (Grade D).

    What should I do?

Leave a Comment

Your email address will not be published. Required fields are marked *