Summary

Setting the appearance means to set the branding an colors of the site. The branding elements are the logo, the site title, the additional buttons on the header and the footer visible at the bottom of the left sidebar. Additionally the following colors can be set: background and text colors for light and dark themes and the header background color.

Logo and Title

Site logo is an image located in assets/img folder. To set the site logo, copy the image file that you want in the mentioned folder, edit _data/siteConfig.yml and use the name of the file (only the name, not the full path) in the right place. Then build, test, deploy …

Logo

The setting for the site logo is placed in _data/siteConfig.yml.

Logo img file

Do not forget to copy the image file for the logo in assets/img folder before setting the file name in _data/siteConfig.yml!!!

📁 img/
├── 📄 404-250.png
├── 📄 home.webp
└── 📄 logo-s.webp

layouts:
  headerArea:
    mobileMenuButton: "#menu-button"
    siteLogo: "logo-s.webp"

Title

Site title setting is placed in _config.yml file.

title: Docaroo

Auxiliary buttons

These buttons are placed on the right side of the site header and are used to point the user to some external sites that may be related or of interest (such as the company website). Technically, there is no limit of how many buttons can be added, but it is not recommended to have more than two buttons. Auxiliary buttons setting is placed in _config.yml file.

aux_links:
  "GitHub":
    - "//github.com/pmc-community/jekyll-site-template"
  "About":
    - "//pmc-expert.com"

# Makes Aux links open in a new tab. Default is false
aux_links_new_tab: true

Theme text and background

The settings for the text and background colors of the dark and light themes are placed in _data/siteConfig.yml.

backgroundColorOnElementsAffected:
    light: "#fff"  # HERE TO CHANGE LIGHT THEME BACKGROUND
    dark: "#0d1117" # HERE TO CHANGE DARK THEME BACKGROUND
  textColorOnElementsAffected:
    light: "#212529" # HERE TO CHANGE LIGHT THEME TEXT COLOR
    dark: "rgb(108, 117, 125)"  # HERE TO CHANGE DARK THEME TEXT COLOR
  

Site footer

The settings for the footer visible on the bottom of the left sidebar are placed in _data/buildConfig.yml. Configuring a nice footer requires basic knowledge of HTML. The footer is made of a number of rows, each row can be individually designed. Technically there is no limitation in how many rows to configure in the footer, but the recommendation is to not have more than two rows.

siteFooter:
  container: ".site-footer"
  rows:
    - content: >
        <a href="https://innohub.space/eng/terms-of-service/" target=_blank>Terms</a> |
        <a href="https://innohub.space/eng/privacy/" target=_blank>Privacy</a> |
        <a href="https://innohub.space/eng/cookie-policy/" target=_blank>Cookies</a>
    - content: > 
        Copyright <i class="bi bi-c-circle"></i> 
        <a href="https://pmc-expert.com" target=_blank>PMC</a>

Header background and text

The settings for changing the header background and text colors are placed in _sass/custom/custom-vars.scss.

$siteHeaderBackground: $c-dark-blue;
$siteHeaderTextColor: $c-white;

Config options

Detailed information about all the configuration options are here:

Config options

Change appearance

Do not forget to build and deploy the site after making changes to appearance settings!!!