# Layout And Themes

CourseLit has two ideas which control the overall aesthetics of your website i.e. Layout and Themes. Each of these are described in the following sections.

To access this area, log in to at `your-site.com/create` and click on the `Design` menu item from the side bar on the left.

## Layout

The layout section controls how various components are distributed over the UI. CourseLit has three potential areas where you can add to or remove components from. 

![CourseLit Layout Designer](/files/-MDeiG8M8gFK1TZOkLDk)

Each of these areas are described below.

### Top Section

This section sits at the very start of your homepage right below the toolbar. This area is perfect for showing components like Featured content etc. 

{% hint style="info" %}
This section is only visible on the home page.
{% endhint %}

### Bottom Section

This section sits after the main content of the page. Here you can add things like comments section.

### Aside Section

This is the conventional aside area where you can put all sort of secondary things like your about section, email newsletter subscription box, etc.

#### Use the `+` and `-` buttons to add or remove components respectively.

## Themes

The themes section allows to change the colors, border styles etc., of CourseLit. You do that with the help of installable themes which are offered [separately](https://github.com/codelitdev/courselit-themes). 

CourseLit's frontend is built using [Material UI Framework](https://material-ui.com/). So it naturally uses the theming framework provided by Material UI. 

The theming system provided by CourseLit also leverages Material UI's theming framework under the hood. Read more about it [here](https://material-ui.com/customization/theming/).

![CourseLit Themes Editor](/files/-MDekoYeOvEwzFEht15A)

### Installing A New Theme

CourseLit offers some open source themes which you can browse [here](https://github.com/codelitdev/courselit-themes). 

Once you have found a theme you are interested in, just copy-paste the JSON content of the theme into the theme editor. 

To access the JSON content of the theme, simply click on its URL.

Once the theme is installed, it will be visible under the `Installed themes` section, from where you can apply, remix or uninstall it.

### Remixing A Theme

You may encounter a situation where you have your favorite theme installed but now you want to change the color of the toolbar. In such cases, you can remix your existing theme to create a copy of it.

Then you can make modifications to this copy and add it as a new theme.

To remix an installed theme, click on the `Remix` button. This will copy the content of the your selected theme into the editor where you can edit it further. 

Once you are satisfied with the changes, press the `Install` button. This will install your remixed theme and it will be visible under the `Installed themes` section.

### Uninstalling A Theme

To uninstall a theme, click on the `Uninstall` button next to the theme's name.

### Authoring A New Theme

Head over to the [theming](https://material-ui.com/customization/theming/) section of Material UI and write your custom theme. Once you have a valid object representing your theme (which you can pass into the `createMUITheme` constructor), follow these steps.

1. Open your text editor and create an empty JSON object.
2. Add two required properties i.e. `id` and `name` into this JSON object. These properties uniquely identify your theme.
3. Add one more property `styles` to the JSON object and its value is the `JSON.stringified` form of your MUI theme object i.e. `JSON.stringify(themeObject)`.
4. You can also add an optional property `url` which specifies the landing page of your theme (in case you want to distribute it that way).

At the end, you will have something like the following.

```
{
   "id": "my_theme",
   "name": "My Theme",
   "styles": "{\"palette\":{\"primary\":{\"main\":\"#fbfbfb\",\"contrastText\":\"#4e4e4e\"},\"secondary\":{\"main\":\"#ec4d37\",\"dark\":\"#eee\"},\"error\":{\"main\":\"#ff1744\"},\"background\":{\"default\":\"#f5f5f5\"},\"contrastThreshold\":3},\"overrides\":{\"drawerWidth\":240}}",
   "url": "https://github.com/codelitdev/courselit-themes/varsha.json"
}
```

## Something's Not Clear?

Come chat with us in our [official Discord channel](https://discord.com/invite/GR4bQsN).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codelit.gitbook.io/courselit/administration-1/layout-and-themes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.