Category Archives: Themes

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.

responsive_mockup_tam020615
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)
six-couleurs-predefinies-2015
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 hypotheses.org

More Posts - Website

Follow Me:
TwitterLinkedInGoogle Plus

Hueman theme is now available

Update 18/06/2016

Please note that a new version of Hueman is now installed on Hypotheses, meaning that much of the information contained in this post has changed: all the configuration options for this theme can now be found in the “Appearance > Customize” menu on your dashboard. The tutorial shown below is therefore out of date. However, it may still be useful to help you understand Hueman’s different configuration options, which are still available and outlined below.

For full and up-to-date details on Hueman, please visit the official website created by the theme’s developers. However, please note that we have chosen not to include some of the configuration options mentioned on the official site on Hypotheses itself. These options will therefore not be available on your blog.

Continue reading Hueman theme is now available

François Pacaud

Responsable du service blogging scientifique / Head of science blogging department (Cléo/OpenEdition)

More Posts

Follow Me:
TwitterFacebookLinkedInFlickr

Twenty Twelve: simple and effective

As you know, the themes on Hypotheses have changed in 2014. After Twenty Fourteen and Twenty Eleven, here is an overview of how to configure Twenty Twelve. Some blogs have already chosen this theme. As you can see on the blogs Devenir Historien-ne and Ce n’est pas une image juste, Twenty Twelve is a sober and elegant theme, ideal for blogs publishing longer posts.

Continue reading Twenty Twelve: simple and effective

Simply Twenty Eleven

This year, Hypotheses is changing the themes it offers to its bloggers, as you may already know. In this post I will talk you through how to configure one of the platform’s new themes: Twenty Eleven (to configure Twenty Fourteen, please see this post).

Some of our bloggers have already chosen this theme for their blog. Harmonies Colorées and WP+LW=? are two successful examples.

The default Twenty Eleven theme adopts the classic blog format: the main column on the homepage displays the full posts in reverse chronological order. However, one of the distinctive features about this theme is that the widget column is displayed only on the homepage. This column is not visible on a blog post page, leaving as much space as possible for the text itself (see below).

Continue reading Simply Twenty Eleven

Switching to Twenty Fourteen

As Delphine Cavallo explained in the last post on the House of blogs, it’s time to update the appearance of the blogs on Hypotheses. We are now offering you four themes developed by WordPress, and this will make our blogs more stable, aesthetically coherent and flexible in the long term.

These four new themes are in responsive design, which means that the way they are displayed changes depending on the size and type of screen, which is a real advantage, especially when it comes to reading on smartphones and tablets.

Continue reading Switching to Twenty Fourteen