Customising/Themes/17.04: Difference between revisions
From Mahara Wiki
< Customising | Themes
| (11 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
'''Overview'''<br /> | |||
We have moved to using Bootstrap CSS framework since Mahara 15.10. And it has enabled us to only add a few changes to newly created theme in order to make it look and feel different from the one it is inherited from. '''The process of compiling and creating theme remains the same to [[Customising/Themes/15.10|Mahara 15.10]].''' | |||
=What has changed in 17.04 = | |||
== Theme inheritance == | |||
You can now create a new theme based on one of Mahara's subthemes; Default, Primary school, Modern and Ocean. <br /> | |||
There are a few things you will need include in styles.scss of your new theme: | |||
* parent theme custom-variables, | |||
* parent theme index.scss, | |||
* parent theme custom styles | |||
We suggest using '''subthemestarter''' to create a new theme so you won't miss any steps. | |||
== Navigation == | |||
We updated navigation styles to collapsible style navigation similar to the existing navigation. As a result, only one set of navigation is loaded instead of two. New navigation also takes up less space on your screen especially on larger screen size. | We updated navigation styles to collapsible style navigation similar to the existing navigation. As a result, only one set of navigation is loaded instead of two. New navigation also takes up less space on your screen especially on larger screen size. | ||
=== | === Styling top level navigation items and toggles === | ||
* In your theme Bootstrap variables under "Navbar", changing $navbar-default related values will change the colours of top level navigation such as Dashboard, Portfolio for site menu, Configure site, Extension for admin menu, Settings, Notification for user menu. | |||
* To change main menu toggle colours, simply change values of navbar-default-toggle. | |||
=== Styling second level navigation items and toggles === | |||
* Changing $navbar-inverse related values will change the colours of child navigation items such as Profile, My grounps for site menu, Site options, User search for admin menu and Settings and Notification settings for user menu. | |||
* To change child menu toggle colours, simply change values of inverted navbar toggle. | |||
For more customisation, please see main-nav.scss in Raw theme. You can copy the whole file into your theme or simply override elements that you would like to change. A good example would be Primary school theme's site menu where it is heavily customised, see Primary school theme main-nav.scss file. | |||
- | |||
= Not so obvious = | |||
A few components requires some JavaScript such as header position when there are site messages, also some elements require certain pattern of mark up for the styles to work. Any mark up changes may result in missing styles or elements not behaving like they are supposed to. Having developer tool bar on can help you debug. | |||
[[Category:Customising]] | |||
Latest revision as of 13:54, 20 September 2019
Overview
We have moved to using Bootstrap CSS framework since Mahara 15.10. And it has enabled us to only add a few changes to newly created theme in order to make it look and feel different from the one it is inherited from. The process of compiling and creating theme remains the same to Mahara 15.10.
What has changed in 17.04
Theme inheritance
You can now create a new theme based on one of Mahara's subthemes; Default, Primary school, Modern and Ocean.
There are a few things you will need include in styles.scss of your new theme:
- parent theme custom-variables,
- parent theme index.scss,
- parent theme custom styles
We suggest using subthemestarter to create a new theme so you won't miss any steps.
We updated navigation styles to collapsible style navigation similar to the existing navigation. As a result, only one set of navigation is loaded instead of two. New navigation also takes up less space on your screen especially on larger screen size.
- In your theme Bootstrap variables under "Navbar", changing $navbar-default related values will change the colours of top level navigation such as Dashboard, Portfolio for site menu, Configure site, Extension for admin menu, Settings, Notification for user menu.
- To change main menu toggle colours, simply change values of navbar-default-toggle.
- Changing $navbar-inverse related values will change the colours of child navigation items such as Profile, My grounps for site menu, Site options, User search for admin menu and Settings and Notification settings for user menu.
- To change child menu toggle colours, simply change values of inverted navbar toggle.
For more customisation, please see main-nav.scss in Raw theme. You can copy the whole file into your theme or simply override elements that you would like to change. A good example would be Primary school theme's site menu where it is heavily customised, see Primary school theme main-nav.scss file.
Not so obvious
A few components requires some JavaScript such as header position when there are site messages, also some elements require certain pattern of mark up for the styles to work. Any mark up changes may result in missing styles or elements not behaving like they are supposed to. Having developer tool bar on can help you debug.