Difference between revisions of "Customising/Themes/17.04"
From Mahara Wiki
< Customising | Themes
(Created page with "= 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 differ...")
Revision as of 16:22, 22 March 2017
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.10
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.
To style top level navigation items and toggle: - 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 style second level navigation items and 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