Search code examples
twitter-bootstrappelicanbootswatch

Pelican static site generator change fontsize


Dose anyone can give me a hint on how to change the fontsize with CSS for a Pelican Site. I use the pelican-bootstrap3 theme.

I do not want to fork and modify the Theme. I would like to change the size with the custom.css feature.

thanks for the help mathias


Solution

  • Check out the pelican-bootstrap-3 help page on github.

    What you can do is make a custom.css file that looks like this:

    html {
       font-size:150%
    }
    

    The trick is putting your custom.css file in your content folder and telling pelican where it is and then where it should be put in your output. You must also tell the pelican-bootstrap-3 theme where this file is and it will add it to the headers in your rendered output.

    First, generally you would make a folder called extras in your content folder and put your custom.css file in there. This is where the path notation on the github page comes in:

    extras/custom.css
    

    You must now edit your pelicanconf.py file to tell pelican where this file is located, and also to give this information to pelican-bootstrap-3. Add this to yours:

    # tell pelican where your custom.css file is in your content folder
    STATIC_PATHS = ['extras/custom.css']
    
    # tell pelican where it should copy that file to in your output folder
    EXTRA_PATH_METADATA = {
    'extras/custom.css': {'path': 'static/custom.css'}
    }
    
    # tell the pelican-bootstrap-3 theme where to find the custom.css file in your output folder
    CUSTOM_CSS = 'static/custom.css'