Advanced Style Customization with CSS
FaveBusiness makes it easy to customize styles with CSS. For those new to CSS and WordPress theming, we’ve put together a few pointers below.
Before you get started, we recommend creating your own child theme (see note on child themes). A child theme will let you put all of your customizations inside their own file, making it easy to upgrade FaveBusiness without losing your custom styles.
You can easily create your own child theme by copying the
carrington-business-green folder and re-naming it. Open up style.css in your copied folder, and customize! You might want to start by giving your theme a new name in the comment at the top of the file.
Since the FaveBusiness styles are automatically loaded when running your child theme, making small changes to the design is easy — just find the element you want and add your overriding styles.
When customizing CSS, it can be hard to find out how to target the element you want, or figure out what styles are getting applied to it. “View Source” will only get you so far. Enter Firebug, a free plugin for the Firefox browser. Firebug helps you see what’s going on in a website’s code. When creating your own child theme customizations, we highly recommend using it. Here’s a quick getting started guide:
- Download Firefox and install Firebug.
- Right-click on the element you want to style. Click “Inspect Element”.
- A pane will appear. On the left side, under the HTML tab, you can see the page structure displayed as a tree. On the right side, under the Style tab, you will see the selector for your element, as well as all of the styles that are getting applied to it.
- You can experiment with style changes by modifying the properties in the right-hand pane. Beware, though — these changes won’t be saved: you’ll have to write them out yourself in your child theme’s style.css file!