As some of you probably know, I've been working on a new theme for Drupal that aims to become the default core theme for the next version of Drupal. There's still a fair amount of bug fixing, tweaking, and general fussing that needs to happen, but I wanted to show off the work that has been done so far, get some feedback from the community, and generally get these new themes on everyone's radar.

We've set up a test site here: http://drupaltheme.lullabot.com

You can click on the the links on the first node on the home page to see the different themes "in action".

Some background:

There is currently 1 theme with 4 sub-themes. The main theme is called "Zen" and aims to provide basic, standards-compliant, XHTML that can be easily manipulated with CSS (think: "CSS Zen Garden"). And then all of the sub-themes are simply the same HTML page structure with different CSS. The themes use a variation on the Holy Grail layout to create a table-free, 3-column, 2-column, or single column layout depending on whether blocks are enabled in the left or right columns. The themes also move the taxonomy and link lists into semantically-correct "ul" lists. The current icons used in the theme are not GPL, but Nathan Haug is currently creating icons that we will be able to use.

The subthemes:
- Zen Fixed :: a fixed-width version of the basic Zen theme.
- Zen Beach :: a Drupal styled theme designed by Nathan Haug. Still a bit buggy, but very promising!
- Zen Drops Big :: a simple-but-pretty fixed width theme with a picture of big water drops
- Zen Drops Small :: a simple-but-pretty fixed width theme with a picture of small water drops :-)

Patch to follow soon.

Comments

rbrooks00’s picture

One initial suggestion I might have is to maybe take the login block for one or more of the themes and do it in the style of sites like Amazon.com, eBay, etc. This gives you back valuable above-the-fold real estate on your right or left block regions and is familiar for most users.

jjeff’s picture

StatusFileSize
new1.17 MB

Here's the "patch" (a.k.a. zip file of the theme). Download it. Try it out.

We're still actively fixing bugs (particularly in the Zen Beach theme) and new icons are on the way, so the current ones will be going bye bye.

sepeck’s picture

User account >> View
http://drupaltheme.lullabot.com/user/51
Text falls below left column block.

m3avrck’s picture

The theme itself should not be creating the semantic links... Drupal should be doing this itself in the first place. Here's the patch to make that happen: http://drupal.org/node/65151

Also, I'm not too found of having some many overrides in template.php. If you have to override something for the default theme, then Drupal should be handling stuff a bit differently (hence my theme_links patch).

Same goes for all of the *.tpl files. If they all were outputting correct XHTML, that not only helps this theme, but all other ones.

Otherwise, this is a great start. The new favicon looks a whole lot better too. Nice seperation of colors, from layout and general styles.

webchick’s picture

subscribing.

webchick’s picture

Status:Active» Needs review

And, it's a patch! (more or less :))

brst t’s picture

A couple first impression comments on the aesthetic front -

-the white frames around the blocks are subtle, functional and look good
-the logo should continue to 'drip' into the content
-the prominent tabs at the top of drupal.org's current bluemarine theme are critical cornerstones in navigating the site and don't stand out much in the new theme.
-heading fonts are a bit too large
-overall: looking good

zirafa’s picture

We should probably merge these issues together (or at least link them together):
This issue addresses the need for a separate admin theme.

My two cents: Very clean design, and I like the use of the same markup for different layouts. The colors make it feel a bit cold though, most likely because of the grey and blue combo. I would probably suggest substituting variations/shades of blue instead of the gray/silver. Also on the demo site the logo in the zen-beach theme isn't a link back to the index page.

Rok Žlender’s picture

StatusFileSize
new89.15 KB

I like the design very much clean and functional.
Here is a bug (probably) I found.
When creating new content there is a big gap between the title and the first element of the form. It looks like the gap is as long as the menu. Take a look at the screenshot.

Rok Žlender’s picture

Forgot to say which browser :/
The problem happens on:
Firefox 1.5.0.6 Linux and Windows
Konqueror Linux

It doesnt happen on IE in Windows

bart@drupal.energybulletin.org’s picture

I liked the cheery feeling of zen-beach... at first. But soon the clashing yellow-blue combination began to make me feel dizzy. I thought my eyes were being drawn outward by the yellow.

A lot of color combinations look great for a few minutes, but are not good for constant viewing.

I looked around for some explanation of my impressions, and found a note on Sammeer Chavan's Usability Checklist that echoed my thoughts:

The presence of highly saturated opposing colors like
blue and yellow or
red and green
spectral extreme colors like
yellow and purple
is undesirable. Such combinations cause eye fatigue. Little amounts of these colors on the sames screens, perhaps as a part of an icon, is acceptable. However combining such colors in large amounts could lead to fatigue and is not visually appealing.

Maybe there's some way to get the cheery feeling without the clash of colors? Perhaps a less saturated yellow? Perhaps a smaller area in yellow?

- Bart Anderson (writer, web developer, Drupal newbie)

jjeff’s picture

User account >> View
http://drupaltheme.lullabot.com/user/51
Text falls below left column block.

When creating new content there is a big gap between the title and the first element of the form. It looks like the gap is as long as the menu.

Thanks for pointing this out. This is a known bug that is being worked on.

jjeff’s picture

Maybe there's some way to get the cheery feeling without the clash of colors? Perhaps a less saturated yellow? Perhaps a smaller area in yellow?

Yes, I agree with this. The yellow is a bit much. We'll dial it back a bit.

jjeff’s picture

-the white frames around the blocks are subtle, functional and look good
-the logo should continue to 'drip' into the content

Not sure I understand this one. You like how it overlaps the border in the drupal.org theme? Does this happen in bluemarine? Although I like this as a design element, please keep in mind that this is a logo that can/will change. People are able to upload their own logo images in the theme settings, so I hesitate to get too specific with the Druplicon image.

-the prominent tabs at the top of drupal.org's current bluemarine theme are critical cornerstones in navigating the site and don't stand out much in the new theme.

Good point. I will see what I can do to make these a bit more prominent -- particularly in the Zen and Zen Fixed themes.

