Kunstformen der Natur (1904) by Ernst Haeckel via Wikimedia

Custom styling

How to customize the your website

You can add custom styles and overwrites as much as you desire. On this page you can see how.

But if you add a lot of customization, the GBIF secretariat wont be able to support you and theme updates will worst case break your site. If you are not sure wether you are crossing that line, then feel free to ask.

_config.yml

You can change a few basic settings such as logo, primary color and squareness in _config.yml.

Safe

Consistency

Having a consistent style of images/graphics goes a long way.

There are multiple layouts available and they can each be configured. Your site probably looks more coherent if you stick with a few.

Safe

Use Bulma classes

With the Kramdown Markdown parser that Jekyll uses, you can add css classes to your content (see this blog post). The theme is build using Bulma So you can use classes from Bulma to style your content.

Using the Bullma documentation and kramdown block attributes we can style below paragraph

This paragraph is styled by prepending it with {: .box }.

Should be safe

Additional variables

The style is based on the Bulma css library. You can change all Bulma variables by overwriting them in _sass/_main.scss.

// set custom variables here
$primary: turquoise;

// import the theme style
@import "theme/_main";

// You can add additional styling here

What variables are avilable is best seen in the Bulma docs or alternatively in the theme repo - the variables are a bit scattered throughout the Bulma files, so you might have to explore a bit.

Should largely be safe to do, but better test it thoroughly on various device sizes (mobile, tablet etc.)

Most likely unproblematic

Add custom css

If you know how to write css then you can add any additional css in _sass/_main.scss.

If you need to target a specific page with a style, then you can add klass: "my-special-page" to the frontmatter of that page. You can now style that page by using the .my-special-page selector.

No guarentees as you can overwrite existing css inadvertently or make changes that conflict with theme updates. Be cautious.

Problematic if you overwrite existing styles dramatically

Add custom layouts and components

Since it is a jekyll site you can always write your own layouts and includes. For that you should read the Jekyll documentation. If you add something that you think more people would benefit from, then please raise it and we can add it to the theme.

There could be an issue if the theme and your code use the same names, but that would be easy to fix.

Most likely unproblematic

Overwrite theme layouts and components

This is perfectly possible, but the most fragile approach. Once you find that you need this, then you might be better of ejecting

This is not ideal - let us talk before you do so