
Introduction
Eevee is a theme for Pelican, based on Google’s Material Design specification. It is named after the Pokémon Eevee because — like the Pokémon — it can evolve in to many ‘elemental types.’
Features
- Built around Google’s Material Design specification on top of Goole’s Material Design Lite library,
- configurable colour scheme (see Primary and accent colours),
- responsive layout with mobile friendly header and navigation scheme,
- inclusion of a custom.css file allowing easy overwriting of the theme without breaking the base CSS (see Custom CSS),
- DNS prefetch (see DNS prefetch),
- comments via Disqus or Muut (see Disqus or Muut for comments),
- share buttons for Twitter, Facebook, email and comments (see Sharing options),
- Twitter and Open Graph meta tags (see Sharing options),
- CSS and JS minifying via webassets, cssmin and jsmin (see Plugin: Minimise CSS and JavaScript),
- analytics from Google Analytics, Piwik, GoSquared and Open Web Analytics (see Google Analytics, Piwik, Open Web Analytics and GoSquared),
- easy customisation, including menus and footer (see Header and footer options),
- custom 404 error page,
- Microdata,
- Aria accessibility,
- includes Material Icons, Font Awesome and Google’s Roboto font and,
- seamless feature upgrade with Material Design Lite’s Javascript library.
Plugins supported out-of-the-box
Eevee ships with all the HTML, CSS and JavaScript required for the following plugins but does not need any of them to function correctly. If a plugin is supported but not used, the HTML, CSS and JavaScript simply won’t be included.
- assets (see Plugin: Minimise CSS and JavaScript section for more information),
- extract_toc ( see Table of contents for articles and pages section for more information),
- headerid (see Plugin: Permalinks in headlines section for more information),
- lightbox,
- neighbors,
- related_posts (see Plugin: Related articles section for more information),
- series (see Plugin: Articles in a series section for more information) and,
- tipue_search ( see Plugin: Search functionality section for more information.)
Typography