-heading fonts are a bit too large

Yeah, I have to admit that I was going for a bit of that clunky "Web 2.0" feel.

-overall: looking good

Thanks!

brst t’s picture

re- my comment, "the logo should continue to 'drip' into the content"

Not sure I understand this one. You like how it overlaps the border in the drupal.org theme? Does this happen in bluemarine? Although I like this as a design element, please keep in mind that this is a logo that can/will change. People are able to upload their own logo images in the theme settings, so I hesitate to get too specific with the Druplicon image.

Ah, that and the comment re- prominent tabs was intended only in the context of your stated aim of this theme, 'to become the default core theme for the next version of Drupal'.

jjeff’s picture

StatusFileSize
new1.19 MB

Many bug fixes to Zen Beach.

sime’s picture

Hi Jeff. Congrats on putting this out there. I (subjectively!) think that zen and zen-fixed are the stand-out themes. My reasons are along the lines of Jeff Eaton's comments on the dev list.

I wonder, have you considered putting the side-bar lists in a cliched panel design? The reason is, I think people look at the joomla demo and say "why can't drupal have lists like that?"

jjeff’s picture

I wonder, have you considered putting the side-bar lists in a cliched panel design?

Funny you should mention that. I've been thinking about that.

Since we're calling them "menus", there's kind of that feeling that maybe they should feel more like desktop application menus -- meaning sort of 3D and boxy like your link.

I don't want to weigh down the page design too much with visually heavy list elements, but I will do a little experimenting with this and see what I can come up with.

zirafa’s picture

StatusFileSize
new57.47 KB

Hi,

I've spent the last couple of hours playing with this theme, and started modifying "zen" and "zen-fixed". What I did was take elements of zen, deliciously blue, and K2 to try to come up with something that took advantage of the fluid nature of this holy grail xhtml, but wasn't weighed down by a ton of CSS. This is my first attempt; my hope is to even skim everything down further. I'm sure I've made some mistakes.

I realize my approach is different - I'm trying to reduce the amount of CSS to introduce clarity. Some would argue that presenting all the CSS with default elements (background colors, etc.) would help a designer change these elements later. This is true, especially for those that are not saavy with CSS. However, for some (like me) the code feels cluttered and makes it hard to create a mind map of how the theme is working. I don't want to have to trace back CSS classes for every minor change I want make to the site. I would guess the low number of files and the skimpy style.css in box_grey is one of the reasons it is still popular.

Anyhow, please try it out and let me know what works and doesn't work as it is rather late (early) in the morning here. :)

I'll try and work on this as much as I can in my free time...

zirafa’s picture

a demo site for those that don't want to actually download it:

http://www.drupalart.org/drupal48

there is a fixed width as well as full width version. the above is fixed-width.

merlinofchaos’s picture

zirafa; I like that, but I think the line-spacing on the paragraph text is a bit too much

Dries’s picture

I like it too. The line spacing works for me.

traemccombs’s picture

I will back this (in case anyone cares about my opinion) as far as the code base goes. Ted knows what I think should or shouldn't be in a theme and I trust his judgement.

My only disagreement was with the look and feel of it.

That said, If I'm the holdup, and I hope I'm not, then go ahead and mark me down for a "Sure, ok go for it".

I'd rather SOMETHING get done than nothing.

eaton’s picture

A couple comments.

  1. Good CSS-based designs are about two things: a robust XHTML skeleton for the content with enough class/id/etc distinction to style well, but not so much that it's krufty.
  2. The actual output of the zen theme is very high quality in that regard. Some concerns were expressed by drumm that it has some template.php overrides -- at least one is now unecessary due to a recently committed core patch.
  3. The details of the UI -- things like liquid versus fixed, font sizes, color schemes, and the much-talked-of but terribly-intangible 'sexiness,' are very much matters of taste and we're unlikely to get a single theme that satisfies more than a large minority. That's why the robust skeleton of zen is important. Every one of the sub-themes is just CSS and some images. We have never had in core a theme flexible enough to implement significantly different layouts using only CSS. Zen does that, and does it well.
  4. The current 'skins' being presented with Zen are good ones IMO, though there's obviously going to be a lot of tweaking and refining. Even if they are so universally hated that no one wants them near core, however, I feel strongly that the underlying zen skeleton should become a part of core. If that can happen for 4.8/5.0, I think it would be the icing on the cake of a terribly powerful package.

So. What would my dream be? Include the underlying Zen skeleton. Include the Zen and Zen-Fixed CSS themes with it. See if we can get more issues ironed out of the other themes lullabot has put together based on it. And Include the 'deliciously blue' CSS theme with it, as well. During the code freeze, encourage interested parties to try novel things with the CSS -- try to convert an existing layout using just the CSS. Make THAT a contest, and note that it opens the doors for designers who would not otherwise be able to participate in a drupal theme development contest.

This is good stuff. I heart it.

jjeff’s picture

Delicious Zen!!!

I love it! Very nice. Maybe this would be a good solution for us. Perhaps we could convert some other open source web design themes over.

What would my dream be? Include the underlying Zen skeleton. Include the Zen and Zen-Fixed CSS themes with it. See if we can get more issues ironed out of the other themes lullabot has put together based on it. And Include the 'deliciously blue' CSS theme with it, as well.

I fully agree with this.

zirafa’s picture

StatusFileSize
new62.94 KB

Fixing some problems. added some styles for search box, slogan, mission statement.

I also noticed that the "submitted by..." text is hardcoded as a variable in the phptemplate engine. Shouldn't this be a theme function? Something like theme_submitted($node), for example. Otherwise, it is impossible to have it say something else without overriding the phptemplate_node() function.

<?php
  phptemplate_submitted
($node) {
    return
t('Submitted by !a on @b.', array('!a' => theme('username', $node), '@b' => format_date($node->created)));
  }
?>

Anyway, this should be submitted as another issue. I don't mean to distract people from the original goal of this thread.

