Layout And Themes
Learn how to change the visual aspects of CourseLit to make it truly yours and unique.
Last updated
Learn how to change the visual aspects of CourseLit to make it truly yours and unique.
Last updated
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.
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.
Each of these areas are described below.
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.
This section sits after the main content of the page. Here you can add things like comments 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.
+ and - buttons to add or remove components respectively.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 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.
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.
To uninstall a theme, click on the Uninstall button next to the theme's name.
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.
Open your text editor and create an empty JSON object.
Add two required properties i.e. id and name into this JSON object. These properties uniquely identify your theme.
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).
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.
Come chat with us in our official Discord channel.
