Drupal

Creating a Subtheme of Bartik in Drupal 7

Drupal makes it very easy to modify a theme, and still be able to apply updates to that heme as they are released. This is done with a subtheme. Essentially, it is a level on top of an existing theme that changes that theme. Leaving the underlying theme untouched. Any updates to the underlying theme can be easily applied without having to repatch changes.

To implement a subtheme of, say, Bartik

  • create a folder called yourtheme in /sites/yourdomain.com/themes
  • create a file called yourtheme.info in that folder
name = Your Theme
description = your description here
core = 7.x  
base theme = bartik

You need to add at least one style sheet. Then the stylesheets of the master theme will be inherited.

  • Create a subfolder called css in /sites/yourdomain.com/themes/yourtheme
  • Create a file style.css in that folder
  • Add any CSS commands to modify the master theme you want into this file.
  • Add the following line into the yourtheme.info file
stylesheets\[all\]\[\] = css/style.css

All javascript from the master theme will be inherited automatically.

No regions will be inherited. These will all need to be copied over from the master theme’s .info file.

  • Copy the regions from the master theme’s .info file into the yourtheme.info file
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

Bartik has some special functions that require some extra files. But these are for the case of the colour selector only and not required normally.

  • Copy the css/colors.css file from the master theme to the yourtheme/css folder you created.
  • Copy the color folder and contents from the maste theme to the yourtheme folder.
  • Add the following line into the yourtheme.info file
stylesheets\[all\]\[\] = css/colors.css

You will also need to to create a logo file

  • Create a image logo.png and save it in the yourtheme folder. You can copy the one from the master theme if your require.

Optionally, you can also

  • Create a default favicon.ico in the yourtheme folder.
  • Add javascript files
scripts[] = js/javascriptfile.js
  • Add more style sheets. Even as print mode only.

The final yourtheme.info file looks like

name = Your Theme
description = your description here
core = 7.x
base theme = bartik

stylesheets\[all\]\[\] = css/style.css
stylesheets\[all\]\[\] = css/colors.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

Leave a Reply