Adding Custom CSS Through the WordPress Customize Utility

This tip is aimed at club webmasters who already have some skill with web design or have an ambition to learn. The club websites hosted at toastmost.org are meant to be usable by Toastmasters without previous web technology or design skills, but I appreciate that others come to the experience knowing HTML (the language for structuring web pages) and CSS (the language for specifying fonts, font sizes, font colors, and other design parameters).

Part of the WordPress for Toastmasters solution is a theme called Lectern that, in addition to supporting a standard Toastmasters approved logo banner, specifies the fonts and general layout of the website. It has the advantage of adhering closely to WordPress standards, including the flexibility to resize pages when viewed on a mobile device.

WordPress includes a utility called the Customizer (look for the Customize link on the black bar at the top of the screen when you’re logged in as the administrator) that allows you to change basic layout parameters such as the background colors. There is also a utility that allows you to add some custom CSS that will override the defaults set in the theme.

Here is an example of a snippet of code added to change the styling of the club name, as displayed in the website banner.

Adding custom CSS

Making this work understands some understanding of how CSS works, but you can find a million tutorials on the web if this is something you want to learn. In the example above, I’m changing the font-family specification for h1 (the top level headline) within the section (div) of the page with the ID #toastmastersheader.

You can view the default CSS for the current release of Lectern here:

https://toastmost.org/wp-content/themes/lectern/style.css

This entire project is open source, and I would welcome contributions from web developers and designers who would like to collaborate on improving it. Meanwhile, the Customize utility gives you a lot of freedom to tweak the appearance of a site to your own taste.

 

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Comments

comments