Get Color Module Preview to work

I grabbed images of the color module display block in the garland settings page using seven,garland, corolla, and bartik as the 'admin' theme. I think the problems shown in corolla and bartik are due to problems with color/preview.css. I think that the color module uses 2 files to style its part of the settings page: modules/color/color(-rtl).css and theme_name/color/preview.css.
Not being familiar with drupal, is it common for modules to stylize individual display blocks on the settings page like the color module does?

Here are some files I put together to make the bartik color module settings page look better. But I am at the limit of my skills with photoshop here as well as general web design. Please someone look and see if they can make it work right. I stole a lot from garland, and this is probably not what you want to see, but I think it is closer. Someone needs to come up with a design spec for the bartik color module preview, maybe a target image.

This does not fix the problems with bartik as the admin theme.

I also had to change some file types to get them attached.

How do you attach a psd?

That png file certainly looks strange in my firefox browser, but looks OK when viewed with anything else. Is this just because of the type of png I created?

I switched to Firework and tried again. Attached are screenshots of some samples. I modified the code some more, but I don't think I should do anymore without some comment on the appearance.

Huh, one of the problems seems to be that at least in my install, Bartik doesn't load the color.css style sheet from contexual.

I mean the color module

Below is snippet from Firefox 'view frame source' when I have appearance page up and color module settings displayed, showing "modules/color/color.css". I saw the same with all versions of bartik that had color module support. What versions of drupal and bartik are you running?

*********

Sorry, all the link statements were deleted out of the message by the text editor. I'll try again but I'll change '<'
to ''
style type="text/css" media="all">@import url("http://localhost/drdev43/misc/ui/jquery.ui.core.css?l0qa53");
@import url("http://localhost/drdev43/misc/ui/jquery.ui.theme.css?l0qa53");
@import url("http://localhost/drdev43/modules/system/system.css?l0qa53");
@import url("http://localhost/drdev43/modules/system/admin.css?l0qa53");
@import url("http://localhost/drdev43/modules/system/system-behavior.css?l0qa53");
@import url("http://localhost/drdev43/modules/system/system-menus.css?l0qa53");
@import url("http://localhost/drdev43/modules/system/system-messages.css?l0qa53");

link type="text/css" rel="stylesheet" href="http://localhost/drdev43/misc/farbtastic/farbtastic.css?l0qa53" media="all" />
style type="text/css" media="all">@import url("http://localhost/drdev43/modules/node/node.css?l0qa53");
@import url("http://localhost/drdev43/modules/user/user.css?l0qa53");
@import url("http://localhost/drdev43/modules/forum/forum.css?l0qa53");
@import url("http://localhost/drdev43/modules/shortcut/shortcut.css?l0qa53");
@import url("http://localhost/drdev43/sites/all/themes/bartik45/color/preview.css?l0qa53");

link type="text/css" rel="stylesheet" href="http://localhost/drdev43/modules/color/color.css?l0qa53" media="all" />
style type="text/css" media="screen">@import url("http://localhost/drdev43/themes/seven/reset.css?l0qa53");
@import url("http://localhost/drdev43/themes/seven/style.css?l0qa53");

Yeah, if anyone else has this problem, change the color scheme back to default and then change it back to the one you want. Guess the old style sheet got cached or something.

Does anyone know why this preview.css file in the color directory is refusing to load? When I put it anywhere else and change the color.inc file it works, just not in the preview.css?

attached re the modified files used to generate images in #4.

Let's see what we can do with this.

See also http://drupal.org/node/776684 , since three divs, an h2 and a p won't cut it to preview what Bartik has to offer. ;)

-- wrong issue, sorry --

You know what helps? Replying to the right issue.

Sorry about that.

Work in progress: http://skitch.com/00sven/n9483/appearance-bartik.local .

However, it turns out the JS preview mechanism does not, in fact, load or recolor the color.css file from the theme being previewed, so this one will probably require some patching beyond what's in #776684: The color.module preview HTML is hardcoded in order to work.

Not sure this is a problem. As I understand it:

color.module and color.js are hard coded to use the modules/color/color.css to style the "palette div' block of the appearance settings page. They use theme/color/preview.css to style the "preview div" block of the appearance settings page, and then settings in theme/color/color.inc with theme/color/preview.png and the hard coded "preview div" to render the new color scheme on the appearance settings page.

When the configuration is saved they use settings from theme/color/color.inc with theme/color/base.png to 'slice' the colorized images of the theme and to create the 'color modified' files in default/files/color/themename. They don't care what you name the style files specified in theme/color/color.inc. Bartik happened to chose the file name color.css to selectively separate things modified by the color module from those in style.css that are to be untouched by the module.

color.inc, preview.css, and preview.png are used to output the the appearance settings page.

color.inc and base.png are used to create and/or modify files to be moved to default/files/color/themename, and consequently to render the theme.

Despite what the documentation says, base.png is required, even if not used to to create any slices.

