Customization on Hugolify

CMS

Mon, 01 Jan 0001 00:00:00 +0000

CSS

Mon, 01 Jan 0001 00:00:00 +0000

Variables

Hugolify uses Bootstrap variables and Hugolify variables .

assets/
└── sass/
 └── abstract/
 ├── _variables.sass # bootstrap variables override for Hugolify
 ├── _variables-site.sass # specific for your website
 └── _variables.default.sass # Hugolify core variables, do not override it

Mixins

Hugolify uses Bootstrap mixins and Hugolify mixins .

assets/
└── sass/
 └── abstract/
 ├── _mixins.sass # specific for your website
 └── _mixins.default.sass # Hugolify core mixins, do not override it

File override

The sass files override is possible by keeping the same tree structure and allows to overwrite the style of the theme to replace it with a specific style.

Favicons

Mon, 01 Jan 0001 00:00:00 +0000

Icons

/static/assets/images/favicons/

apple-touch-icon.png 180x180px
favicon-32x32.png 32x32px
favicon-16x16.png 16x16px
favicon.ico
favicon.png
favicon.svg
safari-pinned-tab.svg

Files

/static/

site.webmanifest

HTML

Mon, 01 Jan 0001 00:00:00 +0000

The HTML files override is possible by keeping the same tree structure.

layouts/
└── partials/
 └── posts/
 └── item.html

Icons

Mon, 01 Jan 0001 00:00:00 +0000

Bootstrap icons

By default, Hugolify use Bootstrap icons .

/assets/sass/base/_icons.sass

@import "base/icons/bootstrap-icons/icons"

Optimise

For optimise automatically bootstrap icons font with icons used. This command will run a node script that parses the content and sass to determine useful icons.

yarn build:icons:bootstrap

Material icons

Beta

If you want to use Google material icons .

/assets/sass/base/_icons.sass

@import "base/icons/material-icons/icons"

Add icons variables with glyph.

Image

Mon, 01 Jan 0001 00:00:00 +0000

Logo

/config/default/params.yaml

logo:
 header: '/assets/images/logo.svg'
 footer: '/assets/images/logo-footer.svg' # default: /assets/images/logo.svg

Retina

/config/default/params.yaml

image:
 retina:
 desktop: false # default false, Set true to enable retina for desktop

Dimensions

/config/default/params.yaml

Commons

hero:
 cover: '1600x400'
 cover_mobile: '360x400'
 desktop: '416x'
 mobile: '300x'
image:
 xlarge: '1600x'
 xsmall: '50x50'
 desktop: '856x'
 mobile: '300x'
 mobile_full: '360x'
 scrollsnap: '240x'
thumbnail:
 desktop: '414x177'
 mobile: '300x129'
 scrollsnap: '240x103'
navigation:
 desktop: '414x200'
 mobile: '300x150'

Sections

pages:
 thumbnail:
 desktop: '414x177'
 desktop: '416x179'
 desktop_large: '636x273'
 mobile: '300x129'
 scrollsnap: '240x103'
 image:
 desktop: '856x'
 mobile: '360x'
posts:
 …

Blocks

blocks:
 editorial:
 desktop: '636x'
 mobile: '360x'
 gallery:
 mobile: '138x138'
 informations:
 image:
 ratio: .5196

Javascript

Mon, 01 Jan 0001 00:00:00 +0000

File override

The js files override is possible by keeping the same tree structure and allows to overwrite the javascript of the theme to replace it with a specific javascript.

assets/
└── js/
 └── blocks/
 └── chart.js

Add specific files

import your specific files in custom files.

Components

assets/
└── js/
 └── components/
 └── custom.js

If you want override basic import components:

/assets/js/components/index.js

Features

assets/
└── js/
 └── features/
 └── custom.js

Vendors

assets/
└── js/
 └── vendors/
 └── custom.js

Enable/disable

Animation

/config/default/params.yaml

SEO

Mon, 01 Jan 0001 00:00:00 +0000

Global

/data/seo.yml

color: "#000000" # theme-color, msapplication-TileColor, mask-icon
title: "" # Global meta title
description: "" # Global meta description

Editable in Hugolify admin.

Specific

In frontmatter of pages.

---
seo:
 title: "" # Page meta title
 description: "" # Page meta description
---

Not editable in Hugolify admin.

Customization on Hugolify

CMS

CSS

Variables

Mixins

File override

Favicons

Icons

Files

HTML

Icons

Bootstrap icons

Optimise

Material icons

Image

Logo

Retina

Dimensions

Commons

Sections

Blocks

Javascript

File override

Add specific files

Components

Features

Vendors

Enable/disable

Animation

Menu

Layout

Offcanvas

SEO

Global

Specific

Customization on Hugolify

CMS

CSS

Variables

Mixins

File override

Favicons

Icons

Files

HTML

Icons

Bootstrap icons

Optimise

Material icons

Image

Logo

Retina

Dimensions

Commons

Sections

Blocks

Javascript

File override

Add specific files

Components

Features

Vendors

Enable/disable

Animation

Menu

Layout

Modal

Offcanvas

SEO

Global

Specific