Gabe's themes

Theme showcase

Customization

CSS Only

static/style.css

If you only want to change things with CSS the theme already looks for style.css in the static folder.

Examples

Colors

There are three CSS variables that determine all the colors the theme uses. These colors are overridden by the user’s color preference, if you’d rather set your own colors you can add this to your style.css

body {
–theme-color-primary: white;
–theme-color-secondary: black;
–theme-color-accent: purple;
}

Background images

  1. add a background image

    body {
    background-image:url(your-image.png);
    background-size:cover;
    }

  2. Remove a background image

    body {
    background-image: none;
    }

Animations

  1. Define your animation

    @keyframes fade-in {
    from:{filter:blur(1rem);}
    to:{filter:blur(0);} }

  2. Apply it to an item

    a{
    animation: fade-in 0.5s;
    }


Widgets

You can create your own shortcodes in layouts/shortcodes.

  1. Create fade-header.html:

    <style>
    @keyframes fade-in{
    from{filter:blur(1rem);}
    to{filter:blur(0px);} } }

    #fade-in:hover{
    animation:fade-in 0.5s;
    }


    <h3 id=“fade-in”>Hover me!</h3>

  2. Insert your widget:

    {{<fade-header>}}

Hover me!

Tags: customization

Valor made by Gabriel