Last updated June 15, 2011. Created by Carolyn on April 2, 2011.
Edited by steinmb, martinjbaker. Log in to edit this page.

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.

  1. Create the folder: /sites/all/themes/jean
  2. Create the file /sites/all/themes/jean/jean.info
  3. 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
  4. Create a blank file named: /sites/all/themes/jean/css/jean.css
  5. Copy from bartik or create your own: /sites/all/themes/jean/logo.png
  6. 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.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Hi

I did have a problem with this but have now got it working. However my only issue now is that when ever a create a subtheme (even using other themes), every them is having its sidebar borders as black, even when I have specified them to be white. They show up white in preview pane but not when live. Strangely though every other colour works i.e. if I colour them pink.

Please note I have just upgraded to 7.2 and am not sure if this is related?

Please also note this is not occuring when using original themes set to default, only on sub-themes.

Same problem.

It's some kind of bug, but you have to set the sidebar border colors manually in the CSS files for Bartik. Here's a copy of my own changes. It is around line 753 in the original style.css file. You just add the color you want after the 1px solid, as shown.

/* ------------------ Sidebar ----------------- */
.sidebar .section {
  padding-top: 10px;
}
/* The sidebar border color is changed here. */
.sidebar .block {
  border: 1px solid #c8c8c8;
  padding: 15px 20px;
  margin: 0 0 20px;
}

Hi,

I believe I have followed the instructions carefully however when I add to the new subtheme css nothing changes.

Below is what I have added. Am I mistaken in thinking that simple adding the the minor changes to the css sheet will take effect and over ride the original?

#header div.section, #featured div.section, #messages div.section, #main, #triptych, #footer-columns, #footer {
    width: 1120px;
}
.one-sidebar #content {
    width: 880px;
}
#main-menu-links {
    float: right;
}
#logo {
    padding: 15px 15px 0px 10px;
}

Silly mistake... I did not rename the css in the .info file : (

all good.. works well

Made the same mistake. The joys of being a beginner...

Cliff

Hi,
Tried to set up a sub-theme as shown, working with drupal 7.17
Afer installing the theme and making color adjustments, the colors disappear (all white background)
Is there a solution for this?

Marc N.

I have had the same problem, it seems that when you add the stylesheet to the info file it no longer recognizes it (and still ignores the original stylesheet in the base theme). Looking in Firebug, the stylesheet is not detected. Did you find a solution for the problem?

Hi. Is it possible to change the order of blocks, for instance move the Triptych blocks up so they display above the content block. I am not a programmer but I can probably figure out just about anything else.

Thanks,

Tom

Excellent, accurate and concise article, Thank you!

Thank you so much for saving my bacon....

I had managed to make a subtheme with my first shot at css and theming ... but I lost the coloring. (Your article made clear that necessity of using the same css/ subdirectory structure.).

For others stumbling down a similar path... my need was to eliminate the display of images in long sequential vertical rows, which works badly in all displays I tried when i had over 1 image associated with a node (which my application always has). The suggestions I found searching said to use float to make the images display vertically, but I didn't know css, or themes and so... a rather thick coal face to pound through....

But for those that are interested:

The class I over-rode was field-items for the element img (which seems to effect only images for files stored in nodes and not icons (although... I am really just guessing, I could not find documentation of the class names).

Other than the great description above... all i did was add the following lines to "css/jean.css", there is nothing else in the file (my jean is called iwrap, for image wrap).

/* - iwrap changes - wrap images horizontally
makes a white border 2 pixels wide
around each image stored in field in a node
sets the height to 162, which makes mine line up better, but is not the same as the html height which I can't figure out how to do
and floats them so that as many fit as the width of the container */
.field-items img {
  margin:2 px;
  border:2px solid #ffffff;
  height:162;
  float:right;  }
/* - iwrap changes end - */

(note... if you too cannot find documentation of the class names, you can determine class you want to override by viewing source in the html.)

I need to have a footer just exactly as the "Bartik" -theme footer, but I need to put it into my own modified "Inove d7" -theme. How do I achieve this?

Thank you so much for this article.
Simple, well written and an example worth a million words.
We need more like this one.
Tony

"never quit - seek love, new artistic forms, new possibilities" - Camões

Thanks for this article

Thanks for this.

A note for those who naiively named their theme's .info file something like "my-theme.info": hyphens seem to stop Drupal from detecting the file. Renaming it to "mytheme.info" seemed to work for me.

also a theme-name beginning with a number will not work. Just took me an hour to find out.

When I followed the instructions to just copy the color files from Bartik I noticed there were some hard coded Bartik references that could be changed to improve the live preview.

In color.inc I replaced 'bartik' with the new sub-theme name:

theme_get_setting('logo', 'bartik')

In preview.html I changed the following two lines to match the new sub-theme:

<?php
  
<div id="preview-logo"><img src="../../../themes/bartik/logo.png" alt="Site Logo" /></div>
    <
div id="preview-site-name">Bartik</div>
?>

i.e. changed the logo path to reference the sub-theme logo, and changed the site-name text to be the name of the new sub-theme.

I like Bartik, but I can't find any way to hide the authoring name and date info as I could in some other themes.
I've looked in both the Bartik and Global Settings. Any suggestions?

Rob Fleming

@rflemin

Author and date info display toggle in Drupal 7 has moved to Structure > Content Types > [type] > Edit > Display settings (vertical tab)

"Be the URL"