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
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:
- 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.
- Create a blank file on your repo (or modify) under this path:
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.
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
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.
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
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:
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); $body-bg: #000; $body-color: #111; $font-family-base: Montserrat;
_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
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
" " 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
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.
There are two pages on that ply (HTML window), one named INDEX and the CLASSICNAVBARDEMO, so both navbars styles can be previewed.
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
- Open the ply and copy that code on top of the CSS window.
- Save the changes and run the ply. You would have a preview of the most relevant Markdown and Bootstrap components.
- Modify until you are happy with your configuration.
2. On your
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
;, 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 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.
@import "bootstrap"; and
$enable-grid-classes:false; lines! Those lines cause an error when deploying this theme.