Basic CSS codes for your Blogger/site

Last updated Blog:

Click the dropdown menu to go to the part of the page you need. Can't find what you're looking for? Click here to see all of the coding you can try.

Skip to the part you need:

Where is the CSS box CSS box not displaying codes malfunction How to find the CSS name How to change the text of something CSS Change 'Showing posts with the label' text CSS Hide an item CSS Delete an item CSS Change colour of an item CSS How to centre align all widgets CSS How to put a border around your posts Text close to the edge solution Content goes off the page solution How to use !important How to curve corners

Where is the CSS box

Head to Theme, select the dropdown menu, and scroll, somewhere on that menu there will be an option saying CSS. Those 3 lines are your menu bar. 

CSS box not displaying codes malfunction

Head to your main HTML editor and search for ]]></b:skin>

You will see and be able to edit your codes above that code

Editing your HTML will look something like this:

How to find an item's name CSS

So, to edit an item we first need to find what item you need to edit. To do this, you right click on what you want to know, and press inspect. 

You should see loads of items starting with a fullstop or spam, hover your mouse over all of them, the right name should be around the top, you will know it is the right one as it will highlight your item and a name will pop up on it. The real Item name could be the name displayed next to your item, or it could be a name displayed on your inspection menu. 

For example, above shows h1 next to the item, that could be the name, however, so could .widget .Header h1 all of that.

Sometimes when you test edits on the inspection menu, it works, yet when you try it in your CSS box and apply it to your blog, it doesn't. So it is best to play around to find out which name works. 

How to change the text of something CSS

It is easy to change the name of a widget, but how about changing the name or writing of anything?  To start, you need to find out the item's name, as I described above.

Once you have the item's name, simply add the following code into your CSS box:

.name-of-item {visibility: hidden;}

.name-of-item :before {     visibility: visible;     content: "YOUR TEXT HERE";     color: #000000; }

You'll have to change what I have highlighted with your own item/text.

Change 'Showing posts with the label' text CSS

One particular text that I struggled changing was the 'Showing posts with the label' text.

The way you can change that text, is by writing the following in your CSS box (you may have to see what your CSS item is called, you can learn how to do that by visiting this part of the page):

.post-filter-message { background-color: #999793 } .post-filter-message .message-container {visibility: hidden;} span.search-label {visibility: visible;}  .post-filter-message .message-container:before {     visibility: visible;     content: "YOUR TEXT HERE";     color: #000000; }

You'll have to change what I have highlighted with your own text.

How to hide an item CSS

Please keep in mind that hiding still keeps the space there, there will be a blank space where the item use to be.

So now you have a rough idea what the name is, enter that name in your CSS box, next to that name, you need to enter the following code:

{visibility: hidden;} 

Your code should look something like this 

.Navmenu {visibility: hidden;}

How to delete an item CSS

Deleting an item is different than hiding it, the space will be completely gone. Again, as you have a rough idea of what the name is, enter this code after the name. 

{display: none;}

How to change the color of an item CSS

With the name as always, next to the name, enter this code  {background-color: } and here comes the tricky part, the computer needs to know what the colour is, so to find this out, you need to right click on a colour on your website, inspect, and you should see colour wheels. Click that and choose a colour. It should say something like #383633, put that number next to your code, your code should look something like this:

 {background-color: #383633;}

Remember to put a ; symbol after the number!

How to centre align your blog's widgets CSS

Simply add this code to your CSS box (you may have to see what your CSS item is called, you can learn how to do that by visiting this part of the page):

.widget  { text-align: center; }

How to put a border around your posts

I found this information out at W3schools. This won't look right if you have outlined your posts. This will also squash your content inside the post by how much px you choose.

First, find out what the name of your post is by following these steps.

Once you've found the name of your posts, enter that into your CSS box and add the following code:

{border: 5px solid black;}

Replace the writing in bold to the thickness you want your border to have and colour you want your border to be.

Your code should look something like this:

.post {border: 5px solid red;}

Text close to the edge solution

I found this information out at W3schools.

If your page makes the text right on the edge, if you have a background and can see that it's close to the edge, you may want a little bit of space around your text. 

Bare in mind that this could cover your post's content so it's important to play around and find out what works for you, first write your post's CSS name, you can find out how to do that here. 

You can achieve this by adding the following code to your CSS box, my posts name that could be the same as yours is .post with the name of yours, paste the following code beside it:

{outline-style: solid; outline-color: white; outline-width: 50px;} 

You can change the colour of your outline in bold to the colour of your posts and change the size in bold to fit your needs.

Content goes off the page solution 

If you find that content is going off the page, find the CSS name, you can find out how to do that here. Then head to the CSS part of your blog, and paste the following beside the CSS name:

{max-width: 100%;}

If you find it is your text/images going off the page, highlight all of it and press this button, bare in mind that it may make your links not work:

How to use !Important

If a CSS isn't changing, you can use !important which may help it work. You can use it in your CSS as follows:

{background-color: black !important;}

How to curve corners 

To curve corners is a simple CSS. Simply include the following:

{border-radius: 25px;}

Change the number in bold to how much you want it curved, bare in mind it will cover content. 

Conclusion

Don't forget to save your edits! 

I recommend visiting HTML and CSS codes for your Blogger next. 

I do hope you've found something useful from this page. Leave me a comment below if something isn't working right! Thank you!