Creating Sub themes in Mukurtu

Creating Sub-themes in Mukurtu

General Drupal Sub-theming

Follow the Drupal documentation for creating sub-themes. In short, you should:

• Create your sub-theme folder (e.g., sites/all/themes/mysubtheme)
• Create your sub-theme info file (e.g., mysubtheme.info):

    name = My Sub-theme
    description = This is a sub-theme of the base theme Mukurtu.
    core = 7.x
    base theme = mukurtu

• Copy favicon.ico and logo.png from the Mukurtu theme or provide your own custom files, these are not inherited from the parent theme.
• Add your CSS files to the info file, such as:

stylesheets[all][]  = css/mysubtheme.css

Mukurtu Specific - Context

After you have your basic sub-theme created, you'll need to decide how to you want to handle block layout. Mukurtu uses the Context module to determine what should be displayed on a page. There are two easy ways to handle our context configuration with your sub-theme.

1. The most simple way is to go to the context configuration page (admin/structure/context) and edit the mukurtu_theme-all_pages context. In the 'Conditions' section, click 'Theme', enable your sub-theme, and click 'Save'. Repeat the process for mukurtu_theme-front_page. This will use the default Mukurtu context for your sub-theme.
2. Alternatively you can clone the default Mukurtu contexts. This is the best option if you intend to make significant structural changes to your site as it will not be overwritten during upgrades. Go to the context configuration page (admin/structure/context) and click 'Clone' on the mukurtu_theme-all_pages context. Change the name and description to reflect your sub-theme's name. In the 'Conditions' section, click 'Theme', enable your sub-theme, and click 'Save'. Repeat the process for mukurtu_theme-front_page.

Mukurtu Specific - Less/CSS

The default Mukurtu theme uses the CSS preprocessor less. There are many ways to change or override the Mukurtu theme's CSS. For simple changes, you can ignore less and specify style-sheets in your .info file as you would for any Drupal theme.

For slightly more complicated changes, you may want to write less files to be processed with the Mukurtu less files, rather than trying to force overrides with CSS after the fact. In this case, copy the 'bootstrap' and 'less' folders from the Mukurtu theme into your sub-theme's folder. In the 'less' folder, copy the 'mukurtu-overrides-blue-gold.less' file and rename it to reflect your sub-theme's name. This file is where you define variables for colors, type-faces, and default graphical accents. Create a central less file to bring all the other less files together (see 'style-blue-gold.less' as an example). An example might look like this:

// Bootstrap library.
@import 'bootstrap';

// Base-theme overrides.
@import 'overrides';
@import 'mysubtheme-overrides';

// Mukurtu Specific
@import 'mukurtu-common-style';

// Add further @import statements for your subtheme here

You will need to install lessc and compile your less files. If your central less file is named 'mysubtheme-style.less' that command might look like lessc mysubtheme-style.less > ../css/mysubtheme.css. You would need to include mysubtheme.css in your theme's .info file.

If you do not want any default Mukurtu theme CSS and only want to use your own, go to admin/appearance/settings and select your sub-theme. In the Mukurtu section, expand 'Color Scheme' and select 'No Mukurtu theme CSS' and save the configuration.