Last updated 23 August 2015. Created on 22 June 2012.
Edited by rjlang, israelshmueli, adelaide_chen, Tezza. Log in to edit this page.

FontFolio is clean, grid based, 2 column portfolio theme.


  • Out of the box default Drupal front page and taxonomy pages styled as Gallery of titled images.
  • Easily apply this gallery style to any view with Unformatted list format.
  • Social networks Icons.
  • Multilingual Features:
    • Links to frontpages in all Enabled languages will displayed at the end of main menu and will get slightly different styles.
    • Full RTL support

This section Explains how to setup the theme to make it look and function like it does in the Demo website.

Page Components

FontFolio page componnents


  1. Number of posts on FrontPage

    Go to admin/config/system/site-information and set to 9 the "Number of posts on front page". This number is also valid for Taxonomy term teaser lists

  2. Image styles:

    FontFolio use CSS image "width" rule to make sure images will displayed in the "right" dimensions for each part and will not break the layout.
    For efficiency and better performance you should pre set proper dimensions using Drupal's image styles.
    You should go to admin/config/media/image-styles and create new styles or override existing image styles to contain the needed effects.
    In the Demo website, all images on front page, (single bigger image as well as the smaller images) are node teasers with image fields displayed using 'medium' image style. The default 'medium' image style was overridden to have single effect of "Scale and crop" with dimensions of 562x464 .
    If you don't like the idea of using css to make the "smaller" images look small, you can replace default teasers lists with view that display fields instead of teasers, see 'views' on paragraph 6 (and "example view").
    For full node view mode and also for blog teasers the demo website make use of drupal's default 'Large' Image style, overridden to contain only 'Scale': width 700 (upscaling allowed).
    Thumbnail :
    The Example view in "examples" folder assumes that your "thumbnail" image style have single effect of "Scale and crop" with dimensions of 281x211

  3. Content type Teaser display

    Go to admin/structure/types choose your content types and click the Manage display tab. Then click the "teaser" display link.
    For the default "Article" node type you can go to /admin/structure/types/manage/article/display/teaser .
    Now configure the teaser display to hide all fields but the image field. Make sure the image style for teasers configured as 'medium'. (Screenshot).
    For "Default" displays you usually want the the body field to be visible. (Screenshot).

  4. Secondary menu

    The links below main menu are the Secondary menu links.
    You should go to admin/structure/menu/settings and make sure that you are satisfied with the "Source for the Secondary links" settings. In FontFolio Demo the source for both, main links and secondary links is "Main menu". This way the main menu display only the first level menu links and secondary links really function as secondary menu while displaying the relevant sub menu (second level) items.
    In FontFolio Demo the source for secondary links is new custom created menu. Create new menu via "add menu" link (admin/structure/menu/add) and choose it to be "Source for Secondary menu".
    Demonstrate FontFolio secondary menu settings

    The final step requires filling out the Tags field for each node (page or article) that you want to appear under the different secondary link categories. For example, you create a new article. For it to appear under the secondary link "Bowls", you must type Bowls into the Tags field.
    Nodes are linked to secondary menu items through the Tags field

    To apply basic fontfolio style grid to any view:
        A. Create new view with page display.
        B. Set its format to "Unformatted list".
        C. Click the format settings and insert "post-box" in "Row class" field.
        D. Set the nomber of items to number that is divisible by 4 (e.g 8).

    In case you want the first item to displayed bigger like the default fontfolio frontpage:
        E. Add to your view new attachment display and keep its "Unformatted list" format.
        F. Click the format settings and override (only for this display) the "Row class" to "big-post-box".
        G. Set 1 for Items to display and "no" for "render pager".
        H. Now click on "Page" display to set its pager "offset" field to 1.
        I. Add "fontfolio" as your view tag. You can assign tag via "edit view name/description" button. Using this tag for any view will make it rendered using views-view--fontfolio.tpl.php template file. This template keeps the big box attachment only on the first page and remove it from inner pages of the same view. ( In case that a pager indicate existence of more than one single page).

  6.     *Example View. Inside "examples" folder of the theme there is an export file, export-of-fontfolio-frontpage-fields-view.txt . You can import this view by copy/paste the file content using the "import" link in views administration page or directly go to admin/structure/views/import.
    Notice: the example view "assumes" the presence of the following overridden image styles:
    'medium' has single effect of "Scale and crop" with dimensions of 562x464 .
    'thumbnail' has single effect of "Scale and crop" with dimensions of 281x211.

