2017-10-01 03:51:43 +00:00
+++
title = "Installing & using themes"
weight = 20
+++
## Installing a theme
2019-01-04 21:00:58 +00:00
The easiest way to install a theme is to clone its repository in the `themes`
2023-03-05 19:41:06 +00:00
directory:
2017-10-01 03:51:43 +00:00
```bash
$ cd themes
2023-03-05 19:41:06 +00:00
$ git clone < theme repository URL >
2017-10-01 03:51:43 +00:00
```
Cloning the repository using Git or another VCS will allow you to easily
2019-11-26 19:30:30 +00:00
update. Alternatively, you can download the files manually and place
2017-10-01 03:51:43 +00:00
them in a folder.
2019-11-26 19:30:30 +00:00
You can find a list of themes [here ](@/themes/_index.md ).
2018-10-08 11:08:41 +00:00
2017-10-01 03:51:43 +00:00
## Using a theme
2019-11-26 19:30:30 +00:00
Now that you have the theme in your `themes` directory, you need to tell
Zola to use it by setting the `theme` variable in the
2019-05-27 12:35:14 +00:00
[configuration file ](@/documentation/getting-started/configuration.md ). The theme
2019-11-26 19:30:30 +00:00
name has to be the name of the directory you cloned the theme in.
2017-10-20 10:35:23 +00:00
For example, if you cloned a theme in `themes/simple-blog` , the theme name to use
2021-03-06 20:12:21 +00:00
in the configuration file is `simple-blog` . Also make sure to place the variable in the top level of the
`.toml` hierarchy and not after a dict like [extra] or [markdown].
2023-05-19 10:44:40 +00:00
Some themes require additional configuration before they can work properly. Be sure to follow the instructions found on your chosen theme's documentation to properly configure the theme.
2017-10-01 03:51:43 +00:00
## Customizing a theme
2020-09-04 20:53:31 +00:00
Any file from the theme can be overridden by creating a file with the same path and name in your `templates` or `static`
2019-11-26 19:30:30 +00:00
directory. Here are a few examples of that, assuming that the theme name is `simple-blog` :
2017-10-01 03:51:43 +00:00
2021-11-23 21:58:51 +00:00
```
2018-08-05 09:49:50 +00:00
templates/pages/post.html -> replace themes/simple-blog/templates/pages/post.html
templates/macros.html -> replace themes/simple-blog/templates/macros.html
2017-11-17 21:40:41 +00:00
static/js/site.js -> replace themes/simple-blog/static/js/site.js
2017-10-01 03:51:43 +00:00
```
2019-11-26 19:30:30 +00:00
You can also choose to only override parts of a page if a theme defines some blocks by extending it. If we wanted
2018-08-05 09:49:50 +00:00
to only change a single block from the `post.html` page in the example above, we could do the following:
```
{% extends "simple-blog/templates/pages/post.html" %}
{% block some_block %}
Some custom data
{% endblock %}
```
2020-09-04 20:53:31 +00:00
Most themes will also provide some variables that are meant to be overridden. This happens in the `extra` section
2019-05-27 12:35:14 +00:00
of the [configuration file ](@/documentation/getting-started/configuration.md ).
2018-08-05 09:49:50 +00:00
Let's say a theme uses a `show_twitter` variable and sets it to `false` by default. If you want to set it to `true` ,
2017-10-01 03:51:43 +00:00
you can update your `config.toml` like so:
```toml
[extra]
2020-04-22 07:48:08 +00:00
show_twitter = true
2017-10-01 03:51:43 +00:00
```
2019-11-26 19:30:30 +00:00
You can modify files directly in the `themes` directory but this will make updating the theme harder and live reload
won't work with these files.