Google’s Roboto font is used for typography, Material Icons and Font Awesome are included too.
Screenshots
Installation
Download the latest Eevee release from GitHub and extract it in to your Pelican website directory and rename the directory to eevee.
Install the theme using pelican-themes.
pelican-themes -i eevee
All you need to do after that is set the THEME variable to eevee in your pelicanconf.py.
THEME = "eevee"
Customising Eevee
Primary and accent colours
The primary and accent colours are configured using the THEME_PRIMARY and THEME_ACCENT options respectively.
You can find available primary and accent colours on Material Design Lite. This website also shows you accents that won’t work well with the primary colour you choose.
THEME_PRIMARY = "blue"
THEME_ACCENT = "amber"
By default the colour scheme is blue grey for the primary and pink for the accent.
THEME_PRIMARY = "blue_grey"
THEME_ACCENT = "pink"
Custom CSS
Inside the Eevee static folder is a custom.css file. Anything added to this file will overwrite any of the core CSS. You can use this file to modify any part of the interface you wish, including changing the Pygments CSS.
This allows you to tinker with the design as much as you like without breaking the core theme.
Setting your own copyright notice and disclaimer
You can change the disclaimer and copyright notice displayed in the footer with the following variables.
DISCLAIMER = "Powered by love & rainbow sparkles."
COPYRIGHT = """Source code and content are released under the <a href="/license/">MIT license</a>."""
You can see either or both to False to disable these notices being displayed.
DISCLAIMER = False
COPYRIGHT = False
The default values for these are as below, although you are under no obligation to keep either of them.
DISCLAIMER = "Powered by love &amp; rainbow sparkles."
COPYRIGHT = """<a href="https://kura.gg/eevee/" title="Eevee">Eevee</a> theme by <a href="https://kura.gg/" title="kura.gg">kura.gg</a>"""
Table of contents for articles and pages
A table of contents section is added to an article or page if it exists as a variable called toc in the article or page object.
The extract_toc adds a toc option for RST and Markdown content.
The extract_toc plugin adds an ugly header element by default, I have a modified version on GitHub that returns nicer HTML.
Author card
The author card is disabled by default, below are instructions on enabling it and customising it.
Enabling the author card
Enabling the author card is as simple as setting an option in pelicanconf.py.
USE_AUTHOR_CARD = True
You can disable it by setting to False or removing the setting entirely.
USE_AUTHOR_CARD = False
Using your own avatar
A default avatar placeholder is provided with the theme, you can easily use your own avatar by setting an option in pelicanconf.py.
AUTHOR_CARD_AVATAR = "/images/kura.png"
The maximum size that you should use are 250x250 pixels.
Setting a description
Like all the other options above, setting a description for your author card requires a single config option.
AUTHOR_CARD_DESCRIPTION = "My name is Kura and I break things."
You can add HTML and other various things to this description.
Dynamically disabling author card on an article or page
As of Eevee version 0.0.12, it is now possible to disable the author card feature on a per-article or per-page basis using metadata.
Using reStructuredText:
Example title
#############
:slug: example
:author_card: False
Using Markdown:
Title: Example title
Slug: example
Author_card: False
Disqus or Muut for comments
You can only enable Disqus or Muut, not both. Disqus takes priority over Muut in terms of how the configuration variables are handled.
Disqus
DISQUS_SITENAME = "somethinghere"
Setting this option will enable Disqus for articles.
Muut
MUUT_SITENAME = "somethinghere"
Setting this option will enable Muut for articles.
Comments on pages
You can display comments on pages as well as articles with the following option. By default this is disabled.
COMMENTS_ON_PAGES = True
Dynamically disabling comments on an article or page
As of Eevee version 0.0.12, it is now possible to disable comments on a per-article or per-page basis using metadata.
Using reStructuredText:
Example title
#############
:slug: example
:comments: False
Example content
Using Markdown:
Title: Example title
Slug: example
Comments: False
Example content
Sharing options
Options
USE_OPEN_GRAPH = True
If set, Open Graph meta tags will be added.
USE_TWITTER_CARDS = True
If set, Twitter meta tags will be added.
TWITTER_USERNAME = "kuramanga"
Used in conjunction with USE_TWITTER_CARDS, adds the “via” meta tag.
Adding an image to Open Graph and Twitter meta tags
There are two ways of adding an image to Twitter and Open Graph so that when someone shares your content, an image will be added too.
You can add og_image to the file metadata of an article or page, allowing you to configure and image to use per item.
Using reStructuredText:
Example title
#############
:slug: example
:og_image: /images/example.png
Example content
Using Markdown:
Title: Example title
Slug: example
Og_image: /images/example.png
Example content
Or you can set OPEN_GRAPH_IMAGE to an image location in the pelicanconf.py settings file and adding the relevant directory to the STATIC_PATHS and EXTRA_PATH_METADATA settings.
OPEN_GRAPH_IMAGE = "/images/example.png"
STATIC_PATHS = [
# ...
"images",
# ...
]
EXTRA_PATH_METADATA = {
# ...
"images": {"path": "images"},
# ...
}
Archives
Eevee supports full archives and archives broken down by year and month.
To enable the full archive section, you need to enable the relevant setting in your pelicanconf.py file.
ARCHIVES_URL = "archives.html"
ARCHIVES_SAVE_AS = "archives.html"
Enabling the periodic archives for year and/or month is as simple as enabling their respective options in pelicanconf.py
YEAR_ARCHIVE_SAVE_AS = "{date:%Y}/index.html"
MONTH_ARCHIVE_SAVE_AS = "{date:%Y}/{date:%m}/index.html"
More information on archive settings can be found in the Pelican documentation.
Google Analytics, Piwik, Open Web Analytics and GoSquared
All four of these options can be enabled at the same time, should you wish to do so.
Google Analytics
GOOGLE_ANALYTICS = "abc1234"
Piwik
PIWIK_SITE_ID = "123456"
PIWIK_URL = "example.com"
# PIWIK_SSL_URL = "" # Defaults to https://PIWIK_URL
Open Web Analytics
OWA_SITE_ID = "123456"
OWA_URL = "https://example.com/owa/"
GoSquared
GOSQUARED_SITENAME = "123456"
Feeds
You can use the FEED_RSS and FEED_ATOM options to enable RSS and Atom feeds respectively.
FEED_RSS = "feeds/rss.xml"
FEED_ATOM = "feeds/atom.xml"
Category and tag pages
To display all articles in specific categories or tags, you need to add the relevant settings.
An example for categories is below.
CATEGORY_URL = "category/{slug}/"
CATEGORY_SAVE_AS = "category/{slug}/index.html"
CATEGORIES_URL = "categories/"
CATEGORIES_SAVE_AS = "categories/index.html"
DIRECT_TEMPLATES = [
# ...
"categories",
# ...
]
And below is an example for tags.
TAG_URL = "tag/{slug}/"
TAG_SAVE_AS = "tag/{slug}/index.html"
TAGS_URL = "tags/"
TAGS_SAVE_AS = "tags/index.html"
DIRECT_TEMPLATES = [
# ...
"tags",
# ...
]
Plugin: Search functionality
Eevee is configured to work with tipue_search out-of-the-box, all you need to do is enable the plugin and add the search template setting.
PLUGINS = [
# ...
"tipue_search",
# ...
]
DIRECT_TEMPLATES = [
# ...
"search",
# ...
]
Plugin: Permalinks in headlines
reStructuredText does not add anchors to headings by default, adding reference links on headings means you can send the link to someone and have the browser automatically display the relevant section.
Eevee is configured out-of-the-box to support adding these references using the headerid plugin.
Plugin: Articles in a series
Series article functionality is provided by the series plugin.
Installing it will automatically enabled the functionality within Eevee.
PLUGINS = [
# ...
"series",
# ...
]
Plugin: Minimise CSS and JavaScript
To minimise/compress all CSS or JavaScript, simply install the assets plugin.
Eevee is configured to automatically compress all CSS and JavaScript files it uses if the assets plugin is enabled, including files related to the search functionality.
PLUGINS = [
# ...
"assets",
# ...
]
Advanced pagination
By default, Eevee will display pagination links on the index page of articles. Enabling the neighbors will automatically add a previous and next button to the article page, allowing pagination without going back to the index page.
The default Pelican pagination settings are not very pleasing, for more information on how to customise them to better and be more intuitive please look at the Pelican documentation.
DNS prefetch
DNS prefetching is enabled by default and managed automatically.
The following features will have respective DNS prefetch settings that will be applied if the feature is enabled;
- Disqus,
- Piwik,
- GoSquared,
- Google Analytics and,
- Open Web Analytics.
For example, the following would be applied if you had Disqus and Google Analytics enabled.
<link rel="dns-prefetch" href="EXAMPLE.COM">
<link rel="dns-prefetch" href="//code.getmdl.io">
<link rel="dns-prefetch" href="//disqus.com">
<link rel="dns-prefetch" href="//a.disquscdn.com">
<link rel="dns-prefetch" href="//EXAMPLE.disqus.com">
<link rel="dns-prefetch" href="//glitter-services.disqus.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
All configuration settings
Setting name | Default | Description |
---|---|---|
SITENAME | The title of your website | |
AUTHOR | Your name | |
THEME_PRIMARY | blue_grey | Primary colour scheme |
THEME_ACCENT | pink | Accent colour scheme |
MEGA_FOOTER | True | Display the mega footer |
DISCLAIMER | Disclaimer displayed on the footer | |
COPYRIGHT | Copyright notice displayed on the footer | |
USE_AUTHOR_CARD | False | Display about author card on articles |
AUTHOR_CARD_ON_PAGES | False | Display about author card on pages |
AUTHOR_CARD_AVATAR | /theme/images/default_avatar.png | Avatar to display on the author card |
AUTHOR_CARD_DESCRIPTION | Description to display on the author card | |
AUTHOR_CARD_SOCIAL | SOCIAL | Social media links to display on the author card |
MENUITEMS | [] | Displayed on header and mega footer |
LINKS | [] | Blogroll to display on the mega footer |
SOCIAL | [] | Social links to display on the menu and mega footer |
DISPLAY_PAGES_ON_MENU | False | Display pages on the menu and mega footer |
DISPLAY_CATEGORIES_ON_MENU | False | Display categories on the menu and mega footer |
COMMENTS_ON_PAGES | False | Add Diqus or Muut comments on pages |
MUUT_SITENAME | Muut unique identifier for the website | |
DISQUS_SITENAME | Disqus unique identifier for the website | |
USE_OPEN_GRAPH | False | Add Open Graph meta tags |
USE_TWITTER_CARDS | False | Add Twitter meta tags |
TWITTER_USERNAME | Add your Twitter username to mega tags | |
OPEN_GRAPH_IMAGE | Add an image to Twitter and Open Graph | |
OWA_SITE_ID | OWA unique identifier for the website | |
OWA_URL | URL to the OWA installation | |
PIWIK_SITE_ID | Piwik unique identifier for the website | |
PIWIK_URL | URL to the Piwik installation | |
PIWIK_SSL_URL | PIWIK_URL | Secure URL to the Piwik installation |
GOOGLE_ANALYTICS | Google Analytics unique identifier for the website | |
ARCHIVES_URL | URL for archives and add a menu item for it | |
ARCHIVES_SAVE_AS | Location to save archives | |
MONTH_ARCHIVE_SAVE_AS | Location to save monthly archives | |
YEAR_ARCHIVE_SAVE_AS | Location to save yearly archives | |
FEED_RSS | Enable the RSS feed and add a menu item for it | |
FEED_ATOM | Enable the Atom feed and add a menu item for it |
Additional tweaks and modifications
Additional things you can tweak and modify are available on kura.gg.
Changelog
0.0.12
Updated share colours to be from the Material Design palette.
Added some automatic colouring of links/icons for AUTHOR_CARD
Added ability to disable comments and author_card for a specific page or article using metadata.
Using reStructuredText:
Example title ############# :slug: example :author_card: False :comments: False
Using Markdown:
Title: Example title Slug: example Author_card: False Comments: False
0.0.11
- Stop using base64 fonts, dumb idea to begin with.
- Tidy up font sizes in headers.
0.0.6
- Updated archive templates so they aren’t terrible.
- archive will automatically links to year and month archives if YEAR_ARCHIVE_SAVE_AS or MONTH_ARCHIVE_SAVE_AS are set.
- partial_archives template now works as expected instead of showing every article.
- Added archive to header and footer menus.
0.0.5
- Template clean up, mostly making the HTML itself look prettier to edit.
- Added aria labels to elements to improve accessibility.
- Added structures to articles and pages, using schema.org additional markup.
0.0.4
- Accidentally messed up Disqus and variable names where not used, so comments didn’t actually work properly…
- Load fonts from base64 in the CSS file.
0.0.3
- Add ability to use muut instead of Disqus using MUUT_SITENAME variable.
- Make the share buttons nicer.
- Added “back to top” links.
0.0.2
- Replace vh definitions with em for ribbon.
- Replace truetype fonts with woff2 and woff.
0.0.1
- Eevee released
License
Eevee is released under the MIT license which is also outlined below.
(The MIT License) Copyright (c) 2016 Kura Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Social buttons
By default, the author card section will display links from your SOCIAL list.
This isn’t always what you want though.
The SOCIAL list is used in other parts of the theme and the format may not look good added to your author card.
To make things more flexible, the author card section can have it’s own social links.
Some default styling rules are included with Eevee, they are as follow:
You can add your own new styles or overwrite an existing style using the href selector.
For example, adding a selector style for https://kura.gg would be done like the example below.