Warning message

Documentation is currently being migrated into the new system. Some pages might be temporarily missing, and some guides might appear empty. Thank you for your patience while we are improving Drupal.org documentation.

Customizing Bartik

Last updated on
October 27, 2016 - 16:54

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 subtheme

If you would like to make adjustments by adding css, it's best practice to create a subtheme.

This is an example of a subtheme 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 subtheme, 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 the Administration > Appearance page to enable your new subtheme called Jean. Now you can add CSS to your jean.css file, and it will apply to your new subtheme.