I don't know that the preview object on the appearance settings page has to closely resemble the themed pages rather than to simply indicate the 'general' re-colorization result of the chosen color scheme.

The color module already has too many things clearly hard coded for Garland. The effort should be to reduce hard coded items in the color module rather than to add more and I think a 'preview.html' file will help that. Better documentation and better use of the color.inc configuration file would also help.

I think that the concept of a custom preview.html file is an excellent improvement to the color.module, especially since it is backwards-compatible. Steven, do you have a patch for us to test that builds on the work from #776684: The color.module preview HTML is hardcoded?

we need to fix this before officially submitting Bartik for consideration

Here's the first patch. When you apply it and #776684: The color.module preview HTML is hardcoded, you will be able to preview a fairly representative view of Bartik, including the CSS3 gradients.

Things that are still broken (which might be something to fix in #776684: The color.module preview HTML is hardcoded):

• Switching color themes doesn't change the preview until you make the next color change.

Whoops.

• Switching color themes doesn't change the preview until you make the next color change.

This is surely an issue in color.module. It persists when I undo my local mods to color.module. I'll work to get it into #776684: The color.module preview HTML is hardcoded.

• Switching color themes doesn't change the preview until you make the next color change.

This is surely an issue in color.module. It persists when I undo my local mods to color.module. I'll work to get it into #776684: The color.module preview HTML is hardcoded.

Nope. These were both issues in Bartik's color.inc file. Whoops.

And so, another patch with those two small fixes. Next step is to add another recolorable thing to test that the new color.module really is all that and a bag of chips.

Is it really good to add all that code to style.css for a preview image that will be seen rarely, at best?

in response to #25, I think it's ok since a whole lot of the content being added to styles.css is just this sort of thing:

+++ css/style.css	21 Apr 2010 21:39:52 -0000
@@ -350,15 +369,18 @@ ul.tips {
-#block-system-main h2 {
+#block-system-main h2,
+#preview #preview-block-system-main h2 {

If we added it in a separate stylesheet than we would be duplicating lots of styles. No one is ever going remember to go into the preview style sheet and make changes there too.

One quick note:

+++ color/preview.js	21 Apr 2010 21:39:52 -0000
@@ -0,0 +1,20 @@
+      ¶

white space: empty lines should have no white space at all

Powered by Dreditor.

These are awesome improvements, lets hope #776684: The color.module preview HTML is hardcoded gets in!

Just the issue of the hard coded path-to-logo to resolve (do we need the logo?).

Yeah - unfortunately I think that without doing all that, we would get out of sync pretty fast. The other avenue to explore would be an iFrame, but that also feels rather slimy.

+++ color/preview.js	21 Apr 2010 21:39:52 -0000
@@ -0,0 +1,20 @@
+    ¶
+      // Text preview
+      $('#preview #preview-main h2, #preview #preview-main p', form).css('color', $('#palette input[name="palette[text]"]', form).val());
+      $('#preview #preview-content a', form).css('color', $('#palette input[name="palette[link]"]', form).val());
+      ¶
+      // CSS3 Gradient
+      var gradient_start = $('#palette input[name="palette[top]"]', form).val();
+      var gradient_end = $('#palette input[name="palette[bottom]"]', form).val();
+    ¶

I've never used Dreditor before, but this looks like unneeded whitespace.

Powered by Dreditor.

In latest 7.x bartik dev(4-21), preview.css is empty again. New files(empty) have been added. Was this intentional?

Just about done for now with this one. Per EvanDonovan's suggestion, I changed the poorly-named "base color" to "main background," which it is.

This is what it's looking like for now until we have the later discussion on what's colorable:

I just need to figure out getting the real logo in there. The current solution I have in mind is a tad hacky, but I want to try to finish up without ANOTHER color.module patch ;)

Patch re-roll sans logo fix. This should fix any other code style issues and it includes the change to the color module field title.

Here's the simple fix using the relative path from /admin/appearance/settings/bartik to load the logo file.

Note: this will now only work if bartik is install as DRUPAL_ROOT/themes/bartik .

My thought for the proper way to tackle this is to put the path to the logo into Drupal.settings when Bartik's color.inc is loaded. That's next. As always, reviews.

This patch now depends on #778880: Add static caching to color.module getting in.

If not, I can still make this work, but it will just be messier, since Drupal.settings.color.logo will be an array with four copies of the path to the logo in it.

Here's my local copy of Bartik once set to use the Garland logo as its logo. The preview will now contain the real image selected for the site logo.

Please review this and #778880: Add static caching to color.module once testbot has finished with it.

Final patch for six colors, a nice live preview and live preview of the logo in Bartik.

Still depends on #778880: Add static caching to color.module.

Very last patch. I promise.

Fixes some small inconsistencies in the preview CSS.

#778880: Add static caching to color.module is in. Please test.

w00t

hazah!! well done