Most developers do not need this tutorial but just in case you are not a developer, maybe just a guy who bought a WordPress theme from ThemeForest of Template Monster and is having serious problems switching colors around then this will seriously help you. You of course have to have Google Chrome installed on your computer to be able to use this tutorial at all.
Some theme developers generally get lazy, it’s not common but it happens. You buy a theme that comes in blue and you don’t find any options in your WordPress back end to change that blue to whatever color your heart desires (For the sake of time we will be using WordPress themes example). So what happens now? Do you resign to haven wasted your money on the wrong theme or do you like the theme enough to edit that beauty. We are going to teach you how to use Google Chrome to edit your website CSS quickly. Maybe it’s colors you want to change or the sidebar width or some spacing problems or whatever. We got your back. Follow our step by step tutorial below:
Step 1– Open your website/webpage you want to edit with Google chrome
Step 2– Right click the element you want to edit and select “Inspect element” (Could be the search box on sidebar for example)
Step 3– When the Chrome developer box comes up you will see the HTML for the element you just clicked on the left and the CSS on the right. I imagine it is the CSS we are trying to edit here. So what you want to do is copy the CSS for that single element and paste it in your custom CSS box on your WordPress back end (Most if not all WordPress themes have this). In a case where you are not using WordPress, the location of the CSS file that contains the element you are trying to edit is usually stated in the same right hand CSS box at the very top. All you have to do is go into your website folder in your Cpanel and open up this CSS file.
Step 4– Now that we have copied/opened up the CSS we want to edit, we can now get into it. For this to really serve you, you will need a basic knowledge of CSS styles of course. Let’s say the element you wanted to edit was your “post comment” button for example after you have located the CSS, you have decided you want to change the color from blue to red; all that is left to do is locate the part of the CSS that has that color (most likely the .background-color: #color; part). After you have located this, you simply need to replace the color code with whatever color you please.
In any case if the issue you are trying to solve has to do with increasing or reducing sizes it’s the exact same process except what you would then be looking for will be sizes which are marked in px (pixels). Might be a margin you need to edit or a couple of margins whatever the case please keep in mind this tutorial was not intended to teach you CSS rather it was made for people who have a basic knowledge of CSS and want to get edits done a lot faster with the help of Chrome developer tools.
You have to know about CSS to actually want to fiddle your website’s code, you do not want to end up breaking anything. In case you are experimenting, we strongly advice you back up whatever files you want to fiddle with before proceeding so that you can always go back to the starting point if things go wrong.
If you enjoyed this article please like our Facebook Page or Follow us on Twitter.