recidive’s picture

The node submition form is broken:

http://www.drupalart.org/drupal48/node/add/forum

this is showing up just above the left sidebar in Firefox 1.5.0.6 and it's working in Internet Explorer 6 (both on linux).

Have someone tested this with just the right sidebar and both?

zirafa’s picture

Thanks, the node submission form is a known issue. Working on it now. I've noticed the center content drops on other pages too.

It does work with both sidebars/left/right for both fixed/full. The layout stuff is straight from the zen theme, so it should work.

Since I did this quickly to sort of mock it up, I need to go back through and scrape through the CSS carefully. Any CSS kung-foo masters, please feel free to step in. I'm only a green belt. :)

Farsheed

edmund.kwok’s picture

Perhaps adding 'overflow: auto' to #node_form in style.css would fix things?

#node-form, #node-form .node-form {
  margin:0;
  padding:0;
  overflow:  auto; /* added this */
}

Works for me for Firefox 1.5 and Safari on Mac. Not sure if it's the right solution, haven't tested with IE yet.

zirafa’s picture

Ah, nice one. Worked for me in IE and Firefox.

ontwerpwerk’s picture

http://www.drupalart.org/drupal48/ does not have a background colour set for the body/html element - a common gotcha - but it gives the site an ugly border on larger screens when people have a default background color other than white.

Some small MSIE differences:
the blue bar unther the menu stops at the #sidebar-right and goes on in firefox..
above and under the footer there is a light grey area and the vertical margins are a bit different, this is often complicated to get right for msie, and not that important, but would be nice if it was less obvious

Egon Bianchet’s picture

I think contrast on Delicious Zen is a bit too low ... does anyone else notice it?

Dries’s picture

Not sure I like the folder-icons used for navigation. That seems to ... old school. I do like the username-icons though.

zirafa’s picture

StatusFileSize
new61.3 KB

Updated version. I changed the name to delicious_zen to avoid confusion with the original zen. Also, I did a lot of cleanup on the CSS files and tried to comment them as much as possible to make it easy to read. Fixed some cross-browser consistency (at least with font sizes). Also there are no more template.php overrides, although I'd like to theme this.

Dries, maybe you are reminded of the old school Microsoft Windows 3.1 icons? ;) The navigation is pretty tricky. I think maybe just having some blue arrows styled like the blue bullet would work.

zirafa’s picture

StatusFileSize
new61.3 KB

Fixed some mistakes/typos.

Dries’s picture

I started a discussion on the development mailing list about Deliciously Blue. Lots of good suggestions there. :)

Gerhard wrote:

I like it, but the header section needs work. The round Druplicon looks uncomfortable sitting on the pointed edge of the tabs. I am not saysing we'd need rounded tabs, though. Maybe move the tabs more to the right?

In case there is some spacing added between node contents and 'posted' information, plus the page is made fluid not fixed width. There are some other smaller issues, but it is very nice!

Adam Cooper wrote:

* The placement of the search box doesn't fit. It needs to live
somewhere else. Perhaps on the primary links toolbar? (i.e. move it
down some notches).
* How are secondary links going to be displayed. This needs consideration.
* A GPL icon set needs to be carefully chosen. Fedora is developing
new icons for core6, quite frankly they are gopping. VERY careful
consideration needed when choosing a replacement set.
* Gerhard is right about the round icon v.s. tabs. Needs work.
* Perhaps two versions could be supplied (or a setting) for fixed
width and fluid. If a setting is used why not go the whole hog and
allow the user to choose the width.
* More thought needs to go into the relative text sizes of node
content and post info./taxonomy info. Perhaps a bit smaller?
Dries’s picture

Good comments from Jaza:

- spacing between node info and nody body: definitely needs fixing.
- the 'user login' block (i.e. the top block on the left) needs to be
in line with the mission statement (i.e. the top of the main content
area).
- the primary links look very uncomfortable perched on that blue line
ATM: gives the impression that there's a CSS bug (although I assume
there isn't). They need to be aligned with the bottom border line
better, they need to match the border line's colour better, and they
could probably use a bit more spacing between each link as well.
- the footer area seems a bit incongruous with the rest of the theme:
the filled-in pastel blue rectangle thing looks like a hangover from
bluemarine. Perhaps we could make the footer background a bit lighter,
or just give it a top border instead of a background colour? Or
perhaps it just needs some rounded corners.
- perhaps we should move the search bar down, so that it's perched on
the right-most end of the line?
zirafa’s picture

Earl wrote:

I especially like your 'submitted by' line, and you have vastly
improved
the spacing, IMO. You should post these changes to the issue thread
http://drupal.org/node/81217 as well because the actual code could be
beneficial!

Here is the code:

<?php if ($submitted) { ?>
  <span class="submitted"><?php print t('Posted ') . date("F jS, Y", $node->created) . t(' by ') . theme('username', $node) ?></span>
<?php } ?>
<?php if ($terms) { ?><div class="taxonomy"><?php print t(' in ') . $terms ?></div><?php } ?>

This would be much cleaner code if I could just override the $submitted variable output through a direct theme override for it. I've submitted a Drupal patch that adds this additional theme function (currently it gets hard coded). Please review it if you get a chance.

merlinofchaos’s picture

zirafa: The difference I was really pointing out was CSS -- the font, weight, size and spacing of the submitted by line were what I was really pointing at.

Tho yes, I agree with your patch in general.

zirafa’s picture

StatusFileSize
new71.4 KB

Ok update attached.

I have addressed the issues below:

1) header spacing, site-name, site-logo
I took Druplicon and shaded him until almost transparent, and then took the site name and slogan and tried to match them closely with the original deliciously blue theme. also lifted the link menu off the horizontal line to conform more closely to the original design.

2) Added more color contrast of text to improve readability

3) aligned the sidebar blocks with the main section. did additional work on the user login block, now left justified.

4) in general made the theme look more like the original deliciously blue:

http://www.oswd.org/files/designs/2634/Deliciously_Blue/

