Customizing Bartik

This section describes how to change colors in Bartik for Drupal 7 using Bartik's built-in Color module support, and how to create a sub-theme of Bartik for further customizations.

For general information about working with themes in Drupal 7, see global theme options and the Theming Guide for Drupal 7.

Changing the colors

You can adjust some of the colors in Bartik by going on the theme settings page (Administration > Appearance > Settings > Bartik.) This allows you to adjust the colors by entering the hex codes or choosing colors from a color wheel for the following:

• Main background
• Link color
• Header top
• Header bottom
• Text color
• Sidebar background
• Sidebar borders
• Footer background
• Title and slogan

Creating a sub-theme

If you would like to make adjustments by adding css, it's best practice to create a sub-theme. (See the Drupal 7 theming guide for an overview of creating sub-themes in Drupal 7, including the key concept of inheritance.)

This is an example of a sub-theme named Jean.

name = Jean
description = A subtheme of Bartik, which is a flexible, recolorable theme with many regions.
core = 7.x
base theme = bartik

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

settings[shortcut_module_link] = 0

1. Create the folder: /sites/all/themes/jean
2. Create the file /sites/all/themes/jean/jean.info
3. Create a blank file named: /sites/all/themes/jean/css/jean.css
4. Copy from Bartik or create your own: /sites/all/themes/jean/logo.png
5. In order to get the Color module to work with your sub-theme, you will need to do the following:
   1. Copy the file /themes/bartik/css/colors.css to /sites/all/themes/jean/css/colors.css
   2. Copy the folder and its contents /themes/bartik/color/ to /sites/all/themes/jean/color/

Go to the Administration > Appearance page to enable your new sub-theme called Jean. Now you can add CSS to your jean.css file, and it will apply to your new sub-theme.