Twenty Fifteen: vertical and effective

This post presents all the practical information you need to help you get to grips with Twenty Fifteen (2015), which is now available on Hypotheses. Once the theme has been activated on your blog via the Appearance>Themes menu, you will find most of the configuration options in the Appearance>Customize menu.

A theme for screens of all shapes and sizes

Twenty Fifteen combines the latest technologies in user experience with the “Mobile first” design method (the web designer develops the theme based on its mobile version, which is considered to be the most widely used). Naturally, this means the theme is responsive: it adapts perfectly to all screen sizes.

Example of a blog using Twenty Fifteen displayed on different sized screens.

A vertical header!

Twenty Fifteen focuses on making your content readable. It is different from other themes in that it has no horizontal header. Instead there is a left sidebar containing your menus and widgets as well as your blog’s name and subtitle. This makes the top section of the sidebar, displaying your blog’s name and subtitle, the de facto header, even though it is not situated at the top of the page …

You will notice that when you scroll down to the bottom of the content on your blog, the sidebar will also scroll down until you reach the bottom of the sidebar. It will then remain static even if you scroll further down on the main part of the blog.

Two menus to customize

Once you have created your navigation menu you place it in the sidebar. It is therefore positioned vertical to your blog. To find out how to create a menu using WordPress, please see the video in this post (in French) on the Maison des Carnets.

In Twenty Fifteen it is also possible to add a description to the items in your menu. To do this, go to Appearance>Menus and click on the “Screen Options” tab in the top right of your screen. Click the “Description” box. Close this menu by clicking on “Screen Options” again. Now, when you display the details of any menu item (by clicking on the small arrow to the right of the rectangle showing the menu item), you will see a “Description” field. Whatever you write will be displayed underneath the item in the menu.

menus item description 2015
Example of a menu in which some items contain descriptions.

Underneath this menu you can also add a second menu for social media. To do this, just create a menu containing nothing but links to the social networks of your choice. You then need to place this menu in the “Social Links Menu” space. There’s no need to configure the icons in this menu: they will be displayed automatically because you have inserted links to your chosen social networks.

Social Links Menu 2015
Example of a menu made up of links to social networks.

Automatic icon display is only available for the following web services:

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Email (mailto: links)
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Path
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • RSS Feed (URLs + /feed/)
  • Spotify
  • Skype
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Paint it black … or yellow

On Twenty Fifteen, you can select one of six colour schemes by going to the Appearance>Customize>Colors menu. You can then adjust these colour schemes. You can change the colour of the following:

  • The background (i.e. the main zone of your blog)
  • The text in the left sidebar (including the name and subtitle of your blog)
  • The header background and sidebar background (the header is the space at the top of the left column displaying your blog’s name and subtitle)
Example of the different colour combinations available on Twenty Fifteen.

You can also choose a header image (which will be the background image in the left sidebar) and a background image (which will be the background image in the main zone of the blog). To do this, go to the Appearance>Customize> Header Image / Background Image menus.

Please bear in mind that the images you choose must meet two criteria. First of all, their format (this is especially true in the relatively narrow left sidebar). It is therefore important to opt for portrait images to achieve the best visual results. The left sidebar is 248 pixels wide, while the main zone is 660 pixels wide. To ensure that your content remains legible, you should also try to use images in sober colours and make sure that they do not clash with the text colour. Lastly, remember to include credit information for the images you use (licence, specific user rights, author and, where applicable, a link to the original image). This information can be displayed on your blog’s “Credits” page, for example.

Header and background images 2015
Example of header and background images.

Optimize your featured images

As with many other themes, Twenty Fifteen allows you to use featured images in your posts (one featured image per post). To do this, add the image you have selected by going to the “Featured Image” section at the bottom right of the page where you edit a post. To make sure your featured images are displayed properly, choose images with the following dimensions (or close to these dimensions): 825 pixels wide x 510 pixels high.

Don’t forget to include the credit information for your featured image.

To find out more

On the Internet you can find a wide array of tutorials about the different aspects of Twenty Fifteen. Here are a few:

Featured image: Wall Street by Michael Aston (licence: Creative Commons by-nc)

This post is a translation of this one by Helen Tomlinson.

See you soon on Hypotheses!

Michel Tamarin

Chargé de projet web

More Posts - Website

Follow Me:
TwitterLinkedInGoogle PlusYouTube