On this page
Customizing Bartik
Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites
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
- Create the folder:
/sites/all/themes/jean
- Create the file
/sites/all/themes/jean/jean.info
- Create a blank file named:
/sites/all/themes/jean/css/jean.css
- Copy from Bartik or create your own:
/sites/all/themes/jean/logo.png
- In order to get the Color module to work with your sub-theme, you will need to do the following:
- Copy the file
/themes/bartik/css/colors.css
to/sites/all/themes/jean/css/colors.css
- Copy the folder and its contents
/themes/bartik/color/
to/sites/all/themes/jean/color/
- Copy the file
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.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion