# Themes

The default layout and features of comic\_git are intended to appeal to as many people as possible, but if you really get into customizing your website to fit your needs, you'll probably want to modify the pages themselves, or even add extra pages. This is where themes come in.

comic\_git has a default theme, which can be found at `/your_content/themes/default/`. Initially, this folder contains just the `stylesheet.css` and `fonts.css` files in the `css` directory, which defines things like the colors and fonts of your website. However, this folder can be used to make even bigger changes to your website.

## Editing Existing Pages

Let's say you wanted to edit the layout of your comic pages, perhaps to do something like add an image between the Previous and Next links.

To do this, first create a templates folder in `/your_content/themes/default/`.

Go to [comic\_git\_engine's templates folder](https://github.com/comic-git/comic_git_engine/tree/master/templates) and find the file you want to change. For comic pages it's `comic.tpl`, for the archive page it's `archive.tpl`, and so on. Open the dropdown for the full list of templates if you aren't sure which one you need.

<details>

<summary>Available templates</summary>

* [404.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/404.tpl) is the layout of the "404 Not Found" page that appears if someone tries to access a page on your site that doesn't exist.
* [archive.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/archive.tpl) is the layout of the Archives page.
* [base.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/base.tpl) is the base template which all the other templates use. If something you want to change is present across the entire site, it's probably in here.
* [comic.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/comic.tpl) is the layout of the individual comic pages.
* [index.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/index.tpl) is the layout of the home page. Edit this file for a more powerful way to update your than with `home page.txt`, including being able to use Jinja variables. See also [List of Values Available to Jinja2 Templates](https://comic-git.gitbook.io/documentation/expert-editing/other-expert-tips#list-of-values-available-to-jinja2-templates)
* [infinite\_scroll.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/infinite_scroll.tpl) is the layout for the infinite scroll comics page.
* [latest.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/latest.tpl) is the layout for the latest comic page. This differs slightly from the individual comic pages in that comic\_git will always update this one to show the most recent (by post date) comic.
* [md\_page.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/md_page.tpl) is the layout for any .md (Markdown) files present on the site.
* [tagged.tpl](https://github.com/comic-git/comic_git_engine/blob/master/templates/tagged.tpl) is the layout of the page that displays all comic pages a clicked character or tag appears in.

</details>

Copy the file(s) you want to change into `/your_content/themes/default/templates/`. You can then freely edit the template file, and it will override the file in comic\_git\_engine. You can use any text editor to edit templates.

For our example, you would first place the image in your `your_content/images` folder, then copy the comic.tpl file into your repo and open it in your favorite text editor. You'll notice it sort of looks like HTML but has a lot of extra stuff, primarily a lot of if, else, and words in double curly braces `{{}}`. This is Jinja markup, as described in the next section.

You'll look for any place that has the Previous and Next links — there may be multiple, as different HTML will be used based on if/else conditions — then add `<img alt="My Image" src="{{base_dir}}/your_content/images/my-image.jpg">` (or whatever the filename might be). Save the template file, and next time you push the commit to your repo, the comic page will be built with your image in that place!

{% hint style="info" %}
Editing the `comic.tpl` can be very intimidating. The version in `comic_git_engine` has a lot of if blocks and conditions to support all the configuration options in comic\_git. If all that Jinja nonsense is too confusing for you, I've made [a version of that template](https://raw.githubusercontent.com/comic-git/comic_git_engine/refs/heads/master/extras/comic_minimal.tpl) that strips out as much extraneous text as possible to make modifying it easier.&#x20;

To use this file, just copy it into your `templates` folder as described above and rename it to `comic.tpl` . You can then edit it to your heart's content.
{% endhint %}

### Jinja Template Format

Template files are written in a format called [Jinja](https://jinja.palletsprojects.com/en/2.11.x/templates/). Jinja is an incredibly powerful tool that lets you create files that can be converted into HTML files using code like for loops, if/else blocks, and variables acting as placeholders for values passed in by the comic\_git script. I've done my best to comment the existing template files in the comic\_git\_engine templates directory to help clarify how to use Jinja for anyone curious enough to go poking around.

I recommend using Jinja templates whenever you're making pages for your website, as they provide a lot of flexibility and power that you won't get from normal HTML pages. For more information on the details of Jinja and the variables available to your templates when they're built, see [Other Expert Tips](https://comic-git.gitbook.io/documentation/expert-editing/other-expert-tips#the-power-of-jinja2).

### HTML Format

If you prefer to not mess with Jinja templates for your first attempt at editing your website, that's fine, too! comic\_git also allows plain HTML files. Instead of creating a \*.tpl file in the `/your_content/themes/default/templates/` directory, make a .html file instead. The easiest way to start is to go to the page you want to edit in your web browser, right click on the page, go to **View Source**, and just copy all that text into the \*.html file.

Creating HTML files is **NOT** recommended for most pages that have content that will change as you update the rest of your website, like comic pages, the archive page, and tagged pages. Jinja template files are required to keep these pages up to date whenever the website is built. However, using HTML files will usually be just fine when adding new pages to your website that don't come pre-packaged by default in comic\_git.

### Markdown Format

If you want to create very simple page, like an "About Me" page, and are familiar with [Markdown](https://www.markdownguide.org/), you can create files with that instead of HTML or Jinja!

Just create a `pages` folder in your theme folder (e.g., `/your_content/themes/default/pages/` ), and create your Markdown files there. Make sure to name it with an `.md` extension, like `about.md`.

{% hint style="info" %}
If multiple template files exist with the same name (e.g., `about.tpl`, `about.html`, and `about.md`), the files will be loaded in the following order. The first file loaded is the one that will be rendered for the website.

* Markdown
* HTML
* Jinja
  {% endhint %}

## Adding New Pages

Adding new pages to your website beyond what's already provided by comic\_git is very similar to editing existing pages, with a few small changes. You'll usually want to start with copying an existing template or HTML file to use as a starting point, but give it its own unique name. You will also want to put it in the `/your_content/themes/default/templates/` directory. Then, you'll need to add the file name to the \[Pages] section of your [comic\_info.ini](https://comic-git.gitbook.io/documentation/basic-editing/editing-your-comic-info#pages) file. For example, if you're creating a `cast.html` file, you should add the line `cast = Cast Page`.

If you need to create a large number of pages that can change every time the website is built, like a cast page for each character, you may want to make use of the `build_other_pages` code hook. See [Code Hooks](https://comic-git.gitbook.io/documentation/expert-editing/code-hooks) for more information.

## Creating Your Own Themes

You may eventually want to create your own theme from scratch, rather than editing the default one. comic\_git is designed so that you can easily switch between themes without having to delete or edit existing files.

To do so, make a copy of the `default` theme directory, change the name to whatever you like, and edit the contents in there as described in the previous two sections. Then, in `comic_info.ini`, add a line under [\[Comic Settings\]](https://comic-git.gitbook.io/documentation/basic-editing/editing-your-comic-info#comic-settings) that says `Theme =` followed by the folder name for your desired theme.

## Using Existing Themes

You don't have to make your own Theme from scratch, either. comic\_git comes with a few themes for you to play around with. The `geocities` theme is just a fun way to show off how flexible comic\_git can be, and `homepage_is_latest_comic` makes the home page for your comic mirror the latest comic page.

To choose either of these existing themes, in `comic_info.ini`, add a line under [\[Comic Settings\]](https://comic-git.gitbook.io/documentation/basic-editing/editing-your-comic-info#comic-settings) that says `Theme =` followed by the folder name for your desired theme. E.g., `Theme = geocities`. Then, just rebuild your website and comic\_git will use this new theme!

Themes can also be shared between different comic\_git powered websites! As long as all the files required for a theme to work are somewhere in the theme directory, you can just send the whole theme directory to a friend who's also using comic\_git, and they can try out your theme on his own site!