Here a first impression of the themetastic theme for drupal-core..

I hope people could review the theme and give me some feedback how it could be improved. The main goal is, to get this into drupal 5.0

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bèr Kessels’s picture

You may need to clean out the MAC files like .DS_store and __MACOSX folder from the tarball.

Stefan Nagtegaal’s picture

FileSize
753.9 KB

Screenshot

stBorchert’s picture

I've made some screenshots for a first overview.

Dries’s picture

- On http://istyledthis.nl/bluelagoon/about, the breadcrumb is on a really weird place.

- The 'Submitted by Stefan on 1 September, 2006 - 15:54.' isn't distinct from the actual content. It's not obvious that you can skip this information.

- The general style is a little bit too bloggy to my liking (for a default core theme -- not for a blog-specific theme).

Kobus’s picture

FileSize
33.56 KB

It is currently broken in IE, and the bullet alignment is a bit off. These problems do not occur in FF 1.5. See attached screenshot

Otherwise I think it has potential, but I do think a bit of a distinction between the sidebars and the content area could be useful. Even if it is just a slightly lighter (or darker) shade of blue.

Regards,

Kobus

zirafa’s picture

I've put this up on my demo site which has a bit more content enabled:

http://www.drupalart.org/drupal48/about?theme=themetastic

On this page the comments are getting pushed way down to the bottom. Might want to try an overflow:auto in the node body.

Also note on the front page the first post shows up and then the rest of the posts get pushed waaaay down.

Farsheed

Stefan Nagtegaal’s picture

@Dries: You can't review this theme on istyledthis.nl, because it hasn't been updated (yet).

@farsheed: What browser are you using, on my FF/Safari Mac OS X and IE 5.23 for Mac everything wors just fine;

@Kobus: I'll fix the offset for the left-corner of the content area, but the bullet alignment is a well-known issue from IE and has no workaround. (The only thing I can come up with is to use the bullets as background images);

zirafa’s picture

FF 1.5.0.7 on Windows XP

Bèr Kessels’s picture

I submitted this to browsershots.org, should appear within minutes from now. The page will be active as long as we visit this link :)

http://browsershots.org/website/http://istyledthis.nl/

Steven’s picture

My comments (note: undiplomatic phrasing follows):

  • Remove or tone down the white border around poll-bar fills. It makes the fill seem disconnected from the bar.
  • The "add new comment" "older polls" links in the sidebar have a misaligned bullet which I'm guessing should not be there.
  • The yellow border for a sticky is completely out of place and should be a more harmonious hue.
  • The 'submitted by' line needs to be styled differently from the main body. I'd also suggest killing the "Submitted by" format and using something prettier format. "Submitted by" needs to die a slow and horrible death IMO.
  • The grey site title is completely out of place. It's not dark enough to contrast enough (why not white?) and should probably match the hue/saturation of its background more.
  • The nav links at the very top are too close to their arrow.
  • The theme should have a max-width. Fluid has its limits. People who browse with maximized windows on high resolution screens are crazy too.
  • The main content and sidebars need more padding. The space between lines and items in the main content feels wider than the space between different layout blocks. This is bad. The vertical space between nodes seems to be missing?
  • The green text color for status messages is really out of place. I'd either remove it, or make the messages container slightly green as well to match.
  • The shading of tables is completely out of place. Making it 'dented inwards' makes it even worse. I'd tone it down a lot, and put the shadow at the bottom of a row.
  • The <th>s are completely unstyled and easy to miss. They should have some more weight.
  • Tables need more space before and after, especially if you're going to force them to 100% width.
  • Table cells seem to have bottom padding, but no top padding. They could use some small horizontal padding too.
  • The link color seems a bit too teal for me. A bit more navy-blue would be more Drupally.
  • "Themetastic" doesn't exactly roll off the tongue (though I realize it refers to the re-coloring aspect). If we're going to be promoting this as the new look for Drupal 5.0, a nicer name would help.
  • The line spacing is too excessive for form item descriptions. There is more space between the lines than between the first line and the form item.
  • There is a style html.js fieldset which sets a background color on fieldsets. This causes a neat shading near the top of page (e.g. on /admin/settings/uploads) which should IMO be lightened and use an image, so it carries over to all fieldsets. The 'html.js' part of the selector should be removed.
  • The fieldset border needs to be styled to match IMO: it looks really bad on all the browsers I've tried, especially Safari.
  • The underline on hover of fieldset labels needs to be removed (it causes contents to shift in Safari/Firefox OS X).
  • Local tasks are unstyled.
  • The 'clear-block' class is failing on /admin/help (and possibly elsewhere).
  • The use of italic for definition list bodies should be avoided. Italic looks bad on non-cleartype text rendering, especially for large pieces of text.
  • The theme lacks a search box.
  • The site name does not link back to the front page.
  • The admin blocks on /admin are unstyled.
  • Solution to the list-style-image IE misalignment bug: use background-image instead (it's more reliable.. there are small differences across other browsers too).
  • /admin/logs/watchdog has lost most of its color. Careful use of the CSS cascade needs to be applied here to get it to look right.
  • Clearing issues on /admin/content/node and /admin/user/user in Safari. There is a stray bullet in the fieldset on both pages too.

In spite of all this, I still think this is our new default core theme in making. It just needs some more love.

elv’s picture

I think the repeating background images, like bg-content.png, should be wider. Otherwise some old browsers may have a memory leak... I can't remember the minimum width required to avoid this though.
Repeating a 1px background image hundreds of times can also cause slow redraws on older computers.

elv’s picture

A few design suggestions:

  • poll bars could have more contrast, or perhaps a more visible border? The bevels alsmost fade into the background color, maybe on purpose, but it kind of disturbs me :)
  • I don't know if this was intended, but the bar overlaps the backround bevel: bar + border is 2 px taller than the background.
  • the bullets under the login box seem odd, as they are not equally close to the links. If the link is very short (one word) the bullet will be too far away.
  • I saw it was modified in the changelog, but I still think the link color lacks contrast.
  • the bullet don't display well in the taxonomy links, below the comments. It's too close to the link (add padding-left to li.taxonomy_term_2?) and it goes too far below the text. It seems to work better with background-position: 0% 60% instead of 0% 0.6em
  • the difference between a:link and a:hover is not obvious. Shouldn't we underline the links on hover?

