“How do I do a CSS edit?” It’s funny how you hardly ever get asked a question and then it crops up multiple times. First time with a friend that I help out online and then with one of my WordPress coaching students.
So I thought that the question was worthy of a quick answer here so that others can benefit as well.
I just want to call out here, before you read any further that this method is for use when you know what the code is that you need to add/delete or change. If you need help on learning how to do your own css coding then try this free CSS tutorial site. Or for more complex jobs then call in the experts.
The purpose of this tutorial is really to save you cash and time by just showing you how you can do simple little edits when you have been told what code needs changing. Often theme support forums members will give you the code, much as they did in the story below.
What Does CSS mean?
Very briefly CSS or Cascading Style Sheets control how various parts of a website or blog look. So for instance it will control things like:
- Font sizes
- Colour schemes
- Background images
- Page titles
- And many other things…
Why Was a CSS Edit needed in the First Place?
On this occasion the theme in use was an Elegant Themes design and it placed a title link in a position that made it stick out like a ‘blot on the landscape’. So my friend decided that she didn’t want it there and asked in the support forum for the theme, how to get rid of it. The answer was simple . “Add this piece of code to your theme’s CSS file and the ‘title’ will be removed”. The code was provided but she didn’t know where to put it.
Where to find a WordPress Theme’s CSS File
In the back office of WordPress go to Appearance/Editor, and on the right there will be a series of links to the themes files that can be edited. The theme could have more than one CSS file but the main one is usually called something simple like style.css. So click on that to load the style sheet into the editor window.
First Things First – Back UP the File
The next thing is to think “worse case scenario I could mess this up”. So what do you do? You backup the file first.
Do this by just right clicking anywhere in the editor window and choose ‘select all’ and this selects all of the code on the page. Then right click again and choose ‘copy’. Have a plain text editor like Notepad already open with a new file and right click and ‘paste’ the code into it. Now save the file before you do anything else, as this is your lifeline should something go wrong.
Add the CSS Code
OK so the next part is to make the edit. Now as I said above you will, by whatever means already know what the code is that you need to add/delete or change. In this case it was a small piece of code to add to the file. The instruction from the forum was to paste in the line of code to the bottom of the style sheet and save it by clicking ‘Update File’. You can see that in this case it was one line of code needed as highlighted below.
Test the Changes Made
So now to see if that has worked all that’s needed is to fire up a browser and load the site. If it hasn’t worked refresh the page a few times or press ‘F5’. Sometimes the browser cache can still show things as they were before the change. Refreshing a few times should then show the change. If not then something has gone wrong!
If Something goes Wrong
Panic! I’m joking 🙂 If something does go wrong after you’ve added the code into the editor, then all you would need to do, is to delete the content of the ‘editor window’ and paste back in the code that you previously saved in your backup file and then click ‘update file’ at the bottom of the editor window. This gets you back to the position your were in before you did anything with the code. Finally check the site again to make sure that things are back to normal, even if that does include the issue still being in place, which it will.
Don’t give up though, try again. You may have missed one character of the code off when you copied it to paste in. If you’re sure it’s not working go back to who advised you on the code and say it hasn’t worked. It may be that they have another suggestion, usually reliable sources will have.
Job Done and Well Done!
Most of the time these simple little edits can be done really quickly and if you can get over the fear of doing them for yourself then you can save yourself some hard earned cash. You could always install a version of WordPress on a cheap domain or a sub-domain to play on as you learn this sort of thing. It really isn’t rocket science, step out of your comfort zone and do something that scares you every day 🙂
I hope that was useful. Drop me a comment below if you have anything to add.