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.

The eagerly awaited Hueman theme is finally available! It will replace Magazine Basic on Hypotheses. Hueman has retained most of the features that made its predecessor so successful, but it also offers new ones, which will we outline here.

This post provides an in-depth look at Hueman’s main features and what makes it distinctive. If you would like a full overview of the options available on this new theme (under the Appearance > Theme Options menu on your dashboard), please also take a look at our interactive tutorial. The tutorial goes through the different steps you need to take to configure Hueman. If you would like to use Hueman on your blog, we strongly recommend that you follow this tutorial.

Please note that the Appearance > Theme Options menu is shown in English, regardless of the language that your blog is configured to use.

A special header

In terms of its graphic design, one of the main differences between Hueman and other themes on Hypotheses is its header.

You can display the title and subtitle of your blog in the header, and even a logo or a small image of your choice. Unlike other themes, Hueman does not allow you to insert a customized header at the top of your blog.

The title and subtitle can be entered in the Settings > General menu. The subtitle should be entered in the Slogan field. To insert a logo or small image, go to the Appearance > Theme Options > Header menu. Click on the + button next to the Custom Logo field to select an image file from your library or import a new one from your computer. Remember to save your changes.

The Site Description toggle button in this menu allows to display or hide your blog’s subtitle.

 

You can set the maximum height for the logo/image in your blog’s header using the Header Logo Image Max-height cursor, which is found in the Appearance > Theme Options > Styling menu. The height should be specified in pixels. For your logo to be displayed in high definition, it must be at least double the height of the value you set here.

Featured posts

The fact that Hueman does not have a standard header simplifies it visually and allows you to feature your posts on your homepage.

Featured posts in the slider are one of Hueman’s flagship features and allow you to showcase posts from your blog. The slider automatically shows featured images from your posts. If you use the default width settings on your blog, you can optimize the slider display by using featured images that are at least 720 x 340 pixels in size. If you don’t want to present your posts in this way, featured images with a minimum size of 345 x 163 pixels are fine.

For the featured-post settings, go to Appearance > Theme Options > Blog:

  • You can use the Featured Post Count cursor to decide how many posts to include in the slider. Move the cursor to 0 to disable the slider. Please note that the slider will be displayed only if at least one post in the slider has a featured image.

  • The default settings show the most recent posts in the slider. If you would prefer to feature posts from a particular category, just select the category in question in the Featured Category dropdown menu.

  • Lastly, if you also want posts in the slider to be displayed on the homepage along with all other posts published on your blog, tick the “Include featured posts in content area” box in the Featured Posts section.

Two columns for your posts

Hueman has a feature that was previously available on just two themes on Hypotheses: Magazine Basic and Evolve. Like these themes, Hueman presents excerpts from your posts as thumbnails in two columns, both on the homepage and when you browse through categories.

billets-colonne

You can decide how these posts will be displayed on the homepage and when browsing by category by going to the Appearance > Theme Options > Blog menu:

  • The Excerpt Length cursor first allows you decide how long excerpts can be (i.e. their word count).

  • Please note that setting a maximum word count doesn’t mean you can’t also include a Read More tag. In fact, this tag is very important as it is used by most graphic themes to display excerpts of posts. Hueman does this automatically, but the exception confirms the rule. If one day you decide to change themes and don’t want to have to add the Read More tag to each and every post you have published, remember to add the tag to each new post as you go along to spare yourself this chore in the future.

  • If your post doesn’t have a featured image, a grey image of a camera will be displayed by default in the summary of each post. To avoid this, slide the Thumbnail Placeholder toggle button to Off.

  • The Thumbnail Comment Count toggle button will display the number of comments made about each post on the thumbnails.

  • If you want to use Hueman but don’t want your text split into two columns, you can disable this option and instead have a more classic single-column layout. The featured images will be shown to the left of each post. To do this, slide the Standard Blog List toggle button to On.

 

To ensure that images in your posts are treated as featured images and displayed alongside excerpts of your posts, you need to edit the post in which you wish to include a featured image. (An image simply inserted into a post will not automatically be considered a featured image.) In the bottom right-hand corner you will find a Featured Image section. Click on “Set featured image”. You will be able to choose an image from your library or import a new one. You will then be able to fill in various fields (these are identical to those you fill in when adding a “normal” image to a post). Once you have filled in these fields, simply click “Set featured image” in the bottom right of the window.

To show the images in the slider, make sure the featured images are at least 720 x 340 pixels in size. If you don’t want to show these posts in the slider on the homepage, your featured images should ideally be at least 345 x 163 pixels in size.

