Design DesignKit module integration

hmm… The color module's API under D6 was crap. But we got major API improvements done to it in order to get Bartik into core.

Zen is designed to be unstyled. So "changing colors" when there aren't any colors is… odd.

But I will definitely consider it. I may even get time after 7.x-3.0 to see about documenting how to add color module support to sub-themes.

Hello,

Color module integration can be done for zen 7.
A color picker to pick up the color for base, link, header top, etc can be integrated as follows

1. Add a color directory in your sites/all/themes/custom/myzen/

color directory must contain
base.png
color.inc
preview.css
preview.png

Refer to link http://drupal.org/node/108459

2. Add the code for zen default under 'schemes'=>array(
as follows

'default' => array(
      'title' => t('Zen (Default)'),
      'colors' => array(
        'base' => '#ffffff',
        'link' => '#ff0000',
        'top' => '#ffffff',
        'bottom' => '#ffffff',
        'text' => '#000000',
      ),
    ),

* All the color in 'colors'=>array must be default color for zen theme included in .css files
* Those files name should be included in color.inc under 'css' => array

3. Refer to link http://drupal.org/node/108459
To create a preview.png

4. Add css for preview in preview.css file

Anyone planning to make `zen_colors` add-on module? I like color module schemes.

An add-on module isn't needed. Just a patch against STARTERKIT.

Thanks.

subscribing

Looking into this…

JohnAlbin, you say "there aren't any colors." There's actually quite a few if you take into account the images for list items (the triangles and circles and such - they don't ship with Zen but they're still used by it) and tabs. I believe Color module's ability to create new images could help in regards to those, because the standard grayish defaults can get ugly quickly if the rest of the theme gets more colorful.

At any rate, being able to colorize the core Zen theme may not be that useful, just as actually using the core Zen theme may not be that useful, but it may be useful to serve as a start for those who want their subthemes to be color-able. I currently find myself working on a project where we need a colorable theme, and we're trying to decide between adding colorization features to a starter theme subtheme, as no starter themes that I can find seem to support Color out-of-the-box (and adding it is going to look like a good deal of confusing work), or using a "full" theme that already supports Color, such as Bartik, as a parent theme (obviously not ideal). At any rate, it may be sort of strange, but adding Color support to Zen with the goal of being able to take that support and adapt it for use in subthemes would put it ahead of all other Drupal starter themes in that regard. If we do end up Colorizing Zen or a subtheme, I'll try to make sure it's done in a way that can be contributed back to the project.

@Garrett That's a great argument. :-)

I'm in favor of adding color module support to STARTERKIT.

Well, unfortunately, we're going the Bartik route. =/

But hopefully I can squeeze this in in another project in the future.

So what is the process of manually adding the color module to a Zen theme? All the examples seem to explain a process with background images (see #2 above), which i believe is no longer the case in Drupal 7, right?

I'm trying to give a user the ability to change the navigation link color (which other colorized themes don't seem to offer - am i missing something?).

I just copied and pasted the Bartik color support into Zen. This needs a lot of work still. Its in the 1053734-color feature branch in git.

If no one else is going to work on this, this is low on my priority list. Would love someone to bring this to fruition!

As it turns out, the color module wasn't what i was looking for anyway, as i needed to give a user access to change a specific style element w/o granting access to the whole theme permission. There are a few modules that give you just this functionality - i went with Flexible Colors.

I would love to contribute here as I am already tasked with creating something similar in a project I am currently working on. But before I proceed I would like a quick check with zen contributors to understand the right way to proceed.

Below is my specific usecase, and as I understand this should be more or less the broader generic usecase too.

1. The project I am working on involves creating a 'site platfrom' (installation profile) which one can use to create N number of similar sites.
2. The installation profile would ship with a Zen5 custom theme that would have a 'color scheme'.
3. The 'color scheme' should govern the colors of logo-bg, links (visited, active, on hover etc), title, text, menu-bg, tabs, block header bg, form elements, and more.
4. The end users (site admins) should have an interface (a GUI -OR- editing few lines in one place) that allows them to change the 'color scheme' of their site.

Plain colors module integration approach

1. Just integrate colors module to work with Zen STARTERKIT
2. Will need to test the patch upstream in this thread > clean/correct if required > until finished and accepted
3. Actual application of configurable colors to the site would work in the way defined by colors module

DesignKit module integration approach

1. This is almost similar to the above (would work via the colors module), but with some added DesignKit module goodies
2. Would not really need any code change in Zen

Sass approach

1. Using '_base.scss' file that already ships with Zen STARTERKIT to add 'color variables'
2. Use these 'color variables' in your theme's other sass files
3. This would not require any change to Zen as such either

Which of the above approaches seems like a better way to proceed?

Your feedback would be very appreciated.

Since I last posted in this issue, I've done a lot more work with integrating Color module with themes. It turns out there's an annoying caveat; in the base color set for the theme, every item whose color you want to be changeable must already be distinct from every other changeable color. In other words, if you want, say, the header text color and the body text color to both be changable, then they can't both be #000000 as they are now. You'll have to have one be #000000 and one be #010101 or something silly like that. This is because the Color module works by pretty much doing a find-and-replace on colors in the original base color scheme's color codes in the CSS. Thus, it doesn't seem that integrating Color with Zen or any other base theme which has very little color styling by default is practical.

I don't know enough about DesignKit or Sass to comment on your other two approaches.

From Garrett and Wikid Kaka's last posts, and from my own experience, DesignKit module is the way to go. I don't know how much can be reused across subthemes (see #2007470: Will DesignKit colors and images be inherited and usable by subthemes?), if any at all.

I have been able to use DesignKit cordially with my Zen 5 based theme, Neptune. What follow are some screenshots I took of me trying some different color combinations. I have left instructions for people who want to try this at home, see my comment (#4) at #1979208: Colorable Neptune (with options for a dark theme).

I apologize in advance for the purple one.

Black on White

White on Black

The Joker

Looks like adding color module or designKit integration sample code is going to be more complicated then anyone wants to do. Understandable; I've never used them in a project.

Well that's unfortunate, those are cool modules that have made Neptune hyper configurable for me. Oh well, if anyone is trying to get this setup for your theme, DesignKit is quite friendly to get on with and there is a lot of help online for how to implement it.

Cheers!