The more I look at this theme, the more I like it!

RobRoy’s picture

  • The bullet next to the "Themetastic" tag on http://istyledthis.nl/themetastic/review at the bottom is too far to the bottom-left in FF/IE/Opera.
  • I even think you could set the whole center content panel to the white background that you're currently using for the sticky nodes. That would help the contrast. Might look strange though with the fading border. But having the whiter BG helps the eyes IMO.

Great theme!

jacauc’s picture

Stefan,

Reading thorugh all the comments, I noticed that a lot of the suggestions have been fixed already.
Could you provide an updated zipfile with the theme?

Also, I agree with Steven on:

The link color seems a bit too teal for me. A bit more navy-blue would be more Drupally.

Looks really great otherwise!

Thanks
jacauc

Steven’s picture

FileSize
36.48 KB

Ok I spent the last couple of days giving this theme a make-over to address common criticism. I still think the original theme is good in its own way, but it could be made more accessible/generic which is needed for a core theme.

I also themed a lot of missing elements (e.g. admin, tabs, logo/slogan, ...) and polished the existing styles. Finally I rewrote the underlying CSS layout so it is semi-source ordered (left/middle/right instead of left/right/middle).

Now, before everyone floods this issue with "I don't like X and Y" kind of replies, please spend some time using it. Design by committee is hell, and taste varies by definition. This theme will not be suited for every single Drupal site out there, but at least it won't make them ugly by default.

Also, the recolorable version is being worked on ;).

Demo site at:
http://acko.net/themetastic/
http://acko.net/themetastic-fixed/

nicholasThompson’s picture

I really like it... I'm not sure about the orange colour used for the required fields like username/password...

Also - the RSS feed icon looks a little standard. The theme is really nice and new and shiny looking - but that icon just looks a little old... Just me?
If needed, I have bought: www.iconbuffet.com/products/oslo_buzz

Maybe we could use either the yellow or blue rdd feed icons?

Heine’s picture

Nice.

In Opera 9.02 & IE7 there's to little space between the preview & submit button and the last fieldset on node/add/x

webchick’s picture

@nicholasThompson: We can't include non-GPL'ed icons in any Drupal sources. I think "standard" RSS icon is ok -- it's consistent with what other sites use to signal RSS feeds.