5) took away bold font links in most places.

6) replaced the navigation icons with modified expanded/collapsed/leaf bullets. I just made some shaded blue icons to match the theme's color scheme.

7) padded and colored node info to provide some separation from node body

Other unresolved issues or questionable practices:

- strange #eee background color appearing in footer on IE
- padding-top hack in IE
- forced font size of 11px is bad
- certain drupal CSS elements getting bumped down (example: user profile page)
- secondary links, forum elements still need to be themed

Test site still here: http://www.drupalart.org/drupal48

killes@www.drop.org’s picture

sorry, but the Druplicon can hardly be seen. The leftmost tab also obscures his smile.

Egon Bianchet’s picture

I would add #primary a:focus to:

#primary a:hover {
  background-position:0% -42px;
  text-decoration:none;
}

to make it work with keyboard too

Owen Barton’s picture

I have started a browsercam session for each of these (all resolutions, all browsers) at http://www.browsercam.com/public.aspx?proj_id=281521 (it will take a while to complete).
Please post links to any shots showing theme bugs here, and we can work on anything we find.
Let me know if you have a potential fix for a particular browser and want me to rerun some/all of these.

The only issue I have spotted so far is with Explorer 5.2/Mac, which personally I would be happy ditching support for (maybe just drop the css for this browser).

Thanks!
- Owen

Owen Barton’s picture

Here is a Deliciously Blue browsercam session:
http://www.browsercam.com/public.aspx?proj_id=281523

Owen Barton’s picture

Here is a collection of all the zen problems I could find from the browsercam. Summary:
IE/Win: zen-beach header is having problems collapsing the list (IE5, IE6). Low res (640x480) causes content to drop away on IE5.
AOL9: Same problems as IE (which figures).
IE/Mac: General self destruction (we may want to just drop styles altogether here)
NS6.2: Left menus disappear entirely (may just want to drop styles again...this is a rare browser now I think)

I think we need to fix the zen-beach header for IE, but apart from that it is looking pretty good to me!

Owen Barton’s picture

Drupal ate my tarball...

Owen Barton’s picture

StatusFileSize
new1.41 MB

Testing a smaller one...

Owen Barton’s picture

StatusFileSize
new1.07 MB

A smaller selection of iemac and netscape 6.2 shots...

zirafa’s picture

Summary of DEV email thread:

TRAE:

1.) Too much padding now below login button. :)
Before things were almost touching, now there is way too much padding between the login button and the Create new account text.

2.) Tabs are better! - Position though...
Again, anyone can nit-pick this stuff, my suggestion would be to align the tabs with the content on the left. Either that, or you have to indent your "Submitted by" to have the same indention as your Tabs. You need a repeating convention to keep things linear and interesting. Otherwise that element just sits in the wind and flaps :)

Solution:
a. Keep tabs where they are, align "submitted by" with them by padding-left on .node .submitted
b. Align tabs with main content.

3.) Search box...
Needs more padding above it. It should be centered within the $site_name text otherwise, again it's an element that is out in the wind by itself. Every element you have on the page should correspond to something. It's a yen/yang thing.

4.) Blocks
Something needs to go on here... it's not bad but... The problem with extra padding at the top for separation is.. you force the block down past the elements on the left. Do they HAVE to line up? Not really, but it sure does help with symmetry. maybe 10px more top padding might give the blocks the proper seperation they need, but I'm not sure. (don't have time to futz with it just now)

5.) Footer padding.
Don't give in to Darth Moshe! heh. Keep the padding where it's enough to have the text breathe. Elements need to have proper whitespace, or else they die a hard death and we, the reader of content pay with strain on our eyes.

ADRIAN:
i loved the search box in this mockup :
http://adam.j.cooper.googlepages.com/mock2.png

TRAE:
I do like the new Tabs spacing and such better the way they currently are, new search block would need to reflect the same styling as the new Tabs. But in the position you suggest (as in the mockup)

ADAM COOPER:
And now for my own suggestions/faults
1.) Comment padding is inconsistant. Top comment has less them others
2.) Comment info needs separation like story info. Currently is
difficult to separate from text
3.) Node info (submitted by...) perhaps could be closer to title in
teasers. In order to associate it (and the title) as info rather then
content.
4.) Would like the old drupalicon back :-(. This sites lost its
identity.
5.) Possibly too much white space on comments. Possibly. would like to
see it with less.

ADRIAN:

Witness the desire to make sites 'not look like drupal sites'. Ship a little 25x80 (or was it 20x85)
'powered by drupal' logo, in all themes, but don't make more work for designers.

TRAE:
Adrian, NOW you are talking.... That's a great comprimise and idea! :)

++powered by drupal logo or tag. I guarentee you people won't even remove that for the most part!

I'm feeling the love...

ADAM:
> > http://adam.j.cooper.googlepages.com/mock2.png
> >

I'd like to point out that that mockup was based on yesterdays design
and I like todays a lot better. I think the only things from this
mockup that we should take with are the:

1) Search box, placement/design
2) Node info should be more like the mockup. (not 100%, but a bit
closer)
3) Want drupalicon back :-(
Although a logo isn't 100% necessary I agree with the pimping of
drupal.

TRAE:
http://cvs.drupal.org/viewcvs_/*checkout*/drupal/contributions/docs/mark...

This is my suggestion for the "Powered by Drupal" icon we'd use. I actually would love to see this somewhere above the fold if possible. Not sure where, as tabs, and search and other things are still a moving target.... oooh

You could do it just to the right and below the search box? Maybe... just babbelling at this point.

EARL:
My issue with today's is that I don't think the "submitted" info should
be blue, I liked the heavy gray from the mockup and it should be closer
to the title than the text.

TRAE:
Earl I agree... I know I suggested blue, but that was when we weren't using #000 for text. :)

I'd say go #000 for all text and do .node .submitted as #666

Trae

Isn't this fun! :)

BER:
First of all, the previous thread is rather messed up, so I am posting
this
outside of that snakepit.

I did a close review on the Deliciously Drupal theme and posted it in
an
annotated image on my site: http://webschuur.com/node/646 (because the
files
are too big to attach)

