So you just want to make a few stylistic changes to your site but don’t know how to do it. Code is not your thing and you’re not comfortable with child themes.
What’s an easy way to make stylesheet customizations in your WordPress theme without resorting to code?
Use Chrome Developer Tools and Jetpack’s Custom CSS plugin. It’s simple.
Developer Tools displays your code and allows you to play with the styles until you see what you want. Copying and pasting that code into Custom CSS customizes your theme’s stylesheet.
Why not Child Themes?
Let’s face it, child themes are a hassle to set up and use, and they force you to use an ftp client to make changes. Worse, child themes don’t always work.
The purpose of child themes is to house customized files, including “style.css” (Cascading Style Sheets) which controls the look and design of your site. The child protects the stylesheet customizations from being overwritten when the theme is updated.
What happens is, the server looks into the child theme for style instructions before going to the parent theme for the inherited styles.
It’s one thing if you are going to customize numerous disparate files, but creating a child theme just to customize style.css is a waste of time.
Custom CSS
Instead, use the Jetpack plugin, Custom CSS, for stylesheet customizations. It’s super handy, and works well, but it only works when you’re connected to WordPress.com.
It places a drawer in Appearances called Edit CSS. That’s where you’re going to paste your code.
The Custom CSS page features links to a beginners tutorial and a themes and templates forum to help you out.
The page also has options for Preprocessor, Mode, Mobile-Compatible and Content Width. Definitely say yes to Mobile.
Since Custom CSS is enabled by Jetpack and WordPress.com, you must stay connected to make your new styles work. If things go all pear shaped, you’ll know the site has cut loose.
Chrome Developer Tools
But not being a programmer and having the most basic knowledge of code, where can a poor blogger find some css code?
I use Chrome Developer Tools. Mostly because I’m joined at the hip to Google, but there are other browsers tools like Firebug for Firefox. They give you a view of the front and back ends of your site.
Once installed, click the menu icon on the top right of the window. Hover down to Tools>Developer Tools and the page splits into two portions, front and back.
Click on Elements and the magnifier icon. Then, hover over the elements you want to inspect and info pops up. This is great for ascertaining the actual size of an image.
Click on the element and see the line of code as well as the style rules. It is these rules you can play with.
If you play right, the changes will appear before your eyes. Refreshing the page loses those changes. None of which affect your site at all.
Here is a page to show you how to use Chrome Developer Tools.
Under Styles, click on the bottom line of the code, before the “}” and a box will pop up. Fill it in with – in this case-“colour”. Hit your tab button, and a box will pop to the right, with a list of colour choices. Choose a colour, tab again and the change should become visible.
You can click on that colour box and a colour wheel pops up. Or, enter the colour number.
So what you’re doing is entering an attribute as well as a value. Look, you’re coding!
Copy and paste that whole snippet, from the period to the bracket and paste it into Custom CSS Stylesheet Editor page, and hit Update Stylesheet.
Boom! You have a customized site, sans child.
Stylesheet Customizations
Now that you have the tools to make stylesheet customizations for your site you are going to want to learn more about Cascading Style Sheets. There are umpteen places to learn about CSS. Just Google it.
When you get good at CSS, before you know it someone is bound to say, “Hey, I like your style.”
Happy customizing!
[teaserbox title=”Learn More!” button=”Subscribe” link=”http://blogsitestudio.com/subscribe-2/” buttonsize=”small, medium, large” buttoncolor=”white, yellow, orange, red, blue, green, gray, black, alternative-1, alternative-2, alternative-3″ target=”_blank or _self”]
To get regular tips on using WordPress, please subscribe to Blogsite Studio and you’ll get my free ebook, Create a WordPress Website. Such a deal![/teaserbox]