This theme includes the ability to have a favorite photo inserted into the side column of your web page. For the premium version of Fifty50, you can upload a custom photo for each page, post, and even blog category.

screenshot of custom side column photos that you can use for pages, posts, and categories

Changing the Default Photo

For reference as to the best size for the side column, this will depend on how wide you make the column. Generally, we recommend around 800x1000 pixels.

  1. Go to Appearance > Customize > Side Column Options
  2. The Background Image is going to show your default photo.
  3. You can click the Remove or Change Image buttons depending on what you want to do.
  4. When uploading or changing the image, you can use the Preset setting to position it in the side column for what works best for viewing.
  5. Click the Publish button.

For this feature of Fifty50, we modified the WordPress Background Image to create our side column photo.

screenshot showing the default image used in the side column

We can reposition the image with the Preset setting:

screenshot showing the setting to reposition the background image in our side column.

Change the Side Column Width

We called this theme Fifty50 for a reason—the column can go as wide as 50% and the content will adjust to 50%. You can go as small as 25% and as wide as 50%.

screenshot showing the setting for the side column width
  1. Go to Appearance > Customize > Side Column Options
  2. Look for the Side Column Width setting and move it to the width that you are happy with. Note: The circular arrow at the end is the reset button to go back to 40% as the default setting.
  3. Click the Publish button.

Change the Dark Overlay Transparency Level

This setting lets you change the level of opacity (transparency) for the image overlay. You can drop it down to be completely transparent or dark. The default level is 0.2 (20%) transparency.

screenshot showing the side column overlay transparency setting
  1. Go to Appearance > Customize > Side Column Options
  2. Look for the Side Column Overlay Transparency setting and move it to the width that you are happy with. Note: The circular arrow at the end is the reset button to go back to 0.2 (20%) as the default setting.
  3. Click the Publish button.

Change the Side Column Text Colour

Any text that exists within the side column can have its colour changed. The one exception is the title and site description because these two have their own colour settings in the customizer’s Side Identity tab.

screenshot showing the side column text colour setting
  1. Go to Appearance > Customize > Side Column Options
  2. Look for the Side Column Text Colour setting and use the colour selector to change it to your preference.
  3. Click the Publish button.

Side Photos for Pages and Posts

With Fifty50 Premium, we can beyond just having one image for everything, we can change the image for individual pages and posts.

  1. Open a page (or a post) in the editor
  2. Look for the Side Column Image box in the right column of the editor.
  3. Click the Set a Background Image link and use an image from your media library or upload a new one.
  4. Click the Publish or Update button.

If all goes well, the Side Column Image box will show your custom side column photo.

screenshot showing a page or post side column photo that is going to be applied

You can also click the Remove link if you no longer want the photo, or if you plan to upload a different one. This will be the same for Posts.

Set a Photo for a Category

In addition to pages and posts, you can also have a custom photo for each blog category.

screenshot for setting an image for a blog category
  1. Open a blog category, or create a new one.
  2. Look for the Side Column Background Image setting just below the main category name and description fields.
  3. Click the Set a Background Image button and use an image from your media library or upload a new one.
  4. Click the Add New Category or Update button.

When you have your image is selected, the image box for the category should now display the photo.

screenshot showing the selected image for your blog category.