CSS: Using your Browser Inspector to find the code handles of things that you want to modify / and how to use what you found in the Blogger HTML Editor

Getting to know the Browser Inpector 1	Getting to know the Browser Inpector 2	Getting to know the Blogger HTML editor

(Note: I have changed the upload size of the pictures in the thumbnail gallery above from the standart 1600 pixels, that blogger has, to 1920 pixels wide. So when you right click on the images they will open in a new browser tab where you can actually zoom into their full size, which you may need to do since some of the explanatory text is a bit small - ouch!)

In order to change the attributes of things we first need to be able to find them inside that massive HTML code that Blogger very generously provides. However, unless you are a real coder, or even someone who is an advanced code editor (in which case you will not be reading this anyway), if you do not know what something is called, you really have very little chance of finding it. And the way to find out what that name is we thankfully have the Browser Inspector. All browsers have one, and the way you make it appear is by going to any webpage and right clicking on anything on that page. A dropdown list will appear and towards the bottom of it you will see "inspect" or something very much like that. My browser of choice is Opera, and I have "inspect element". I also looked at Firefox and Edge, in both of them it says only "inspect".

So, simply follow what I am showing you in the pictures above. Right click, the inspector opens, on the top you will have the div class highlighted and below you will see what the CSS handle of the thing inside that div is. And then it is really only a matter of copying that and going to the HtML editor, pasting it in the correct box, and it should take you straight to the thing you want to change.

Except, when it doesn't. I am not sure why this happens, anything that is too long, has too many commas in between is likely to cause a problem, as far as I can tell. No big deal, you simply take a smaller piece and that should work. I have not been able to figure out why sometimes your search gets rejected. But, I have yet to have had a situation where I couldn't get around it. Well, I had one situation where I couldn't find a fontawesome unicode that I could clearly see and copy from the inpsector. But, really, that is the only time that I can think of. Once you find the goody, change its attributes, take a preview, if all looks good save it. And please, always backup the theme you are working on frequently. You never know when you need to go back.

Certain things are pretty straightforward. such as changing font attributes for example, others are a bit more complicated. Almost everything that you will do will be in the Style part of the code, and there is very little chance of disasters happening that are impossible to come back from. My advice is to go to W3Schools > > > to figure out a lot of this stuff - what you need to change, what you can add, what you can take out. But one thing is for sure - this is actually a lot of fun. It is a bit like detective work, or solving a puzzle. And the result, once you find something and fix it is truly gratifying.