The Vancouver WordPress Meetup on Valentine’s Day was a sweet one, and not just because of the smorgasbord of chocolate treats provided by a full house of attendees.
Morten introduced this meetup as being recorded online using Google+ Hangouts, which deepened the voice levels, but otherwise provided a better record than my iPhone.
Jill Binder, Web Coder Who Speaks Multimedia, gave us a short tutorial in working with CSS (Cascading Style Sheets), the code that controls the look of a WordPress site.
CSS 101
Prior to the advent of CSS or Cascading Style Sheets, all of the attributes on a web page – such as font colors, backgrounds, sizes – were repeated over and over through the document, making for complicated code reading.
Now, each page’s header points to the CSS styles page for instructions on how to make the page look, leaving the rest of the page for content.
If you’ve ever take a peek at your site’s Editor, located in the Appearances drawer, you know that your WordPress site is broken down into numerous pages, most ending with .php. These pages use either the php, HTML, or XHTML languages and can be manipulated to customize your site.
Both Jill and Morten emphasized that customizing your code should only be done at the FTP server level, and not in the Editor found in Appearances. The reason: security, for the same reason plugins should be updated via FTP.
The page that controls the styles is called style.css, and that is what Jill focused on.
Child Themes
Before making changes to your stylesheet, Jill recommends creating a child theme.
A child theme is a copy of your theme that inherits the theme’s styles and functionality. You can make customizations in the child files and they won’t be overwritten when the theme is updated.
The quickest way to create a child theme is by using the One-Click Child Theme plugin.
After you create a child theme, you’ll import the parent theme files that you want to customize. WordPress looks at the child theme files first before referring to commands in the parent theme files.
Here is a good graphic from Buddyboss to illustrate how child themes work.
Jill’s other recommendation is to use Firebug in Firefox to preview your changes before adding them to your style sheet. This can also be done in the tools section of Google Chrome.
She advises that whatever you want to learn how to do in your style.css file, you can google. Somewhere online you will find the proper code to insert.
Coding Style Sheets
Using the Sublime Text Editor, Jill created an example file with a list of rules. She named <div> tags (for division) to create containers, and placed style selectors in a declaration block between { } braces.
When reading the style sheet, it’s important to know the difference between div tags.
Div Id is singular on a page – such as sidebar, footer, header – and the syntax uses the # hash tag, as in “#sidebar.”
Div Class can have as many commands as needed – such as .menu-toggle:active,
.menu-toggle.toggled-on – and is designated by a period, as in “.menu-toggle.”
Between the braces goes the property, which is followed by a colon, a space, the value and measurement (px for pixels). If there are multiple declarations in one block, they are separated by a semicolon.
Here is an example of a Div Class rule:
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
}
There are two ways to put space on a page: Margin and Padding.
Margin is space that goes around a container to separate it from other containers.
Padding adds space within the container, such as around the text.
When adding code rules to a style sheet all you have to do is paste them at the end. In other words, whatever comes last on a CSS overrides a previous, relevant command. That is why it’s called cascading; the styles cascade and culminate at the bottom.
Following Jill’s segment, Robert Dall of 32 Spokes gave a talk about Backgrounds, which is also worth checking out here.
I always learn something new at the Vancouver WordPress Meetups. What surprises me every time is how much I already know. I’m not the biggest designer, and am certainly not a developer, but somehow in the past 3 years I’ve managed to amass enough knowledge of how WordPress and the Web work to be able to keep up with the geeks and ahead of the users around me.
That affirmation alone is well worth the cost of a bag of chocolates.
Vancouver WordPress Meetup has over 1000 members and meets monthly at The Network Hub. They are looking for speakers to present at future meetups and ask for ideas to be submitted here.
I encourage all my WordPress-using clients to join and attend these meetups.
Related articles
Broadcasting and taping a WordPress Meetup with Google+ Hangouts On Air, take 1