In terms of icons in general though, that might help spruce things up a little and make the theme a little less plain, and also help with "scannability" of all the text. Nate from Lullabot released some GPL'ed icons for use with Drupal back a few weeks ago:

http://www.lullabot.com/files/lullacons_pack1.zip
http://www.lullabot.com/files/Lullacons_Source.zip

Any of the KDE/Gnome icons should work too.

scroogie’s picture

I like this new Themetastic much more than the original one. Lets get this and Bluebreeze into Core. :)

FabriceV’s picture

http://www.famfamfam.com/lab/icons/
Extremely nice icons with Creative Commons Attribution 2.5 License. Autor says "contact me to discuss specifics". Just an overall congratulation.

webchick’s picture

This is getting totally OT, so I'm going to stop posting about this after this post. Just remember:

- Creative Commons != GPL.
- Public domain != GPL.
- Any kind of commercial icons != GPL.
- ANYTHING but GPL != GPL.

It's very, very important that any icons/graphics are GPL'ed. Famfamfam doesn't cut it. This has been rehashed on the dev list a few times.

Dries’s picture

I'm loving it. Good brand value too. :)

webchick’s picture

Ok, more substantiative review now:

  • Missing screenshot.
  • When I enable the Search block, I get two Search blocks.
  • Several dozen themes/themetastic/images/bg-bar.jpg not found errors in watchdog.
  • When I uploaded a new logo, then the site title shifts left and overlaps it.
  • The pinkish-red colour at admin/build/menu when a menu is disabled makes it look like an error, when it's just a simple status thing. Could this be turned into a grey colour (probably the same as inactive tabs)?
  • aggregator/sources has an "xml" icons rather than a generic "feed" icon. Not sure if this is the theme, though.
  • Content juts out into the right sidebar when I put in content like "woo[snip 400 o's]". Not sure if anything can be done about that, though.
  • I would love to see the example template.php file expanded out into almost an instruction manual for themers ala Zen. I know you think that people shouldn't hack themes, but the fact remains that they do and will, and including more context into what various functions are doing in the default theme would greatly help alleviate the number of support requests out there around how to theme.
webchick’s picture

Status: Needs review » Needs work
techczech’s picture

Status: Needs work » Needs review

I was rather skeptical of the original Themetastic as being the best thing to help Drupal's image but this new updated version completely changed my mind. It is both modern and shows a clear Drupal lineage - it's not one I'd choose to use as a starting point for a live site but it would certainly be one I would be happy to show potential Drupal converts on a demo site. I clicked around it for a good while trying this and that and I'm really impressed. Here are a few comments from a user's perspective:

- I really like the restyling of the view/edit/add/list buttons (after I found them, that is) but even after a while of using them, I was still getting confused between which one is active and which one I need to click on to switch modes - the way they are could simply be interpreted either way - there was no such confusion in the current theme - BUT I like the unobtrusive nature of these new ones - I can't quite see how to make it better - and I think it's a worthwhile trade-off

- I'm not convinced by the triangles over primary links - purely on personal aesthetic grounds they seemed to go better with the original themetastic - maybe, they would fit the new design better if they were bigger or even rectangular - reflecting the breadcrumbs area

But these are just minor personal reactions I added just in case they might be of value to Steven - not really as suggestions or as criticisms. As I said, I wouldn't mind presenting Drupal to someone with this theme as it is now.

webchick’s picture

Also, no secondary links..?

ontwerpwerk’s picture

I like the look, +1 from me

I also agree with you on not wanting to design this theme with everyone in a commitee

On a technical note: there might be some more tweaking needed to make the CSS faster (mouseover of the primary menu's and general page loading times) but I guess you're on that already

zirafa’s picture

-The "more" link on this page is overlapping with its list-style-image:

http://acko.net/themetastic/?q=aggregator/sources

-The arrangement of the tabs is clever, however the subtabs are left aligned. So for instance:

http://acko.net/themetastic/?q=admin/content/comment

That might be confuse users as it is hard to tell what is going on.

-Ditto on the verbose commenting in template.php and style.css

-Possibly need a separator or light background (similar to tabs?) for the add new comment | reply | Read More links

Overall looking good :)

Steven’s picture

FileSize
77.61 KB

Aggregator styled, secondary links support added, form submit buttons have more margin, menu admin removed disabled red rows and used transparency instead, added screenshot :P

I updated the test site, but be sure to hit shift-refresh as you'll most likely still see the old stylesheet.