Let me start with general comments:
I like the "air" it breathes. Space is used *very* well, the overall
design is
balanced very well, and the use of colors is done in an (almost)
perfect way
(for a general theme).

The comments I have are mostly details and not all should be takcen too
serious. I also only commented on the parts I could see right away, I'd
love
to do the same sort of review for some parts of the backend I know to
be
problematic in general, but because doing this is a *lot* of work, i'd
rather
first see what my initial effort leads to :)

DOPRY:
delicous_zen is looking very nice this morning...
I agree with the submitted a smidgeon closer to the title, I'd go for
1/3 of the current spacing.

I also agree with the grey text for submitted as well. The blue tends
to
indicate important or link to me. Match it to the slogan color?

zirafa’s picture

GrugNog2! BrowserCam is extremely useful for debugging this theme. I think once all the design issues are nailed, we can go full steam on cross browser support. One of the things I'd like to do after fixing the design issues is making sure the theme validates here:
http://jigsaw.w3.org/css-validator/

Or at least make sure there are no critical errors.

forngren’s picture

I'm not sure if this has been reported, but the sub-items of the primary links in zen-beach should put some where else, as it's now it's really confusing.

Bèr Kessels’s picture

StatusFileSize
new0 bytes

FWIW, I copied the screeny from my site as attachement. Feedback in the annotated image,

Bèr Kessels’s picture

StatusFileSize
new219.18 KB

Upload broke somehow. Retry.

drewish’s picture

zirafa, one suggestion and one problem.

put more spacing between the node's links. it's noticeable on the blog posts. the "user's blog" and "add comment" links are way too close together.

the other thing is, in firefox, something is wanky when trying to highlight text in firefox. i was trying to copy the text from the node links to paste it into this comment and the screen keeps jumping down a page. the highlighting seems to work in IE though.

Dries’s picture

I liked the floating search box better. The one in http://adam.j.cooper.googlepages.com/mock2.png seems to screw up the design. I'd also get rid of the Druplicon in the background. Just add a 'powered by Drupal in the footer'.

Great to see you guys working on this!

zirafa’s picture

StatusFileSize
new86.08 KB

Hi this is another update of the theme. I have worked hard to try and fix some alignment issues. Links, lists, icons, comments, secondary links have all been updated/themed. As usual the test site is:

http://drupalart.org/drupal48

I tried to link to /misc/powered-blue-80x15.png in the footer of the test site but the link is broken (even though the file path is correct). Also I think keeping the floating search box is better since it fills up the space, and sticks closer to the original design. Ber I have also addressed some of the issues in your screenshot, as well as issues in previous emails.

Other issues:

- "read more" links not appearing (core bug?)
- search box div overlapping over h1.title
- forum needs to be themed
- user/ page still dropping down

zirafa’s picture

StatusFileSize
new85.76 KB

Updated the theme - please provide some feedback.

Ok, I believe most critical issues have been fixed. If people could test this theme and provide some feedback here, that would help greatly.

Farsheed

yched’s picture

This is looking better and better :-)
I really wish we can get thin into core.

Here's my remarks :
- the breadcrumb could use a little air above it

- someone on the dev list just commented about the centered form items in the login block, and in the polls (and maybe somewhere else ?). I agree with that, it looks weird. Would be beter off left aligned.

- the gradient effect on comments is nice in itself, but but it seems "isolated" in the overall design.
Plus it makes the comments stand out more than the post itself, which is a little baffling.

- i think the primary links titles are not very legible yet. problem between the white font and the upper part of the gradient.

- the current demo site doesn't show where a logo would be displayed

- margins around form buttons. (i've always found that a little bit tricky to adjust). It's fine on the login or polls forms, but on a page creation form, the "preview" and "submit" are sticked to the filter info stuff, it doesn't look like they apply to the whole form.

ontwerpwerk’s picture

Is there a specific reason for not using the resizable textarea's?

The comment and node create forms have different widths, I think the comment textarea should be the same size as the node body textarea.

merlinofchaos’s picture

Farsheed: Thanks a bunch for your work on this!

page.tpl needs a

<?php
 
print $scripts
?>

in the <head> tag.

merlinofchaos’s picture

While playing around with it, there is a lot of whitespace in the header areas. Particularly if you look in /admin (which may have its own problems in part because of the fairly useless helptext) the actual content of the page starts quite low. In part there seems to be a lot of excess padding beneath the breadcrumb, and then another chunk under the title, and then another big chunk under the help text.

merlinofchaos’s picture

Hey jjeff -- are you still working on the original 'zen' themes? Because I'm convinced we should not stop with one.

Personally, I think we should package several of these themes with Drupal 5.0. Give the user 4 or 5 attractive (in different ways) themes to start with. They will spur the imagination and more themes will come of it. But that can only happen if there's some work going on to get the glitches out of the additional themes.

forngren’s picture

Hey jjeff -- are you still working on the original 'zen' themes? Because I'm convinced we should not stop with one.

Agreed, IMO they are beter than the delicious one, but I think we should bundle all of them. (preferably with the same code base)

jjeff’s picture

Hi all...

Sorry, I've been a bit distracted with other work goings ons. But I'm hoping to do more work on this in the next week while I'm in Belgium. I'll try to grok the recommendations and have another version in a bit.

If any of you are going to be at DrupalCon in Brussels and want to help me out, please find me...

Thanks!
-Jeff Robbins

zirafa’s picture

Merlinofchaos, thanks for the comments/notice.

I also agree that there should be multiple versions of this theme going into core if possible. Minor note: I did re-order one or two things in page.tpl.php, but the xhtml is virtually identical.

Summarizing again, so I don't forget topics to address:

spacing below breadcrumb, title
put $scripts in

left aligned site name
blue outline on search, login forms
left align login form
left aligned main text (vs. justified)

fix icons (gnome)
check message icon placement:
http://adam.j.cooper.googlepages.com/comments.png

footer needs some detail work:
http://www.oswd.org/files/designs/2634/Deliciously_Blue/
footer image links back to drupal.org (relative image still a problem)

active state for links?
sublink too loud?

increase contrast?
make link hovers darker instead of lighter?
h1.title bottom padding? 5px; contact page

fixed width main content too wide?
tables color scheme, blue?
forum/comments clunky?

patchak’s picture

I just tried the delicious zen theme, and it didnt work so well for me, as all the little icons for comments where pushed to the left so basiically under the left menu... i'm going to test it more and give some feedback wit pics attached if I can't work it out...

Thansk for the nice theme

zirafa’s picture

Anything else broken besides the icons? More detail?

zirafa’s picture

StatusFileSize
new73.49 KB

Feeling pretty close to done. Attached is the latest theme. Fixed some icon issues, header alignment, vertical spacing. Increased contrast, got rid of justified text. Simplified comments/forums.

Some minor issues:
- IE large footer space at bottom
- not sure about IE font size (can anyone confirm it is alright?)
- IE PNG transparency issue

I consider the rest of the issues left to be pretty minor. I could personally live without bending over backwards to comply with IE. But Drupal is about accessibility, too. I just need some help getting through these minor issues so we can get this theme into core.

Morbus Iff’s picture

Subscribing.

Gurpartap Singh’s picture

Status:Needs review» Needs work

zen themes don't appeal much to make into core...

might do after face wash ;)

