Question from Kevin A.: Hi Rick. First of all, I really love your blog. What a wonderful service you’re providing to those of us who struggle with technology!
I have a WordPress blog of my own and the sidebar widgets sort of run together because they all have a white background.
How can I give my own sidebar widgets a light gray background color like the widgets on your blog?
Rick’s answer: Thanks for your kind words about my blog Kevin. They are greatly appreciated!
To answer your question, you can easily give the sidebar widgets on your blog a background color. Just follow the steps below.
Warning: Changing your blog’s theme files can vastly alter your blog’s appearance and/or functionality. If something should go wrong, your blog could even fail to load at all.
Therefore, if you wish to proceed with the steps below I recommend that you do so with extreme caution and with the understanding that you do so at your own risk.
Note 1: If your blog uses a child theme be sure to make the following changes to the child theme’s style.css file instead of the parent theme’s style.css file.
Note 2: I recommend downloading the style.css file to your computer using an FTP program, making a backup copy of the file, editing the original file and then uploading the edited file to your server via FTP.
With the warning and notes mentioned above in mind, let’s get started…
1 – Make a backup copy of your theme’s style.css file by saving adding -bak to the filename.
2 – Open the original style.css file in Notepad and search for the section that begins with this line:
#sidebar .widget {
3 – Insert a blank line immediately after the line shown above, then copy and paste the following line of text onto the blank line:
background-color: #ecf0f1;
Note 1: If a line like the one above already exists in your stylesheet it will probably have the color code of #fff since your widgets are currently white. If so, simply replace the #fff with #ecf0f1.
Note 2: If you want to give your sidebar widgets a different background color, simply choose one using the handy tool on this page and replace the ecf0f1 in the line mentioned above with the code for your preferred color.
4 – Save the style.css file and then upload it to your server via FTP.
That’s all there is to it Kevin. Your blog’s sidebar widget should now be displayed with the background color of your choice.
Bonus tip #1: While you’re at it, I strongly recommend that you enable Two-Factor Authentication on your blog to prevent hacker from logging into your WordPress Dashboard. This post explains how.
Bonus tip #2: Want to make sure you never miss one of my tips? Click here to join my Rick’s Tech Tips Facebook Group!
Want to ask Rick a tech question? Click here and send it in!
If you found this post useful, would you mind helping me out by sharing it? Just click one of the handy social media sharing buttons below.