merlinofchaos’s picture

The poll isn't styled; most of the themes people have been working on styled the polls. Since this theme is heavily using the gradients it seems that could work well.

I liked the icons that Steef had used and were stolen in bluebreeze; while I'm not a huge fan of Icons Everywhere having a few little icons here and there are nice indicators, and mostly I think having a few in the defaults is a good example of how to utilize icons in Drupal, and is a big plus.

If the demo is current, I don't think secondary tabs are very good yet. They're left aligned where primary tabs are right aligned and don't seem to have any separation. They're links just hanging out in space and it's not clear what they are. They need to be styled in a way to make it clear they are the next level down from the primary tabs.

yktdan’s picture

Problem on IE 7

The shaded part of the center column intrudes into the text of the title.

RobRoy’s picture

With the white bg content, this theme is looking soooo awesome.

One bug I saw: Go to http://acko.net/themetastic/?q=node/1 when the "Bunnies" link is active (as it is on this page) there is no "active" icon shown and it looks weird to have no icon there so I doubt this was intentional. It would look fine to have either the hover icon and the active icon the same, or have a slight variation for active.

Default theme worthy IMHO. +1

yktdan’s picture

In #15: Also, the recolorable version is being worked on ;).
----------
Seriously? I need a non-blue version and it looks like at the least you have to do some heavy image hacking.

arnabdotorg’s picture

FileSize
85.93 KB

1. Primary links : Would be nice to have tabs, or some other more discrete way of specifying links. For example, inverted tabs: http://www.456bereastreet.com/lab/inverted_tabs/, (of course, styled appropriately)

2. The nav tabs conflict with header, it would be nice to have a shadow line that provides an illusion of separation / 3d

I've made VERY CRUDE mockups of these 2 things in the attached image, for clarity.

anders.fajerson’s picture

The ccss below could benefit from sliding doors, but you probably already know that.

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
  display: block;
  margin: 0 1em;
  padding: .75em 0 0;
  color: #fff;
  background: transparent url("images/bg-navigation-item.png") no-repeat 50% 0;
}

ul.primary-links li a:hover, ul.primary-links li a.active {
  color: #fff;
  background: transparent url("images/bg-navigation-item-hover.png") no-repeat 50% 0;
}
anders.fajerson’s picture

One thing I use a lot are body classes (and I think more should use the technique). I see that this is implemented for sidebars. I would love if a more generic phptemplate_body_class() function shipped with a core theme. Two examples to clarify:

The html for http://example.com/node/8 could look like this:

<body class="sidebars node node-8">
(numbers are not allowed as class names)

...or for http://example.com/about/our_company:

