Styling Your WordPress for Toastmasters Website

When you set up a WordPress for Toastmasters website, you get a site design that fits within Toastmasters branding requirements — but with the freedom to introduce your own flourishes.

For example, here is a version with customizations to the banner image, heading text color and font, and a background image instead of a plain colored background. While you don’t have to go crazy with these options, you should at least know that you do have options.

What’s shown below is the “out of the box” design for a new site set up on the toastmost.org club website hosting service, with banner design choices displayed in the WordPress customizer tool. If you are running an independent website, you can install the Lectern theme to get access to the same options.

Toastmasters banner choices.

Customize is one of the menu options displayed on a black bar at the top of the page when you are logged in as a website administrator.

The Customize menu option

Here are a few of the design changes you can make using the customizer tool.

The basic black banner
Changing the background color
White banner, background and heading text colors matched to the Toastmasters logo.
Changing the font for the headings

If you’re not afraid to mess around with a little code, the Customize tool also allows you to alter the default styles associated with your website by adding CSS code like this.

#toastmastersheader h1.site-title {
	font-size: 50px;
        font-family: "Comic Sans MS", cursive, sans-serif;
}
#toastmastersheader h2.site-description {
	font-size: 40px;
}

Here, we’re using the traditional web-safe fonts, which are commonly present on most computing devices with some fallback choices specified.

It’s possible to pick from a much larger variety of fonts by taking advantage of Google Fonts and similar programs. The Easy Google Fonts plugin is pre-installed on toastmost.org sites, but you have to activate it. In the example below, I’ve used Easy Google Fonts to change my main heading font to Charm.

Google Fonts example

With these techniques, you can give your club website a unique look, while still respecting the boundaries of the Toastmasters International brand manual. What I believe is even more important is the content that goes inside the frame of your website design. Remember to show what makes your club special!

Comments

comments