Customising/Themes/17.04: Difference between revisions
From Mahara Wiki
< Customising | Themes
| Line 1: | Line 1: | ||
'''Overview''' | |||
We have moved to using Bootstrap CSS framework since Mahara 15.10. This has enabled us to only add a few changes to make newly created theme looks and feel different from the one it is inherited from. The process of compiling and creating theme remains the same to Mahara 15.10 (link). | We have moved to using Bootstrap CSS framework since Mahara 15.10. This has enabled us to only add a few changes to make newly created theme looks and feel different from the one it is inherited from. The process of compiling and creating theme remains the same to Mahara 15.10 (link). | ||
=What has changed in 17.04 = | |||
== Theme inheritance == | |||
You can now crate new theme based on one of Mahara subthemes; Default, Primary school, Modern and Ocean. There are a few things you will need include in styles.scss of your new theme: | You can now crate new theme based on one of Mahara 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 custom-variables, | ||
| Line 11: | Line 11: | ||
We suggest using subthemestarter to create a new theme so you won't miss any steps. | 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. | - 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. | - 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. | - 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. | - To change child menu toggle colours, simply change values of inverted navbar toggle. | ||
| Line 24: | Line 24: | ||
For more customisation, please see main-nav.scss in Raw theme. You can copy the whole file into your theme or simply override them elements that you would like to change. A good example would be Primary school theme's site menu where is heavily customised, see Primary school theme main-nav.scss file. | For more customisation, please see main-nav.scss in Raw theme. You can copy the whole file into your theme or simply override them elements that you would like to change. A good example would be Primary school theme's site menu where 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. | 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. | ||
Revision as of 16:27, 22 March 2017
Overview We have moved to using Bootstrap CSS framework since Mahara 15.10. This has enabled us to only add a few changes to make newly created theme looks and feel different from the one it is inherited from. The process of compiling and creating theme remains the same to Mahara 15.10 (link).
What has changed in 17.04
Theme inheritance
You can now crate new theme based on one of Mahara 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 them elements that you would like to change. A good example would be Primary school theme's site menu where 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.