<body class="sidebars about node-our-company">
(underscores are actually valid css but often Drupal don't use it)

I'm not sending any patches beacause I now you guys will come up with much better code if you like the idea :)

laura s’s picture

I still very strongly believe that such low-contrast text and links makes usability a problem. It's not just the aesthetics -- I find it difficult to read the text, and I have only a very mild glasses prescription. Low contrast sites are more difficult to focus on, and can cause eye strain.

I've brought this up before, but nobody seems to agree. Yet I am truly puzzled by the apparent affection for a medium-light gray text. The blue-against-blue links are also hard to read. When it comes to main content and primary navigation, contrast is a good thing, no?

kbahey’s picture

Repeating what I said on the mailing list (thanks Karthik).

Good theme for sure. Thanks to Steef and Steven and everyone else.

Here are some areas for improvement:

- I think a bi-color branding would be better than the all blue we have now. Things that go well with blues is orange and gold in the proper proportions. For example baheyeldin.com uses them very well (IMHO).

- The square edges are a bit "harsh". I mean the ones that appear to be the superimposition of the centre column with the header. If these are rounded up a bit, the theme would go a long way in being more contemporary looking. The same goes for the points for primary links: they can be less "harsh", although that is less so than the other squarish edges.

- Theming of form elements go a long way in making the theme really stand out. Farsheed's theme made strides in this area. Perhaps some of that can be done.

Steven’s picture

FileSize
177.23 KB

I'm not going to significantly alter the design: adding rounded corners, tabs, and other such things is simply catering to different tastes. Making the font darker increases the contrast, but also significantly alters the color balance. Plus, this is based on the ideas of both me and Stefan, so it has already gotten a 'second opinion'. Let's not get into another design-by-committee meeting /please/ . We all know how Deliciously Blue ended up.

Also, adding different colors means it is no longer as Drupal-branded. Luckily, we now have a solution to this issue, one which I hope will get into core. Feast your eyes on this:

http://acko.net/themetastic/?q=admin/build/themes/settings/themetastic

Yes, themetastic is now completely recolorable through the UI:

  • The UI gives you 5 colors to define: base, links, text and 2 for the header gradient. They default to the standard blue Themetastic colors. You can define each individually, but you can also use the locks to link them together. If you do, themetastic will use the relative differences between the original colors to fill in the other colors (in HSL color space).
  • The theme comes with a set of 7 predefined color schemes. They just consist of 5 colors in #hex, so it is trivial to add more.
  • The basic build up is a transparent PNG which is composited onto the header gradient and a solid background color. The preview is composited live with JS, but once you save the colors, a set of images is 'baked' for speedy use (in the files directory). Yes, it even renders a screenshot for the theme list.
  • The stylesheet from the normal Themetastic is parsed in, and all colors are shifted based on the palette you define. The interpolator is quite clever and distinguishes between links, text and base colors. Colors are interpolated to maintain saturation/luminance differences. The result is also placed in the files directory.

    The only modification I made to the stylesheet for this was to mark a section of styles which should not be shifted (e.g. red for errors) and mark them with a comment. Other than that, it's a perfectly normal theme on its own.

  • The color system is essentially an add-on module, because the necessary infrastructure is not in place for themes. It adds itself to the theme config using Forms API. The theme template.php contains a single callback in _phptemplate_variables() back to the themetastic module, so it can replace the normal stylesheet and logo used. This is as clean as it gets without serious PHPTemplate changes.
  • The whole thing is pretty small... the theme contains 15KB or so of images (not counting the screenshot) and 14KB of CSS. The extra files for compositing are 50KB (2 transparent PNGs). The module itself is only 16KB of PHP, 7KB of JavaScript plus 23KB for the Farbtastic jQuery plug-in. If that's not a lot of bang for your buck, then I don't know what is.
  • The whole thing has been tested on IE6, Opera 9, Firefox 1.5 and Safari 2.

See the attachment. Just drop in the module and theme in the right place, enable the module, then go the themetastic configuration page. Obviously the files directory must be configured correctly for it to work.

alanburke’s picture

I think I speak for a lot of people who will try this...
WOW!

jacauc’s picture

what a great feature! I'm sold!

solipsist’s picture

This color changing feature is something I have been discussing with my colleague Thomas Barregren. We've had the idea of building a standards compliant set of modules and themes to let our customers easily swap layouts, font faces and colors using the administration panel.

My #1 gripe with themetastic is that it doesn't support drop-down menus, and depends entirely on tabbed navigation which may work fine for some, but not for others. I also think its look is too distinct to fit most sites. I'd vote for something more neutral that also meets all modern accessibility requirements.

yktdan’s picture

FileSize
142.99 KB

Just what I have been looking for #39.

It has a problem with IE7 (mentioned above) I have attached a screen shot of the problem where the top of the center section intrudes on the title.

laura s’s picture

Wonderful! (No apparent problems with Firefox 2 Mac.)

Stefan Nagtegaal’s picture

To be honoust, I'm really getting tired of all the people saying they do not like this, they would like to see that changed into this, and all the other crap that fills the threat.

For everyone that feels unconfortable or does not like themetastic, make a theme yourself and see if it fits everyones needs/expectations! I'm certain of the fact you can't!

So, please stop the bitching about if the theme is good for you, and make yourself a theme..

the only purpose of the birth of themetastic is to get the farbtastic-jquery plugin working with drupal, and the theme is easy customisable by end users that like the layout of the theme.
If you don't like it, use the good ald and crappy bluemarine. Otherwise, make your own..

But please stop the nagging...

arnabdotorg’s picture

To be honoust, I'm really getting tired of all the people saying they do not like this, they would like to see that changed into this, and all the other crap that fills the threat.

I completely agree. This is definitely a great piece of work, and with configurable colors, this is pretty much unbeatable. Great work, guys!

However, if this is to be a default core theme, there has to be some amount of agreement amongst the community, and being receptive to ideas is important here. Feel free to reject them with valid points, but that does not mean people are not entitled to suggest things. What if one of them really is a good idea? Since the question here is of *being adopted by the community*, the community does have a small right to ask relevant questions about the theme.

I had raised two points, both of which are *objective*, and *do not* have anything to do with personal taste. It would be nice to hear your opinions on these:

1) Tab usability & accessibility: Local tabs are currently shown as buttons on the top right. What visual cues do you have to specify that the tabs are for the current page, and that the current heading corresponds to the current tab? (I can see none, barring the colored button, which is not obvious to most people, let alone colorblind people). Hence, the suggestion of adding a thin shadow underline to make the concept of tabs for the current page more obvious.

