Theme Setup

How to set up the theme

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Theme setup

To setup your logo, go to Angle>General settings. The options here allow you to configure the logo type of the site. As a logo you can use text, image or both. logo

The logo image size will always be restricted by the height of the header (see next section). To make sure that your logo will look crisp on retina screens, make sure that the height of the image you upload is at least 1.5 times bigger than the header's height.

Setting the header

To set up your page header you have the following options header

  • Header type: Type of the menu bar. Angle comes with 3 different type of headers

    1. Nav Bar Fixed - Simple navigation bar that scrolls with the page (the default option)
    2. Top Bar Static - Navigation with extra top bar with regular scrolling.
    3. Top Bar Fixed - Navigation with extra top bar, the menu navigation animates in after some scrolling

    Options 2 and 3 uses an extra top bar with two widget positions.

  • Menu height and Menu height after scroll: Choose the header's height in pixels. The first option is for the initial header height, while the second is the height of the header after scrolling has started.
  • Hover menu: Select if your dropdown menus will be activated by hover (default behaviour is by clicking - recommended)
  • Hover menu delay : Delay in seconds, before the hover menu closes after moving the mouse off the menu.
  • Header Swatch: Header color swatch.
  • Top Bar Swatch: Top bar color swatch.
  • Capitalization: Option to allow all the navigation menus to have capital letters.

Setting Theme's layout

Angle supports both fullscreen and boxed layout. layout

To set up the layout go to Angle>General and select normal or boxed in the layout option section.

layoutoptions

To set up the background used in the boxed version go to Appearence>Background
Take a look at the video on how to setup the theme's layout: setting the layout

Setting the home page

In Angle theme you need to specify which page is going to be your home page. Assuming that you have created a page (or installed the demo content), follow these steps

  • Click on Settings>Reading
  • Select “a static page” and from the dropdown menu select any page you want for your home page.

Setting the Blog page

To specify which page is going to be your blog post list page (assuming that you have created a blank page or installed the demo content) follow these steps

  • Click on Settings>Reading
  • Select “a static page” and from the dropdown menu select any page you want for your blog page.
The settings for the blog page can be found on Angle>Blog
Take a look at the video on how to setup your blog and home pages: setting the home and blog pages

Setting the typography

Angle comes with a powerful typography engine that can help you set your typography as you want. With the option to use any google or typekit font you like you have unlimited options. To set up your typography, you first need to import your fonts:

  • Click on Angle>fonts.
  • To use any google fonts you need to click on “update fonts” to get the latest list of google fonts. This option can be used later on to update the list of google fonts.
  • To use typekit fonts enter the API token from typekit.
  • After entering the token, click on update your kits to get the kits you created on typekit.
  • Click on save to save your font lists.

fonts

After saving your font lists, you can go ahead and select the fonts you want in your website.

  • Click on Angle>Typography.
  • Select your font family from the dropdown list (the list includes some common system font stacks along with all the fonts you have imported from google or typekit) and click add.
  • In the pop up window you can select the variants of the font that you want to use (weights), and where you want to use this font (all body, headings, forms and block quotes).
  • In the extra CSS textfield you can add extra CSS to target specific selectors.
  • Click on the Add the font to save your font.

typography

You can repeat the last few steps to add as many fonts you want to your web page.
Take a look at the video on how to setup your typography: setting the typography

Important Notice. In order for all the font weights to be applied correctly, it is a prerequisite that the font you are using supports the chosen font weight. In addition, when adding fonts you need to associate the font weight classes (.light and .hairline) with the appropriate weights that the font family supports.

For example use the following code for the Lato Google Font:

  .light {
    font-weight: 300 !important;
  }
  .hairline {
    font-weight: 100 !important;
  }

logo

Find out about Lato Google Font here: Lato Google Font

In Angle theme you can set permalinks for all the custom post types, like the services, the staff members and the portfolios. To setup the permalinks, follow these steps

  • Click on Angle>Permalinks.
  • Type the permalinks on the text boxes.
  • Save your changes.

permalinks