Remember that adding featured images to your posts is a good publishing practice in itself, just like adding the Read More tag. We therefore encourage you to get into the habit of doing both these things. This will avoid having to fastidiously add featured images or tags all at once if you move to a new theme that revolves around featured images (like Hueman, for example).

Of course, the fact that you have added a featured image doesn’t mean you can’t include other images elsewhere in your post.

 

Optimal browsing

Hueman has two useful features that allow users to browse through your posts. These features can be configured in the Appearance > Theme Options > Blog menu.

The Single – Related Posts section allows you to specify whether a post displays links to other similar posts on the blog. Choose disable to remove these links. Ticking the “Related by categories” box will authorize links to posts that are in the same category (or categories) as the post the user is currently reading. The “Related by tags” box will authorize links to posts with similar tags. However, please remember that these are random suggestions, regardless of whether they are based on categories or tags.

related-post

The “Single – Post Navigation” box allows readers to browse forwards and backwards between posts (based on the date when the posts were published). This option can be displayed in the primary sidebar or the secondary sidebar, or below each post (“Below content”). You can also disable this option if you prefer.

Navigation entre les billets

Hueman has another useful feature that makes for a simple and enjoyable browsing experience. This is the option of including three separate browser menus where you can arrange your post categories or pages however you wish. You can also include links to external websites and resources.

As with all themes on Hypotheses, the menu settings can be found by going to Appearance > Menus:

If you have already created one or several menus for your blog and are migrating to Hueman, your menus will remain unchanged but you will have to decide where to position them in the Hueman theme:

  1. Choose the menu you want to position by clicking “Select” in the dropdown menu.

  2. Make any necessary changes to the structure and title of the menu – the menu title is only visible to users with editing rights on the blog.

  3. Choose from one of three possible locations for the menu, then click “Save menu”. You can display the same menu in several locations. If you place a menu in a location that already contains a menu, the menu that was already there will be replaced.

  4. You can also manage menu locations by going to the Manage Locations tab.

 

Menus

If you select Topbar, your menu will be located above the header and below the OpenEdition bar. This menu location includes an internal search field (shown by the magnifying glass on the right-hand side of the menu). One of its advantages is that this menu will always be visible even when you scroll down to the bottom of the page. Readers therefore always have access to this menu, even when they go to the oldest posts on your homepage.

If you select Header, your menu will be located below the header and above the slider.

If you select Footer, the menu will be located above the blog’s footer.

 

Positions des menus

If you have been using Magazine Basic up until now, you may think your menus have disappeared with the switch to Hueman. In fact, Magazine Basic had simply created two automatic menus from your blog’s categories and pages. No menu had actually been created in Appearance > Menus. In this case, you will have to start from scratch and create your blog’s menus. The old ones haven’t disappeared because they never actually existed.

If you have just created your blog on Hypotheses and have chosen to use Hueman, there will be no default menu on your blog. You therefore need to go to Appearance > Menus to create your menu(s):

  • To do this, fill in the Menu Name field (which only editors can see), then click Create Menu. You can add pages, links or categories to your menu by using the sections on the left of the screen. You can set the menu location in the Menu Settings section (see above for more details).

  • To create another menu, click on the “Create a new menu” link underneath the Edit Menus and Manage Locations tabs.

 

Choosing where to put your widgets: The agony of choice

Hueman offers three widget locations: two adjustable toggle bars next to the main post section and a footer zone (which can contain up to four widget columns).

Widgets Sidebars

Widgets Footer

To activate the widget zone in the footer and choose the number of columns it contains, go to Appearance > Theme Options > Footer.

You can vary the layout of the widget columns in different sections of the blog (homepage, category pages, archives, etc). To do this, go to Appearance > Theme Options > Layout. If you want to keep the widget layout the same throughout, choose the Global Layout setting.

To further customize your blog and widget layout, you can also create different widget sidebars to be shown in certain areas of your blog (homepage, category pages, archives, etc).

To do this, go to Appearance > Theme Options > Sidebars, then go to Edit in the Create Sidebars section.

 

Once you have created the sidebar and given it a unique ID name and title, click on Add New then save your changes by clicking on Save Changes in the top right of the window.

You can now choose the locations where you wish to display the widget sidebars you have just created (home page, post page, etc.). The locations are predefined and each location can contain up to two widget sidebars. If you don’t choose a sidebar for the location, the primary and secondary sidebars will be shown by default.