2) Primary link aesthetics: All of your theme is based on glassy, square edged 3d-ish boxes. How do 2-dish *triangles* fit in to this set?

merlinofchaos’s picture

Steef:

Since the theme is going to be the new Drupal default, it's important for people's opinions to be known, and it's unfair of you to come here and tell people to shut up if they don't like it. Personally, I've never liked the theme. Despite what many say, I find it ugly and difficult to read, but it's still better than bluemarine, so I have no interest in actively blocking it. But it's important that people's opinions are known.

On the other hand, if the actual bugs I pointed out aren't fixed, but are simply lost because it's being lumped in with the "whining" then I'll be upset.

You know no theme is perfect, Steef, and you've done your share of negative criticism on other themes. You're not exempt from it either, just because you happened to put one up that Steven really likes.

Dries’s picture

Should go into core.

Tiny nit: on my 12" powerbook, it takes up quite a bit of screen estate. The color picker and the preview don't fit on a single screen so I have to scroll up and down all the time. Somewhat annoying. Would be great if you could squeeze things a little so it is more friendly to people like me. ;-)

Stefan Nagtegaal’s picture

merlinofchaos, arnabdotorg:
Maybe it's your interpreation of my comment, or maybe it is the way I wrote my opinion, but:
- If you have a valuable way of contributing to the threat and to make the theme better, please do so. It was never my goal to upset people, but only stop them saying I would like that border be black, and it would be better if this was blue; Why are the tabs right aligned? And so on...

And yes merlinofchaos, I *did* my own negative criticism on other themes. And you know what? I thought I could do it better, and did something about it.. The whole recolorable theme was my own idea, and is in development for months already..

And if the bugs you mentioned are fixed or not, is up to you to (re)test it. We did everything we could to test, retest and did the best we could to squash all bugs we found..

So, "yes" your opinion counts, but not the opinion of people that think x is a better color than y...

And I still am convinced of the fact that if you do not like the default themes, makes your own. I did that for years, and finally stood up to get some better theme in core..

I know it's not perfect for everyone, and does not fit the need of everyone. But if there is anyone that needs help theming, I never said "no" or did not help them.
There are plenty of people who will tell you the same..

merlinofchaos’s picture

"And I still am convinced of the fact that if you do not like the default themes, makes your own. I did that for years, and finally stood up to get some better theme in core.."

Very well. Since I have no skill at designing and making themes, and such a task is basically impossible, I will shut right up and remember that opinion only matters if I'm as good at making themes as you.

Stefan Nagtegaal’s picture

Merlinofchaos: I think you did not fully understood what I tried to tell..
I would like to invite you on IRC and clear up "the big dark sky" which is above us, and talk things out.
It's probably my bad form of English...

jacauc’s picture

Hey guys, let's stop the flaming here please.
Guess have no right to request this as I have not done anything to contribute with regard to the theme (except for a few minor comments here and there)
Thing is, I've been watching this issue for the past couple of days and I've been immensely impressed with the development happening here.

Either way, good criticism or bad, I think a lot of work has gone (and progress has been made) into this theme by Stefan, Steven and others, and I would hate to see them and everyone else developing this drop this completely because of lack of interest and negative comments etc.

One thing though Stefan...I (and probably most outsiders) have generally not commented on something I like, as that is not constructive.... I do think however that there's a lot of people out there that see this, like it, and not say anything.
The people who don't like it are the ones that will say so.

...So it might seem that it's all negative criticisms, but there are some of us out here that think this is absolutely brilliant! Thanks for all the effort here!

maybe we need to keep watching the poll running on that page...seems like there are supporters of this out there!

"you can please some of the people some of the time, but you cannot please all of the people all of the time

- Bod Dylan (I think)

arnabdotorg’s picture

