An introduction to the sidebar background

Seasonal gives you a sidebar that is customizable with the following options:

  • Using the default image
  • Using your own custom image
  • Using a solid background colour

This setup tutorial will be split into two tutorials:

  • Part 1 Introduction – An introduction to the basics of the custom background and what you can do with it
  • Part 2 Basic Settings – Getting into the actual customization of your sidebar and its options

Below is an example of what your custom sidebar will look like when using a photo:

sidebar bg

Using the WordPress Custom Backgrounds feature, this theme is using it for the sidebar instead of the normal body (page) background. This feature of Seasonal gives you the ability to have different backgrounds for your posts, pages, or you can use the same image across all pages of your site. Again, you can remove the image and opt in for a solid colour background instead. 

Sidebar Width

You also have the option to resize your sidebar, including the automatic adjustment of your main content width as well. The default width of your sidebar is set to 33% of your browser window. This means that your sidebar will self-adjust based on the viewing window size. 

Sidebar Overlay

In addition to sizing your sidebar, you can also change the overlay that covers your sidebar background. This is a layer that sits on top of your photo, which by default is set to 30% opacity (transparency) and has a colour black. Please note that this setting is global so whatever you select, it will be the same on all pages. 

Background Image Size

Although you can use whatever size of photo or graphic you want, determine how big your sidebar width will be, but also take in account monitor sizes (resolutions) that visitors to your site may be using. I would recommend something large enough, but not too large that it adds to the page load times, and something that will not be distorted or look fuzzy as the background image gets bigger.

So what size to use as a guideline?

Make it something around 750×1200 pixels, but it’s also important to make sure your photo is very good quality to begin with. If you notice the image is not as good at the size I recommended, you can redo your image to be larger.

Optimization – Make sure your images are optimized as well so that it helps keep the page load times down. The sidebar image could get quite large, so it’s best to keep the file size down as much as you can. If you use Photoshop and good at optimizing images, go for it. You can also use an online tool like this:

Now you can move on to part two of this tutorial

Change Your Sidebar Background