btw, deliciously zen is cute!

and it needs work, rather work is going on it. correct me if i'm wrong.

andrewfn’s picture

First let me say that I am really, really excited about having new Drupal core themes, especially when I heard that that Jeff from lullabot was working on them, but I must confess to being disappointed to see http://drupaltheme.lullabot.com/
There are some very cool Drupal themes out there, and some of the best are being designed by lullabot, so why does the new Drupal site have to be so flat and drap? Why not some more subtle gradients and more pleasing colours? Take a look at http://www.animauniversale.it/it/swami-roberto --a really cool Drupal site to see what I mean.
I really appreciate what you are doing Jeff, but I know by your work that you guys at lullabot can make much cooler sites!

eaton’s picture

andrewfn, having chatted with them while they were working on it, the specific CSS skins they're demoing were actually a bit of an afterthought. The biggest priority was to create a solid, standards-compliant, easily skinnable XHTML skeleton that other theming could happen on top of. The fact that Delicious Zen was created on the same html framework demonstrates the good sense of that approach.

So. Judge not just the look, but the workthat went on behind the scenes. ;)

andrewfn’s picture

I thought maybe that was the case, and am very pleased because it is exactly what I need as a foundation for my sites, but it does rather illustrate one of Drupal's problems. We have the most amazing product under the hood but it is let down by the marketing. I can see myself telling people, "drupal.org is the home page, but don't be put off that it doesn't look cool, it has the coolest CSS underneath". We put so much effort (quite rightly) into polishing the core of the engine, but most people don't see that. It would take only a little more effort to make "out of the box Drupal" have a WOW! factor.

webchick’s picture

Less talking, more doing. ;)

Zen provides an excellent base theme for people to completely modify the way Drupal looks using only CSS. So please, rather than lament the fact that the CSS-based themes that are currently included atm aren't up to snuff or whatever, make some that are! Farsheed has been doing this and is doing a fantastic job.

zirafa’s picture

Trae has modified the Deliciously Zen theme. His modifications can be seen here:

Themes.net

Please comment on his modifications here.

Thanks!
Farsheed

zirafa’s picture

StatusFileSize
new119.1 KB

Progress...slowly but surely.

- only search/login forms are themed, color contrast improved on buttons
- should work in 4.7 now (explicitly includes "Markup free clearing" for this purpose. redundant in CVS though...)
- mission statement themed
- simplified footer
- replaced comment icon with homemade generic double arrow icon
-cleaned up, organized and commented CSS files a bit better

Demo site: http://www.drupalart.org/drupal48

Cross-browser compatibility seems to be very good according to BrowserCam tests and feedback by testers...IE 5.0 may need further testing however, if we care about it.

If you have any questions or comments regarding this themes accessibility, xhtml, or W3 validation, please reply to this thread. I think it is pretty stable now.

Farsheed

andrewfn’s picture