- If you have a valuable way of contributing to the threat and to make the theme better, please do so

Steef: I recognized two specific issues with the themes, posed them as objective questions. Please note that my issues are not matters of "taste" or preference. From my previous comment, I also made a very rushed mockup of a possible solutions to these two issues:

http://drupal.org/files/issues/Screenshot-4.png (i know this is ugly, but the point remains)

greggles’s picture

With the new color picker I found an interesting scenario:

1. use the color picker to choose some colors
2. edit the style.css to add stuff unrelated to the colors
3. refresh page

Expected results:
changes in style.css are reflected on the page

Actual results:
The style.css is not included, so I have to visit admin/build/themes/settings/themetastic and hit "save configuration" to rebuild the CSS file

My proposed solution to this problem is to have two css files: the style.css, which users should edit AND an auto-generated css file that contains the colors from the picker. Another solution is simply a big README in the style.css and, perhaps in various other places. But I think the 2 css file solution is the best.

sepeck’s picture

FileSize
84.25 KB

IE7 gold has an issue with the site name dropped behind the center graphic. Also the search buttons seem a bit out of alignment in both IE7 and FF2. They are off they same in both so I am only submitting the IE7 screen shot.

Caleb G2’s picture

Don't know about the site name drop, but commenting out these two lines from style.css got the submit buttons and the text input to line up for me on FF2 (haven't tested IE7):

.form-button, .form-submit {
  margin: 2em 0.5em 2em 0;
}

.sidebar .form-button, .sidebar .form-submit {
  margin-top: 1em;
}
Steven’s picture

FileSize
168.88 KB

Ok, here's an update. IMO the theme is core ready now.

First of all, after long consideration, the theme has a new name. Themetastic doesn't really roll off the tongue and was more of a working name for the recoloring mechanism anyway. The theme has been renamed to ... *drumroll* Garland(*).

The module has been renamed to color.module by request of Dries and it has been slightly generalized so it can be reused by other themes. This was mostly done actually because I didn't want to hardcode the theme's compositing information in the module itself, and after moving it, it was trivial to allow it to work for other themes: just include another file.

The color.module looks for themes that have a /color directory with a color.inc file, a preview.png, preview.css and a base.png. The theme also needs to call color.module from template.php to inject the altered stylesheet and logo when necessary, but this is just a tiny stub that can be copy/pasted.

If this idea takes off, we'll see how to generalize it further for Drupal 6 and see if we can't get unified .info files for themes (just like for modules). I see color.module integrating better with the theme system and providing much more ways to composite together themes. However, it is not easy to make a recolorable theme and it must be designed from the ground like that.

Other things:

  • IE bugs fixed: right corner image was cut off, header text was misaligned in IE7.
  • Poll styling has been restored. This was accidentally lost with the recoloring system.
  • The tab styling has been changed. The tabs are now directly to the right of the title, instead of right-aligned in the main content. This helps group all navigation together without taking up an excessive amount of vertical space. No, they still don't look like 'real' tabs. Tough.
  • The misaligned buttons in the sidebar have been fixed.
  • The provided color schemes have been tweaked.
  • I made the palette/color widget more compact on screen.
  • Farbtastic has been updated to 1.1 and moved to misc/farbtastic/
  • Enabled color.module by default and changed default theme to Garland.

The demo is now at http://acko.net/garland.

(*) Yes, named after Judy Garland, the actress/singer/gay icon. The theme offers a rainbow of possibilities after all ;).

Caleb G2’s picture

As a total side comment - it's pretty cool that a theme gets into core (nay, not just any theme but THE core default theme) without even being a project. (mmm. It might be nice to have a project page at some point just so everyone can track issues, changes, whatever)

The farbtastic/jquery technology is amazing. I'm totally enthralled. With all due respect given to the other themes that were up for being dubbed the default - farbtastic is a killerapp all by itself. The theme being used could look like mud (which it in fact it does not) and it would still be worth making the default, imho.

Get ready to see 1000-trillion newbie Drupal sites in an array of Garland delight!

Caleb G2’s picture

Couple notes about the latest package:

The .dsstore files still show up once it's on the server (but of course not if your looking at it directly in OS X)

For a liquid template a minimum width of 980px seems pretty high. On my powerbook I can't fit the whole window in...

Generally speaking if there was any way to cut down the # of sidebar references it might be better.

Great otherwise...

