Customizing Bartik

Last updated on
19 December 2016

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 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.