Flat Documentation

Find out how to customize the theme in a few steps

Site Identity

2015-03-17_10-00-50
2015-03-17_10-01-07

Title and Tagline – Here you can write the title of the website and a short description for it. The description should contain only a few representative keywords about your website.

You can also add a logo or a favicon, and change the font family of the title.

Colors

2015-03-17_10-01-17
  • Sidebar Background Color – Choose a color that suits the Sidebar Background.
  • Background Color – Choose a color that suits the Background.

Typography

2015-03-17_10-01-28
  • Typography – In this section, you can change the font family of the heading, sub-heading and of the entire content.

Background Image

2015-03-17_10-01-45
  • Add new background image – Drag and drop your image here or click on the Select Image button to add it in the classic mode, from your computer.

Menus

2015-03-17_10-01-57
  • Add new menu – Your theme supports 3 menus. Select which menu you would like to use. You can edit your menu content by going to the Menus screen in the Appearance section.

Blog Index & Archive Pages

2015-03-17_10-02-08
  • Blog Index & Archive Pages – You have the option to hide Featured Image or Metadata. You can also choose to show post excerpt.

Widgets

2015-03-17_10-02-18
  • Add a widget as simple as in the left picture. Click on “Add a Widget” and then add any widget you want.

Single Post

2015-03-17_10-02-32
  • Single post –  You have the option to hide Featured Image, Metadata or Author box.

Static Front Page

2015-03-17_10-02-47
  • Front page displays – Your theme supports a static front page.

Font Awesome

2015-03-18_12-09-53
2015-03-18_13-03-07

Awesome Icons – Flat is Font Awesome-ready, so if you want to add the small  icons and make them look like in the image above, you have to do these things:

Click on Appearance -> Menus and then click on the page for which you want to add the icon. Next step is to complete CSS Classes section with “fa fa-icon”. (For example, in the picture above we chose to add the house icon for the homepage and the code was “fa fa-home”).

You have a lot of icons you can choose from: http://fortawesome.github.io/Font-Awesome/icons/

For each icon, you have also the code that you need to complete the  CSS Classes section.