Link Search Menu Expand Document

LSP-specific Customizations

Table of contents
  1. Hero Banner
  2. Top Banner Logos
  3. Footer
    1. Footer logos
    2. Licenses
    3. Other Footer Content

Hero Banner

Hero banner and text shows off your content immediately on the home page. It looks something like this:

hero banner

To make a hero graphic banner:

  1. Add your image of choice to the repo. We suggest adding it to a central folder where you keep all images for the site (e.g. assets/images/).
  2. In _config/yml file, use the following line to embed hero image. Replace DIRECTORY to the path to your chosen image
     hero_background: "DIRECTORY"

    e.g. hero_background: "/assets/images/hero_background.jpg"

  3. In the front matter of your home page, define the following values
     # Hero heading and body text
     hero_heading: "THIS IS THE HEADING"
     hero_body: "This is the body text."
     # Call to action(CTA) buttons to be displayed within the hero area
     # 'label', 'link', and 'target' values can be specified for each
     - label: "button 1"
         link: "#getting-started"
     - label: "button 2"
         link: ""
         target: "_blank"
     # 'target' attribute specifies where to open the link. '_blank' opens a new tab, '_self' opens the link in the same tab etc. Default is opening in the same tab.

Sit logo is set in _config.yml file by setting the path to the logo file. As an example:

logo: "/assets/images/just-the-docs.png"

Top Banner Logos

Top banner logos of LSP and/or HiTS can be enabled in _config.yml file

    lsp: true
    hits: true

The results looks like this top banner logos

All content in the Footer can be customized in the _config.yml file as well.

Footer logos are set by a list of YAML values. Logo images are built into the theme and exist in the theme repository, so you do not need to have these files in your website’s repository!

Current options of logos are HMS, LSP (two color options) and HiTS.

  - name: "Laboratory of Systems Pharmacology"
    image: "/assets/images/logo_lsp_white.svg"
    url: ""


You can provide license information on your publication/software project in the footer. Licenses are set by a list of YAML value as well. This will allow you to put more than one licenses and specify which parts of the content they apply to.

# NOTE: By default, description text will be "[site title] is licensed under the"
  - description: 
    name: "MIT License"
    url: ""
  - description: "The code for [software name] is licensed under"
    name: "License ex2"
    url: "url-to-the-license-file"

Other optional footer content includes a “Edit this page on GitHub”link and “Page Last Modified: DATE”. Instructions on their customizations can be found on the footer content documentation as well.