Customizing the layout of your site

Introduction

While the Academic Pages is intended to allow you to get a website up and running as quickly and easily as possible, a high degree of customization is also possible. While some of the customization can be completed by editing data files, some of the customization will require modifications to CSS or HTML.

Order of Navigation Bar

The order of the top navigation bar is controlled by the _data/navigation.yml file which is written in standard YAML. When setting up your website you may have deleted the following lines to remove the link markdown hints page:

  - title: "Guide"
    url: /markdown/

However, you can also remove links to other sections by deleting the respective lines from the file. Since the order of the entries in the file determines the order they appear in the navigation bar, changing the order will also adjust their order in the navigation bar.

Adjusting the Sidebar

Much of the CSS for the sidebar can be found in _sass/_sidebar.scss with the variable settings found in _sass/_variables.scss. Generally, if a property is rarely adjusted, the numeric value will be in _sass/_sidebar.scss, but if it is more likely to be changed, it will be stored as a variable in _sass/_variables.scss.

Adjusting the Avatar

The style of the author avatar is controlled by the .author__avatar CSS class which can be found in the _sass/_sidebar.scss file. You can adjust the size of the adjusting the max-width setting which defaults to 175 pixels. Following the max-width is the border-radius which controls the rounding of the corners of the avatar border. The default border-radius of 50% renders as a circle while a setting of 0% renders as a square. Values between 1% and 49% will increase the rounding of the boarder up to a full circle at 50%.

.author__avatar {
  /* Other properties clipped for clarity */
  img {
    max-width: 175px;     /* The size of the avatar in pixels */
    border-radius: 50%;   /* The boarder radius as a percentage, 0% will render a square */
  }
}

Adjusting the Footer

Removing the Sitemap

The Sitemap link in the footer of you site can be removed by editing the file _includes/footer/custom.html and removing the following line:

<a href="/sitemap/">Sitemap</a>