Here are the different locations that are available. They can be found at Appearance > Theme Options > Layout and Appearance > Theme Options > Sidebars:

  • Home: your blog’s homepage.

  • Single: widget sidebars placed here will be displayed when users are reading a post in full.

  • Archive: widget sidebars placed here will be displayed when users search for posts by date of publication on your blog.

  • Archive – Category: this name might seem misleading. Select this option if you want the widget sidebars to be displayed when a certain category of posts is displayed.

  • Search: the page that shows the results of searches performed on the site.

  • Error 404: this is your blog’s error page. For example, if one of your pages contains an incorrect link, readers will be redirected to an error page. It is therefore useful to display widget sidebars here to help users navigate around your blog and find the content they were looking for.

  • Default page: widget sidebars placed here will be shown on all pages of your blog, except if you have assigned specific widget sidebars to one or several of the locations described above.

In addition to these general settings, it is also possible to show the primary and/or secondary sidebar on each post. You can also set the layout of these sidebars using the Post Options menu underneath the editing page for each post.

 

You will notice that all the widget sidebars contain the headings “More” and “Follow”. The “Follow” heading takes users to your social network links, which you can configure by going to the Appearance > Theme Options > Social Links menu. The social network links will also be shown in the blog’s footer.

If you don’t want to display the “More” and “Follow” headings in your widget sidebars, move the Sidebar Top Boxes cursor to Off (in Appearance > Theme Options > Layout).

Once you have created and arranged the sidebars, you have to choose which widgets to display in them. This is very simple. As with any theme, simply go to the Appearance > Widgets menu.

On the left, you will see all the available widgets, which you can drag to the different locations shown on the right. These locations correspond to your various widget sidebars and the widget columns in the footer.

 

Zones de widgets

A few new widgets

The left-hand side of the Appearance > Widgets menu shows all the widgets that are available on your blog. You can activate the ones you want and place them in any of the widget locations you have created. Hueman has a few new widgets in addition to those offered on all Hypotheses sites:

AlxPosts provides a glimpse of some of the posts you have published on your blog. You can give this widget a title in the Title field. You can also display your posts’ featured images by ticking or unticking the “Show thumbnails” box, and you can set how many posts are shown in the “Items to show” field. You also specify whether the posts should come from a particular category (via the Category dropdown menu) or should be a random selection of posts (in this case, select All). The “Order by” menu allows you to specify whether the posts should be arranged by publication date, the number of comments they have received, or in random order. The “Posts from” menu allows you to specify whether the posts displayed should have been published within certain dates. You can also decide whether to show information about when the posts were published and what category they belong to. To do this, check or uncheck the “Show categories” and “Show dates” boxes.

 

Widget AlxPost

AlxVideo allows you to include a video on your blog by either entering its URL1 or using “Embed code”. This code can be used for exportable readers (i.e. external sites) and is generally provided by sites hosting videos (or other types of content). Site the Du multimédia dans vos billets post on the Maison des Carnets.

Widget AlxVideo

Exemple Wideget Video Vimeo

AlxTabs is an interesting widget, and contains up to four tabs:

  • The Recent Posts tab allows you to display the most recent posts published on your blog. If you check the “Show thumbnails” box, you will also display any featured images in posts. You can choose how many posts to display by filling in the “Items to show” field. The dropdown Category menu allows you to specify whether to display 1) the latest posts published on the blog, 2) posts from all categories (select “All”) or 3) posts from one category in particular. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable recent posts” box.

  • The Most Popular tab shows the most popular posts on your blog. The selection is based on how many comments each post has. The settings for this tab are similar to those for the Recent Post tabs. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable most popular posts” box.

  • The Recent Comments tab shows the most recent comments on your blog. You can show or hide authors’ profile image by checking or unchecking the “Show avatars” box. You can also choose how many comments to show in the “Items to show” box. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable recent comments” box.

The last tab, Tag, shows the tags associated with different posts published on your blog. You can show or hide this tab on the AlxTabs widget by checking or unchecking the “Enable tags” box.

The Tab Order section allows you to rearrange the four tabs by giving them each a number from 1 to 4. The tab numbered 1 will be shown first.

Finally, you can decide whether or not to display categories and posts’ publication dates in the Recent Posts and Most Popular tabs. To do this, go to the Tab Infos section.

 

Exemple de Widget AlxTabs avec 3 onglets

You now know everything you need to make a start with Hueman. If you have any questions that are not covered in this post, please take a look at the interactive tutorial, which is designed to help you get to grips with Hueman.

If you still can’t find the answer to your question, try posting it on the hypocommunity list (hypocommunity[at]groups.openedition.org), where other users will almost certainly be able to help you. If you are not signed up to this list and would like to be, please write to us at hypotheses[at]openedition.org.

 

1 The video therefore has to stored online. It is better to use a host other than Hypotheses for videos, as we have very limited capacity for video files.

Featured image: Responsive Web Design by Jeremy Keith (licence: Creative Commons by)

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

See you soon on Hypotheses!


François Pacaud

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

More Posts

Follow Me:
TwitterFacebookLinkedInFlickr