Skip to content

Theme customistion

Jump to bottom
Ram Iyer edited this page Dec 31, 2020 · 3 revisions

Theme customisation

Typographical works right out of the box with great user experience. But if for some reason you would like to customise it a little further, you can do that as well.

Fonts

By default, the theme uses the beautiful Alegreya family (Alegreya, Alegreya SC and Alegreya Sans), through Google Fonts. But you can change this. You must do this systematically to ensure good user experience.

Select fonts that have real small-caps, either as a separate font, or within the font as an OpenType feature. Alegreya on Google Fonts uses a separate font for small-caps. Source Serif Pro from TypeKit has the feature built into it. While your browser will try to make a faux small-caps variant of your font, that would be bad typography.

Font URL

The first step to enable your own fonts is to create a font package. You can do this either on Google Fonts, TypeKit, FontSquirrel or other provider. To create a package on Google Fonts, go to https://fonts.google.com/ and select the fonts and the weights you need by clicking "Select this style" against each style of each of the fonts you need. To your right, a pane with the selected font styles will appear. Select the second <link> element---something like this:

<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC&family=Alegreya+Sans:wght@800&family=Alegreya:ital@0;1&display=swap" rel="stylesheet">

The part within href is what we need. Copy this. Create a key called fontUrl in your config.toml and assign this URL as its value, like so:

fontUrl = "https://fonts.googleapis.com/css2?family=Alegreya+SC&family=Alegreya+Sans:wght@800&family=Alegreya:ital@0;1&display=swap"

Your site is now ready to use these fonts. Go on to specify the fonts to use.

Specifying the fonts

This theme uses five fonts:

  1. Serif font
  2. Secondary serif font
  3. Sans-serif font
  4. Monospace font
  5. Small-caps font

By default, the serif and the secondary serif font are the same. The theme displays metadata such as post date in the secondary serif font. You can change these fonts in your config.toml file. Specify these fonts like so:

SerifFont = "Alegreya"
SecondarySerifFont = "Alegreya"
SansSerifFont = "Alegreya Sans"
MonospaceFont = "Fira Mono"
ScFont = "Alegreya SC"

If you do not specify a small-caps font (ScFont), the theme will use the small-caps variant of the serif font. If the serif font does not have the feature, it will fall back to using faux small-caps.

Drop caps

Drop caps are a nice way to start a story or a blog post. This theme starts blog posts with a drop cap. You need to enable this using DropCap in config.toml.

[params.dropCap]
  enable = true

If you are using the default fonts, this is all you will need to do to enable drop-caps.

Configuration for custom fonts

If you are using a different font, you will need to change the size and margins of the drop-cap for your font. You can do this using three keys: fontSize, smallScreenFontSize and margins.

[params.dropCap]
    enable = true
    fontSize = "5.8em"
    smallScreenFontSize = "5.2em"
    margins = "-0.09em 0.03em -0.1em -0.05em"

The fontSize key determines how big the drop cap should be. The smallScreenFontSize key determines the size of the drop-cap in smaller screens like the screen of an iPhone 5s. The margins key determines the margins of the drop cap; play around with the values to see which margin configuration works the best for your font.

Colours

This theme allows you to change two colours:

  1. Accent colour
  2. Code colour

Accent

By default, the accent colour is a shade of yellow. To change this, specify the hex value of the colour:

accentColour = "#ffd900"

Code colour is the colour used when displaying inline code. (Code blocks use Pygments for syntax highlighting.)

To set the code colour, use the codeColour key:

codeColour = "#bf616a"

Reading time

By default the post list does not show the read time with the summary. You may choose to show the reading time for each post, using the displayReadTime key in your config.toml.

[params]
  displayReadTime = true

Copyright customisation

Some like to keep the content copyright free, while some like to reserve some rights; others like to reserve all rights. To cater to this, this theme allows you to customise your copyright message. By default, the site shows the copyright symbol, followed by the year of build and the name of the site owner.

You can customise any of these, though, using the following in your config.toml:

[params.copyright]
  icon = "<i class=\"fab fa-creative-commons\"></i>&thinsp;<i class=\"fab fa-creative-commons-by\"></i>"
  message = "[Someone's Something](https://someone.something.me) by [Someone](https://about.me/someone/) is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/)."

The theme will see what you enter against icon as safe HTML. This means that you can also use FontAwesome icons.

The theme will read the message as Markdown, and convert it to HTML.

Clone this wiki locally