Nice change to mission and buttons! but...

  • I really liked the previous footer. Why replace it with a bland, boring block?
  • I liked the old comment bubble as well, but I guess that is personal preference.
    enky’s picture

    thanks zirafa,

    the delicious zen theme is cool, i love it,

    patchak’s picture

    Just a question,

    If I would like to modify the colours of the primary links on delicious zen, would I have to create new images, or it's only a color code to change??

    Thanks!

    Steven’s picture

    On http://www.drupalart.org/drupal48/about , the submit buttons for the comment form do not clear the formatting guidelines in at least Safari and Firefox.

    zirafa’s picture

    • I really liked the previous footer. Why replace it with a bland, boring block?
    • I liked the old comment bubble as well, but I guess that is personal preference.

    Not sure which previous footer you mean.
    The comment bubble didn't make sense because it would still appear even if commenting wasn't enabled. There are ways around this but it would make things too complicated, IMO.

    If I would like to modify the colours of the primary links on delicious zen, would I have to create new images, or it's only a color code to change??

    You'd have to modify the tabs.gif image, yes. Or you could use a flat color instead, and remove the images completely.

    zirafa’s picture

    On http://www.drupalart.org/drupal48/about , the submit buttons for the comment form do not clear the formatting guidelines in at least Safari and Firefox.

    This is true not just for delicious_zen, but for bluemarine and pushbutton as well:
    http://drupalart.org/drupal48/about?theme=bluemarine
    http://drupalart.org/drupal48/about?theme=pushbutton

    So either the themes are making a mistake or the core CSS/HTML is the culprit. I think it's something in core. I kinda expect those formatting guidelines to be in a fieldset which would solve the problem, but I'm not sure why they aren't in a fieldset.

    forngren’s picture

    You'd have to modify the tabs.gif image, yes. Or you could use a flat color instead, and remove the images completely.

    I'm not sure if this fits this theme, but I have used partially transparent pngs to be able to modify colors without changing the images. But then there's is IE :/

    andrewfn’s picture

    * I really liked the previous footer. Why replace it with a bland, boring block?
    Not sure which previous footer you mean.
    The comment bubble didn't make sense because it would still appear even if commenting wasn't enabled. There are ways around this but it would make things too complicated, IMO.

    You had a footer that used a gradient so that it was lighter in the middle. I think it had rounded corners as well. It was on themes.net, but it was never uploaded as part of a zip. I think it was between 11.zip and 14.zip.
    That makes sense regarding the comment bubble. It's a shame though.
    I just want to say that I like the theme more and more as I try it out on real sites and see how it behaves. I think it is a huge step forwards and a major contribution to Drupal.

    Dries’s picture

    Looks nice. I'd start focusing on the implementation now, and leave the design as is (also leave the current footer/header as is).

    Dries’s picture

    1. In node-forum template, don't use date("F jS, Y", $node->created) but use format_date(). format_date() will deal with timezone issues.

    2. We seem to duplicate the logo? It is once in the top-level directory and once in the subdirectory but not in the images directory. I'd try to improve consistency, and move the logo to the image directory?

    3. Maybe rename 'delicious_zen-fixed' to 'fixed' or 'fixed-width'? No need to repeat the name.

    4. Maybe we can create a 'fluid' or 'liquid' directory too? That would sorta increase the discoverability/readability of the file structure.

    5. Do we need the template file? It looks like it merely implements the default regions. I think it can be safely removed.

    6. Do we need the favicon.ico's? I suggest we put these in the global misc directory instead ...

    Keep up the great work!

    merlinofchaos’s picture

    I think renaming it 'fixed' will create a theme named 'fixed' which is probably not what you want.

    I think the template file is adding one region to the defaults.

    Nick Lewis’s picture

    Follow up on Dries' comments. A lot of the issues mentioned relate to some obscure behaviors in the theme system itself. Other than #1, I think that the rest of the issues are more related to obscure bugs/needed features in the theme system, and not the theme itself.

    RE #2 : At present both themes need a logo. (see line 302 of theme.inc) We could override this behavior in phptemplate -- but it seems like it would be inappropriate since it's a default theme, and should follow the system's default conventions.

    RE #3 delicious_zen-fixed is a better and more accurate name, IMHO. The fixed version contains no more than a few tweaks for the body, #page, #search, #logo-title, and #site-slogan. For the rest, it depends on all three of delicious_zen's stylesheets (including style.css) to function.

    RE #4 I don't think its possible (without some semi-ugly hacking of phptemplate) to have two themes share a parent directory's template files unless the system treats the parent directory as an enablable theme.

    Delcious_zen is an elastic layout (which is the most sought after type), an extra fluid layout (no fixed widths) is not worth the trouble, imho. The fixed variation is the only other layout that I think is helpful to include. Besides, the fixed version serves as a good example of how to make a small variation of an example theme.

    RE #5 : There's actually one extra region (content top) and one changed name ('content bottom' formally known as 'content' in function phptemplate_regions()). The extra region is useful, and the language is clearer. Plus, it clears up potential confusion about the origin of the "$content" variable.

    RE #6 : Since we're jumping a version number, maybe someone should consider giving this theme a new favicon. And, again, there is value in the theme utilizing standard theme features for the sake of example.

    If this is a list of remaining bugs, than I think someone more involved in this project should move the patch up to "code needs review". I can't see very much obvious work that needs to be done.

    And Great work!

    merlinofchaos’s picture

    I would fully support a patch to add the extra content region to phptemplate.engine by default so that this theme doesn't utilize a template.php at all, though honestly having that in template.php here is a fantastic example of how to add regions, and also having a template.php with just one function in it will make it a lot less likely people will go "Where is my template.php" file which is a very common question it seems.

    eaton’s picture

    http://drupal.org/node/81636 is a somewhat related minor-but-helpful patch for themes. It, plus a patch to regions, would be nice. As merlin said, though, having at least *one* overridden function in the template file wolud be nice for demonstration purposes.

    webchick’s picture

    Category:feature» task
    Priority:Normal» Critical

    I'm bumping this to "critical" and making it a "task" rather than feature. This version of Drupal will receive tons of press, and although there has been some contention over exactly how, everyone (including the original author) agrees that Bluemarine should be retired as the default theme this release. So getting a new default theme, whether it's Deliciously Blue or Zen or Stefan's whose name I forget (or both or all three!) is critical and needs to be done before 5.0 can be released.

    Also, I agree with those who've said that having a template.php in the default theme that does something is a huge +1!. This would eliminate so many support questions it's not even funny. Ideally, it implements an extra region, does something with _phptemplate_variables, and also overrides a theme function.

    Nick Lewis’s picture

    I would be happy to submit a patched template.php for that webchick. Are we able to submit patches for this issue, or this all jjeff/lullabot?

    webchick’s picture

    No, go for it! Patches are welcome. :) Farsheed/zirafa has actually been doing most of the work on the theme variation (deliciously zen) that's most likely to get into core as the default, so you may want to patch against his version as ir could be more up-to-date.

    dftyas’s picture

    This is a nice theme although there is a problem with it for those that don't have taxonomy module activated.
    Function taxonomy_node_get_terms() called in node.tpl.php isn't found.

    quicksketch’s picture

    Great work on this zirafa! Can you put your latest work in a sandbox while this is getting developed? Or better yet, I'll ask jjeff make a zen theme project (since he started it after all). I'd like to help out with patches but want to be on the same page as the latest release. I put together Zen Beach, but I've dropped it after the positive feedback your theme's received! I don't care what theme gets into core, but I want it to seriously kick ass!

    A structural suggestion: The main theme directory itself should just be called 'zen', nothing more. Then the delicious zen fixed theme should go in 'zen-delicous-fixed'. Naming the entire theme 'delicous_zen' implies that delicious zen is the only theme in the zen framework. We might later add 2-3 more themes to the zen framework and they'll follow the same naming scheme. The whole point of the framework was to make additional themes using only CSS files, so we should showcase it as such.

    Nick Lewis’s picture

    +++1 for Zen.

    It is more practical, because it is short, and so variations don't have to exceed 15 characters to keep the namespace.

    Plus, zen is not delicious. If zen were delicious, it would not be true zen, would it?

    Zen can say little, and communicate everything .[1]

    Note:
    1. I am a professional fortune cookie writer on the side, and am glad you noticed.

    zirafa’s picture

    Great work on this zirafa! Can you put your latest work in a sandbox while this is getting developed?

    Hi, yes maybe putting it in my sandbox is a good idea and that way people can patch on it. contributions\sandbox\zirafa\delicious_zen

    This is a nice theme although there is a problem with it for those that don't have taxonomy module activated.
    Function taxonomy_node_get_terms() called in node.tpl.php isn't found.

    Thanks for pointing that out, I don't even think that needs to be called in node.tpl.php. (er, it shouldn't have to be).

    A structural suggestion: The main theme directory itself should just be called 'zen', nothing more.

    I think this might be slightly confusing for people. The concept of some abstract 'zen' theme is great, but it's just a concept. To me, it's just what is in the layout.css file, what creates the holy grail layout. It's hard to define a perfect XHTML layout that is perfectly shared among different CSS files. For instance, if somebody wants to put their search bar at the bottom of the page, they could hack it with CSS, or they could just modify page.tpl.php and put it there.

    For simplicity's sake, whatever the theme is called, I think it should be consistent. I don't like the idea of the base theme called zen and then a subfolder named zen-delicious-fixed. It's confusing.

    jjeff’s picture

    I'm going to create a project for this. Even if it only lives for a few weeks, it will be a central place that we can whack out all of the remaining bugs/issues/etc...

    More soon.

    Nick Lewis’s picture

    well, it wasn't explicity stated, but the subfolder would obviously want to be come zen-fixed. That's one of the main benefits: I always perfer names pithy. Especially if you want to make it easy to make variations.

    jjeff’s picture

    I've created the Zen theme project. Let's move discussion, issues, and patches over there. It will be easier to track.

    http://drupal.org/project/zen

    I've given CVS commit access to Zirafa so that he can continue the wonderful momentum that he's got going.

    patchak’s picture

    Don't know if this is really worth noting, but the zen themes don't work with the vote up down module except for the fixed one AND ONLY when the columns is to the right of content. I noticed a lot of themes don,t work with the widget of vote up down, but I was thinking that if these themes are going to be in core then maybe you could check it out to make sure it works out of the box with most contrib modules.

    The problem is that the voting widgets are always pushed to the bottom of the pages.

    Sorry if this is irrelevant!
    Patchak

    ontwerpwerk’s picture

    @patchak: It's not irrelevant, but this should be the other way around - not all default themes should be modified to work with the voting widget but the voting widget should be modified to work with all default themes - if the default themes are updated, so should the voting widget.

    chx’s picture

    IMO no project, just get it to beta levels and campaign for getting it in and release it in ASAP Drupal5 beta thus getting a lot of feedbacks and the whole community behind it.

    m3avrck’s picture

    Priority:Critical» Normal

    Post all bug reports related to both PHP + CSS to the issue queue for this theme: http://drupal.org/project/issues/zen

    I've recently made a number of changes at the phpTemplate level to fix a number of issues.

    zirafa’s picture

    I'm not sure what's happening here with development (er, where it should be happening or who is doing what), so I'll just comment on the last version of my theme/lullabot's changes:

    • the links >> graphic appears even when there are no links
    • the dotted line below the add comment links should only appear if there are taxonomy terms (and may need to be solid)
    • the background on fixed-theme is too much, imo. It forces the logo + site-name to be left aligned with the primary links when it should probably align with left edge. That way it provides balance with the search box which is right edge aligned. Balance/symmetry was something Trae really pushed for. If a (lighter) background is really desired perhaps taking the edge aligned version and adding a 10px margin to #page is all that is required. But honestly I think it could do without the background, just for simplicity's sake..and it is in the spirit of the original design.
    • The breadcrumb example is good but the long arrow is a bit drastic. Perhaps changing from double arrow to single arrow or dot is less dramatic. › ·

    I think issue queue is a bit much for this but hey, whatever gets the job done. Chx makes a good point that getting a beta into Drupal yields greater feedback and generally goodness.

    Farsheed

    quicksketch’s picture

    @chx I like the contrib project idea because it allows the people working on the theme (zirafa/Lullabots) to work directly on the theme without going throw the core human-filter, which can take days sometimes to get changes committed.

    @zirafa I think you have direct access to the cvs repository for the zen project. Maybe making changes there and documenting them in the issue queue would be the best approach?

    zirafa’s picture

    Ok, it is very hard to track changes now though, especially with 4 people committing-at-will. I think there may be too many cooks in the kitchen...

    scroogie’s picture

    Why do you think its hard to track changes? Before you couldnt track changes at all, and now you can read the commit message and do diffs on the changes... By the way, great work guys!

    zirafa’s picture

    Ok sorry didn't mean tracking previous changes, but anticipating new changes. Probably using the issue queue a bit more is the best way to handle that (for instance, the fixed-width background question).

    coreb’s picture

    Project:Drupal core» Zen
    Version:x.y.z» 6.x-1.x-dev
    Component:theme system» Miscellaneous
    Status:Needs work» Closed (fixed)

    Moving out of the "x.y.z" queue to a real queue.

    Also moved to the new project that was spawned from this issue, and closing it.