Layout And Themes

Learn how to change the visual aspects of CourseLit to make it truly yours and unique.

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

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.

This section is only visible on the home page.

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.

CourseLit's frontend is built using Material UI Framework. 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.

CourseLit Themes Editor

Installing A New Theme

CourseLit offers some open source themes which you can browse here.

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 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.