Looking for support? Visit the forums, or join #drupal-support in IRC.


uncleunvoid’s picture

Could you privide a clearer description on how to create the secondary menu? I tagged the pages in 3 categories, but no navigation in sight , its switched on but does not show up.

israelshmueli’s picture

You can configure any existing menu to become the secondary menu.
So first you should create new menu to contain links to relevant categories.
When such menu exists you can go to /admin/structure/menu/settings and select your new menu as "Source for the Secondary links".

adelaide_chen’s picture

I've tried multiple ways. Closest I got to getting the Secondary Links to appear was create a menu just for secondary links. And setting this menu as Source for Secondary Links. It appears but keeps saying there is no content associated. What I am I doing wrong?

I've also tried the original way written in the documentation. The confusing part is that the Main Menu IS the setting for Source for the Secondary Links (under structure/menus/settings). How do you get the secondary links to appear below the main links?

I did try nesting secondary menu items in the Main Menu as such:
primary 1
- secondary 1
- secondary 2
primary 2

But that has it's drawbacks. If I nest the secondary menu items under "home" nothing appears. If I nest them under something else, for example, "primary 1", then "primary 1" has to be active in order for "secondary 1" and "secondary 2" to appear. In addition, I'm having trouble getting particular nodes to appear that were tagged (or categorized) under the secondary menu.

israelshmueli’s picture

Actually, in demonstration website I used custom menu for "secondary links source" and not "main menu" as I first mentioned.
I modified the secondary menu description on this page and added the following image as illustration:
secondary menu

patty.u’s picture

I get my secondary menu to work, but does anyone know if there's a way of just having it in specific page? or having different secondary menus depending on the page you are in?

adelaide_chen’s picture

The custom new menu (source for secondary links) now appears on my homepage below the main menu. After tagging the nodes individually with the exact spelling of the secondary menu item, it is functioning properly.

However, today I am not able to create additional secondary links that work. There seems to be a glitch. Is anyone else having the same issue?

Wario’s picture

I would like to know if there's a way to change the default grid width to fluid in fontfolio admin settings. Thank you in advance.

israelshmueli’s picture

Support question are better asked in FontFolio's issue queue.

Martin Grześlowski’s picture

How can I put menu (on the right) in the main page? I don't want this "special" home page. I want to have normal Drupal page.


israelshmueli’s picture

racheljcox’s picture

I am a beginner to Drupal so please bear with me. How do I create the blog page as seen on the demo site? Do I have to create a new View or is there a simpler way?


spade’s picture

Thanks for this theme.

Is there a way to move the breadcrumb to another position or would I have to edit the template? How would I do that, i.e. which part would I have to move. I'm not familiar with twig.

Can I do it without hacking the page.html.twig?

feyisayo’s picture

Hello Israel,
This is a splendid theme. I am using now for a friend's website and I have just looked at it on my mobile phone - just splendid.

The simplicity is impressive.

Thanks for the work on this theme. It's much appreciated.


sdebals’s picture

Is there a way to sort the items in the gallery view?
You can stick an item on top of the list, but what about the other items?

pimptee’s picture

The items on the front list, as well as those in the secondary menus, get sorted by authored date time. Just edit a node and delete the authored date time which will reset it to now and the node shows up first on the first page (after the sticky post that is)

Amanteslove’s picture

Hello , I was doing yours theme in drupal . looks was like need , but secondery links not sorting like need ? I am still new in drupal , please let me know were i did mistake and how can fixs it to sort by tags ? in this website