chx’s picture

Title: New drupal-theme: Themetastic » New drupal-theme: Garland
Steven’s picture

For a liquid template a minimum width of 980px seems pretty high. On my powerbook I can't fit the whole window in...

The minimum width is only set when you use 3 columns, to avoid the center column from getting too squished. Still, 980px should be enough for 1024x768. What resolution do you use?

techczech’s picture

Great job on the Edit/View tabs. It is now perfectly intuitive (at least for me) and definitely learnable which one is active at any one time. I was a little worried what might happen if the title is too long but they shift below it very gracefully: http://www.acko.net/garland/?q=node/19.

arnabdotorg’s picture

FileSize
17.85 KB

I'm attaching a mockup that makes the tabs look like tabs, hopefully the designers will care to look at it.

Caleb G2’s picture

Still, 980px should be enough for 1024x768.

You're right if I have the window completely expanded end to end it does indeed fit without showing the scroll bar. Must have had it collapsed just a little bit when I was looking at it before.

arnabdotorg’s picture

FileSize
20.08 KB

updated mockup to 3 tabs

liquidcms’s picture

sorry, but...

I found this themediscussion in my search to add a colour pciker to my site.. and thought this might give me some clues.

but a couple questions... how do i get this to work even on the garland theme???

is this a Drupal 5 only theme? I noticed there was a module_exists() call in template.php which i think is a drupal 5 thing (since it is called module_exist() in 4.7) - but; once i changed that the theme does load - how ever no sign of colour picker under the themse config page - and not even any error messages.

Any idea what i could be missing:

I saw Steve make a comment about "make sure files directory is set up right" - what does that mean.. ZIP files doesnt show anything going in files folder. Also, i havent run core.patch - what do i run it on???

so maybe just a drupal 5 thing.. which would be too bad.. really hoping to get color picker thing aded.

thanks for any help,
peter...

jacauc’s picture

Haven't tried it myself, but I beleive you have to enable some module as well (color.module i think??)

MySchizoBuddy’s picture

the folder names say it all.
the Misc folders content go in the misc folder.

only thing, I'll wait for a patched drupal 5.

MySchizoBuddy’s picture

OK u open up system.install and patch it.
the core.patch file has - and + lines
remove the line corresponding to the - and add the ones corresponding to the +

Johan A’s picture

Here's a suggestion ... how about implementing the no image preload css technique.

(what i'm talking about: http://wellstyled.com/css-nopreload-rollovers.html )

Some websites like deviantart and hardocp puts ALL their design images into a single image, which makes loading the page very fast.

http://hardocp.com/images/sprite.png
http://s.deviantart.com/styles/minimal/minish/bg-tttop-all.gif

jacauc’s picture

very cool! In concept at least, don't know how easy it is to implement with a liquid template.
Will defnitely keep that in mind for future reference.

Steven’s picture

Johan A: We could do the CSS sprites technique for the navigation bar arrows, I just haven't gotten around to it. It's a refinement that can be added later. But doing it for all the images is near impossible as you'd need to change the CSS around a lot. This would add more design markup into the template.

arnab: sorry, but I don't like the look of tabs for this theme. I don't think the solution in the last version is particularly unclear.

Also, this theme and the coloring is definitely 5.0 only. It depends on the jQuery library and various other 5.0 features. Backporting is possible in theory (jQuery has already been backported).

square_rinoa84’s picture

Title: New drupal-theme: Garland » my primary link does not appear
FileSize
110.9 KB

I use drupal 4.7 and after change theme to garland, my primary link doesn't appear. I attach the screenshort. Anybody tell me how to solve this? (I use IE7)

jacauc’s picture

Title: my primary link does not appear » New drupal-theme: Garland

square_rinoa84,
As Steven pointed out, this theme is (Still being) developed for drupal 5.0
I doubt if it should be used in production yet, but if you could test this behaviour on 5.0 and see if it still happens, then post it again.
garland is still being troubleshooted for working on 5.0, so it's probably not a good idea to backport a beta 5.0 theme to 4.7 (...yet)

m3avrck’s picture

How about updating the favico to use 24bit color and look the same as the logo in the theme?

Just a minor nitpick throwing out there so I can subscribe to this issue.

moshe weitzman’s picture

Status: Needs review » Fixed

the garland has landed

Anonymous’s picture

Status: Fixed » Closed (fixed)