Time for action—installing and configuring the Scherzo theme
Let’s see what we can do with Scherzo. To install and configure the Scherzo theme, perform the following steps:
- Start by downloading Scherzo and activating it on the Manage Themes options page. Out of the box, this is how the Carborelli’s site now looks on desktop computers:
And here’s how it looks on mobile devices:
The desktop version has quite a lot of white space, and the mobile version has a problem with text wrapping around the images. The issue with the wrapping around the images would have to be solved within a media query, which is outside the scope of this chapter. The white space can be easily fixed by changing the theme options.
- The Header screen lets us upload a header image and change the color of the header font, so let’s do that first.
- The Background screen gives us the option to change the page background, which results in less white space.
What just happened?
We installed Scherzo and made some changes to the theme options to add a custom image and background, and make the site more our own.
The following screenshot shows what the Carborelli’s site looks like after making both of these changes, as seen on an iPad in portrait mode:
You may notice that the theme placed the title text on top of the image. So, when we uploaded the image we’d used with Twenty Eleven, it was impossible to find a font color that was legible on top of the image. So, here we have a darker image with white text. As the image is one of those featured on the home page, I’ve removed that from the content, which cleans up our floats and wrapping.
Have a go hero
Now that you’ve seen a bit of what can be done with Scherzo, try the following:
- Using the Widgets screen, add a widget that only displays on the site’s home page—this is a feature of Scherzo. You might also want to add a widget just for single posts, which could be useful for a related posts widget or an archive listing, for example.
- Try setting Scherzo up as a parent theme and adding your own styling using a child theme. Changes you could make include the fonts, text colors, and possibly the content of the header.
Ari—another clean minimal theme
Ari is another responsive theme with a lot of white space, but it’s unusual in that it uses a columnar layout with a fixed header on the left-hand side. The number of columns varies according to what device you’re viewing it on, which makes for a much more varied look on different devices.