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

 

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

  1. 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?

Comments are closed.