Drupal provides a simple way to inherit the base themes through the concept called subtheme.
Advantages of Creating Sub theme:
- No need of hacking the core themes
- All the styles of base theme will be inherited to sub theme, less coding
Lets see how to create a sub theme in drupal. For this example i have used bartik theme as base theme.
Step 1: Create a new folder in sites/all/themes/ path as shown below
eg: sites/all/themes/mydons/
Step 2: To create a new theme we need to write the .info file. Our sub theme is named as mydons so we need to create mydons.info file. Since we are creating a sub theme we need to specify the directive as base theme = bartik
Except the name,description and base theme directive other directives looks same as base theme.
The final version of mydons.info looks as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
name = Mydons description = A Demo of Mydons Subtheme inherited from Bartik core = 7.x base theme = bartik stylesheets[all][] = css/mystyle.css regions[header] = Header regions[help] = Help regions[page_top] = Page top regions[page_bottom] = Page bottom regions[highlighted] = Highlighted regions[featured] = Featured regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[triptych_first] = Triptych first regions[triptych_middle] = Triptych middle regions[triptych_last] = Triptych last regions[footer_firstcolumn] = Footer first column regions[footer_secondcolumn] = Footer second column regions[footer_thirdcolumn] = Footer third column regions[footer_fourthcolumn] = Footer fourth column regions[footer] = Footer |
Step 3: For this subtheme i created a single css file called mystyle.css under css directory in our subtheme. You can have any name for your stylesheet and it must be specified in your theme .info file as stylesheets[all][] = css/mystyle.css
I have just included a single line in mystyle.css as shown below
|
1 2 3 4 5 6 |
/================ mystyle.css ================/ /* Change all H1 tag color to Red */ h1 { color: #FF0000; } |
Step 4: Now go to drupal admin and check whether the new theme is listed. if it is listed click the Enable and set default link as shown below
Step 5: Finally the Performance cache needs to be cleared to view the change.
The final output of our theme looks as shown below
