# Theme

Each theme allow you to build several websites based on the same design and the same functionalities. A theme is made of:

* html (page / block / list / header / footer )
* assets : css, js, image, etc …
* variables, locales, module items
* each element's configuration (ex: syndicated block? Multi language-variable?)

All these elements will manages the level of functionality and flexibility of the websites that will be built on. It will list the different page templates the user can create, the variables available in each block, etc...

## **How is a theme built ?**

|                    |                                                         |
| ------------------ | ------------------------------------------------------- |
| **HEAD**           | common code for all pages (ex: link assets files)       |
| **HEADERs**        | (same for all pages) : navigation, language switcher... |
| **PAGE TEMPLATEs** | ex contact template, room detail template...            |
| **FOOTERs**        | (same for all pages)                                    |
| **BOTTOM**         | common code for all pages (ex: link assets files)       |

## **Theme structure**

Each theme is made of a **folder** containing your different files:

* HTML templates code
* Assets (CSS, JS, images)
* Configuration files (your pages, blocks, variables options...)

{% hint style="danger" %}
The **unique** **key** of the theme is the name of the folder container your theme. \
Do not change the name of the folder containing your theme, or it would create a new theme
{% endhint %}

Example of folder structure

{% code title="Content of the folder "integration" that contains all your themes" %}

```
.
+-- theme1
+-- theme2
|   +-- block
|       |-- introduction
|       |-- introduction.html
|   +-- footer
|   +-- function
|       |-- language-switcher.html
|   +-- header
|   +-- list
|   +-- page
|       |-- home.html
|       |-- free-content.html
|       |-- contact.html
|   +-- public
|       |-- css
|       |-- js
|       |-- images
|       |-- fonts
|   +-- sass
|       |-- main.scss
|   +-- theme
|   +-- config.rb
+-- theme3
```

{% endcode %}

This contains 3 themes, **theme1**, **theme2**, **theme3**\
**theme2** has an example of the basic structure you can find in themes

| Filename  | What is it?                                                                                       |
| --------- | ------------------------------------------------------------------------------------------------- |
| block     | **required** folder containing all your blocks                                                    |
| footer    | **required**                                                                                      |
| function  | **required**                                                                                      |
| header    | **required**                                                                                      |
| list      | **required**                                                                                      |
| page      | **required**                                                                                      |
| public    | Here is when you can put all your assets                                                          |
| sass      | **required** - Galaxy uses this folder to compile your CSS                                        |
| theme     | **required -** It contains your theme configuration (name of theme, description, options, etc...) |
| config.rb | **required** - This allows Galaxy to compile your CSS                                             |
