Invisible link to canonical for Microformats
 

Theming Chulapa

A powerful interface to pimp your site

Chulapa has a powerful theming interface, meaning that you could use this template for several sites and the look-and-feel of each one could be completely different. We have already introduced the dual navbar system, but you can customize colors and fonts, and even more characteristics as spacing, border, buttons…

This is not new, the advantage is that you don’t need to know how to code, all you need to do is update your _config file!

Learn how to do it!

Load Google Fonts

You can easily load new fonts via Google Fonts like this:

googlefonts:
 - url: https://fonts.googleapis.com/css2?family=Raleway&family=Rubik&display=swap
 - url: #Another url

If you use another provider, or you prefer another method, there are two features you may want to explore:

  1. Create a blank file on your repo (or modify) under this path: _includes/custom/custom_head.html. The content of this file is injected on the <head> of your site. Note that you can include other pieces of code, as favicons or files loaded via cdn.
  2. Create a blank file on your repo (or modify) under this path: assets/css/custom.css (or custom.scss). You can import your fonts via css there. Note that you can include new css styles or override existing ones there.

Note that while this option would load the fonts, you still need to tell the theme to use them via vars, please read this section to know how.

Code highlighting

Pygments highlighting styles available Have a look to the Live demo and choose the one you want. default

chulapa-skin: 
  highlight   : "ZENBURN" #or any other name, default is 'DEFAULT' style

Skins

This theme includes 14+ skins from Tophat Themes, Bootswatch and others. You can have a look on this page. If you want to use in your site:

chulapa-skin: 
  skin   : #name of the skin

You can use vars to override some parts of the theme.

Autothemer

This is a cool feature to create a full theme based on a single color. Basically it propagates your primary color value to all the rest of colors used on your theme. This would produce that the full palette used for warnings, errors, etc. would be based on your theme primary color.

Note that autothemer can be combined also with the skin option, however the approach is non-destructive, meaning that if any specific color (as warning) is already specified on the skin or via vars it won’t be overridden (variable with !default, if you are familiar with SASS/SCSS).

To enable autothemer:

chulapa-skin: 
  autothemer  :  true #omit to disable this option

Variables

Chulapa allows you to adjust any visual feature of your main.css via the _config.yml file. Given that Chulapa has been developed as a implementation of Bootstrap, it is strongly recommended to have a look to its theming documentation.

In short, you can override Bootstrap variables via _config. Here’s an example on how to translate SASS/SCSS theming to your site. On this example the body background, color and the font are modified:

On SASS/SCSS:

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

$body-bg: #000;
$body-color: #111;
$font-family-base: Montserrat;

On your _config.yml use this:

googlefonts: 
 - url: "https://fonts.googleapis.com/css?family=Montserrat&display=swap"

chulapa-skin: 
  vars        :
    body-bg: "#000"
    body-color: "#111"
    font-family-base: "Montserrat"

chulapa-skin vars usually overrides any other value provided by autothemer or theme, meaning that you can modify any parameter of a skin via this method, i.e, changing the default font or primary color of a specific skin.

Heads up: Enclosing your vars into " " or ' ' is recommended, specially in values with # (colors), booleans (true,false) or lists (Lato, serif). YAML, Liquid and SCSS are playing together on this process.

On top of the default Bootstrap variables (500+!) this theme has specific variables that makes the customization of specific components easier. See the vars dictionary here.

The critical variable for autothemer is primary, so you can create a full theme just playing with those two options. By default, primary is set to Bootstrap default primary color (#007bff in v4.x).

Chulapa theming tool

It is available an online tool for fast-theming your site. The drawback is that you have to work with SASS/SCSS and translate it to your _config.yml, but as explained before, the conversion is not complicated.

Go to the Codeply sandbox

There are two pages on that ply (HTML window), one named INDEX and the CLASSICNAVBARDEMO, so both navbars styles can be previewed.

Step-by-step example

Let’s say we want to implement the Sunset theme by TopHat on our site. Having a look to the theme.scss, it looks like this:

/*! Tophat `Sunset` Bootstrap 4.3.1 theme */
@import url(https://fonts.googleapis.com/css?family=Voltaire:200,300,400,700);
$headings-font-family:Voltaire;

# $enable-grid-classes:false; DONT PASTE THIS LINE ON THE PLY!!
$primary: #2F414A;
$secondary: #F47B53;
$success: #420084;
$danger: #f2460d;
$info: #7ebcfa;
$warning: #ff9933;
$light: #eef0f2;
$dark: #000633;
# @import "bootstrap"; DONT PASTE THIS LINE ON THE PLY!!

// Add SASS theme customizations here..

1. On the tool

  1. Open the ply and copy that code on top of the CSS window.
  2. Save the changes and run the ply. You would have a preview of the most relevant Markdown and Bootstrap components.
  3. Modify until you are happy with your configuration.

2. On your _config.yml

Translate that code as :

googlefonts: 
 - url: "https://fonts.googleapis.com/css?family=Voltaire:200,300,400,700"

chulapa-skin: 
  vars  :
    primary: "#2F414A"
    secondary: "#F47B53"
    success: "#420084"
    danger: "#f2460d"
    info: "#7ebcfa"
    warning: "#ff9933"
    light: "#eef0f2"
    dark: "#000633"
    headings-font-family: Voltaire

The skin is already implemented on your theme. Please remember to remove $ and ;, enclose hex colors in " " and leave a blank space after :.

Alternatively, you can save the SCSS code on _sass/skins/THEMENAME.scss to create it as a theme. Then just call theme: THEMENAME on your _config.yml. If you have an awesome skin and you want to include it on Chulapa just PR! See here the code for Sunset implemented as skin.

Using Autothemer on Codeply

The Autothemer is already installed in the ply, to activate it just uncomment the lines between /* Start autothemer */ and /* End autothemer */ on the CSS window.

Themestr.app

Themestr.app is a fantastic site that allows you to quickly create a Bootstrap theme with a nice and friendly UI. You can create a theme there and pick up the generated SCSS code. A good practice is to test it before implementing on the Chulapa theming tool.

Ignore the @import "bootstrap"; and $enable-grid-classes:false; lines! Those lines cause an error when deploying this theme.