As I had a little spare time in the last few days, I started to design a new theme for 5.0.
I tried to take together some good elements of the two themes that are currently discussed for core, themetastic and delicious_zen, and then create a unique and coherent style that IMO fits to drupal quite good.

* It is based on the great .tpl-file structure of the zen theme
* I tried to orient the whole theme on a usability point of view
* I included some icons (all GPL or created by myself), because IMO icons, carefully used, can increase the usability and "sexyness" of a theme in a good and unobtrusive way
* It's blue - because drupal is blue.

So my goal is to get this into 5.0, as IMO it could be some kind of successor to bluemarine.

Reviews/comments are highly appreciated (specific on details or corrections as well as general comments wether or not and why this should or should not be a new core theme)!

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Stefan Nagtegaal’s picture

Screenshots or demosite?

eaton’s picture

Very very nice! A couple of comments.

1) Which of the .tpl.php files differ from zen's? I experimentally dropped this into the zen directory as a sub-theme, and a couple of odd bits rendered incorrectly (breadcrumbs in particular). Other than that, though, it seemed to be OK.

2) Primary menus seem jammed up under the logo.

The site name is in the default serif font, and doesn't seem to match the otherwise clean-and-smooth look of the theme.

Very very nice.

eaton’s picture

I have a demosite up and running (with minimal content) at clean.angrylittletree.com.

Don't pollute it too much, I'm using it to port modules to 5.0 at the moment ;)

Frando’s picture

FileSize
2.24 KB

OK,

Thanks for your comments!

I'll have a demo site up in a few minutes.

Here are two screenshots:

Home page
Admin page

The patch in the attachment contains the differences between my *.tpl.php - files and zen's. There are only two changes (moved the breadcumb into the main content area and the tags of a node's tags to the top of the node).

@Eaton:
Which browser are you using?
The primary links are working correctly for me, so far I was able to test it on Firefox 1.5, Opera 9 and IE 6. There are still some minor problems with IE, but the primary links are displayed correctly there.

best regards,
frando

eaton’s picture

FileSize
17.08 KB

Thanks for the patch! In my dream world, 5.0 would ship with Delicious Zen (fluid and fixed), this theme, a Zen port of BlueMarine for the old-schoolers, and the grey template that originally debuted with the Zen template. There's such a great variety of polished looks here...

I've attached a png of the problem I mentioned - I'm trying to see if I need to clear out firefox's cache or something like that.

Frando’s picture

test site up and running:
http://xcite-online.de/drupal

@Eaton:
I couldn't reproduce the false rendering on your screenshot so far ...

Frando’s picture

FileSize
84.27 KB

some minor updates and style corrections.

eaton’s picture

Very, very nice with the updates. Thoughts:

1) The primary menu up top seems a little squished. If the links had just a couple more pixels between the baseline of the text and the light dividing line, it would be a bit more pleasing to the eye.

2) I see that the terms are aligned to the right, and set to wrap... How does it look when LOTS of taxonomy terms, or terms with very long names, are assigned to a node?

3) I still think the site name should be sans-serif bold... Or at the very least, specify something like Georgia that's available on most browsers, and looks different than the default Sans Serif. I overdosed on Times New Roman Bold long ago :>

Seriously, this is a very nice, very polished theme. It's actually very close to BlueMarine in terms of the overall feel of the page, but with all the slick polish that we know BlueMarine lacks... It feels less 'bloggy,' which is nice...

eaton’s picture

One other minor issue I'm noticing: the site slogan is presseed right up against the right side of the window. Giving it a bit of padding on that side would feel a little less cramped.

quicksketch’s picture

Frando, this site is looking great! I'd love to see this in core also. You've already gotten a ton of details nailed down. The forum looks especially nice. Can you put up an example of Secondary Links?

I like those icons ;-)

eaton’s picture

Frando, I did some poking around and noticed that the bad alignment of the Primary Links menu *ONLY* occurs when there are no items in it, and the 'Edit Primary Links' button is automatically inserted. Once an item is added to the primary menu, voila. it works.

scroogie’s picture

This looks very nice, great work. Im not 100% sure of the primary links, though. For me they look a bit off place. Cant explain it more detailed because i dont know nothing about designs, its just a feeling. +1 from me to put it into core, its far better than bluemarine imho.

andrewfn’s picture

I really like this theme--it has a sophiticated feel, but retains a classic simplicity. Given the limitation of blue being the only colour allowed, it is an impressive achievment.
One question: are all the Drupal core themes going to have this self-imposed limitation? It would be nice to have at least one example that was not exclusively blue!

Frando’s picture

Title: New theme: Blue Breeze » New theme: bluebreeze
FileSize
63.4 KB

Some updates:

1) The primary menu up top seems a little squished. If the links had just a couple more pixels between the baseline of the text and the light dividing line, it would be a bit more pleasing to the eye.

2) I see that the terms are aligned to the right, and set to wrap... How does it look when LOTS of taxonomy terms, or terms with very long names, are assigned to a node?

3) I still think the site name should be sans-serif bold... Or at the very least, specify something like Georgia that's available on most browsers, and looks different than the default Sans Serif. I overdosed on Times New Roman Bold long ago :>

1. fixed.
2. fixed that too. There's now a new div around the .submitted and the .taxonomy spans, so the content doesn't wrap with the tags anymore.
3. Not sure about that yet ;) I'll think about it a little more and wait for other comments.

One other minor issue I'm noticing: the site slogan is presseed right up against the right side of the window. Giving it a bit of padding on that side would feel a little less cramped.

Fixed!

Frando, this site is looking great! I'd love to see this in core also. You've already gotten a ton of details nailed down. The forum looks especially nice. Can you put up an example of Secondary Links?

Thanks! I created some secondary links on my demo site.

Thanks again for your comments!

I changed some other minor styling stuff too (e.g. secondary links).

A new version is attached and also running on my demo site.

Frando’s picture

FileSize
62.68 KB

Another small update, there had been 2some little design bugs in my last zip file.

I also reduced the image sizes quite a lot.

andrewfn’s picture

I like the improvements. Personally I would vote to keep the serif font in the site name.
One problem: When I view http://xcite-online.de/drupal/ in IE, there is a HUGE amount of whitespace below the footer. No problem in Firefox. I had a quick look at the code and can't immediately see the cause.

profix898’s picture

Tabs on pages are right-aligned and the actual page content is left-aligned (as usual), but that feels somehow uncomfortable, is not really usable and looks misaligned in the end. See http://xcite-online.de/drupal/?q=user/register. The tabs should stay on the left IMO. Thats what everybody is used to. Otherwise nice work :) Keep going.

tmp’s picture

<div class="submitted">On <?php print format_date($comment->timestamp, 'custom', 'F jS, Y'); ?> <?php print theme('username', $comment); ?> says:</div>

Some text can not be translated in the comment.tpl.php: "On" and "says:"
Cool theme !!

merlinofchaos’s picture

I expected to be 'bleh' when I clicked on this, but after a few moments I find this preferable to Deliciously Zen or Themetastic.

My only immediate comment is that without any padding or border on the left and right edges, it triggers my innate claustrophobia a little bit and I want to expand my window so it's not bumping up against the sides of the browser; but of course, it will no matter how big my window is.

scroogie’s picture

to profix898: I like it much more when the tabs are right aligned, for me its more usable and looks better.

patchak’s picture

Argh another theme that does not work with vote up down... anyone has an idea why?? (I could go and the something useful to the maintainer of thatmodule...)

Thanks,
patchak

merlinofchaos’s picture

It is easy to note on the demo site: Both polls and the pager look kind of messed up.

zirafa’s picture

Hey this is looking great. And a ton of activity on this...keep at it!

moshe weitzman’s picture

nice ... not so sure about the right aligned tabs such as on http://xcite-online.de/drupal/?q=user (you should be logged out to see this form)

Frando’s picture

FileSize
64.74 KB

First of all, thanks to all of you for your reviews and especially for your compliments!!

Updates:
* fixed the missing t() [#18]
* fixed the poll and pager styling [#22]
* other minor styling changes

Points to discuss:
* serif or sans-serif font in the header? I like the serif font ...
* Shall the tabs be aligned right or left? From a stylistic point of view, I like the right-aligned version more, however, someone said here that from a usability point of view, it would be better to have them aligned left, of which I'm not sure yet ...

Bugs:
* #16 - lots of whitespace in Internet Explorer 6 at the bottom of the site. I don't know yet what the reason for this is, but I'm hunting it ;) Maybe someone else has an idea?

Other comments:

@ #19: Hmm, in my first version I actually had a little margin next to the end of the screen, but I changed it to what it is now. I'm not sure, the "pillar-look" has it's advantages, but in the end, I liked the version with the sidebars touching the border better..

@ #21: Where exactly is the problem? However, I think we should deal with contrib modules a little later ...

Frando’s picture

FileSize
77.12 KB

More updates:

I created a fixed-width version of bluebreeze as an addition to the liquid version (not as a substitute!).
This is especially made for "smaller" websites (e.g. blogs) that don't need and don't want to have a 3 column full width layout.
However, it can also be used with 3 columns, as the 'width'-value depends on the number of sidebars (=the theme gets wider the more sidebars you enable (0,1,2)).

You can see it in action on the demo site (enable it via the themeswitch block).

Some screenshots:
Home
Forum
Administer Nodes

I created a project for bluebreeze, so you can from now on just checkout the latest versions via cvs (but I might keep attaching important updates here for convenience).

patchak’s picture

Hi frando , I understand that you would like to deal with contrib modules later.. but jsut for the sake of it, the widget does not 'hold' at the side of the node (all the widgets are dropped at the bottom of the page) This happens with 90% of the themes out there, but I guess it has something to do with the module and not the theme itself. Please note that it works fine with bluemarine, so as a theme that should be included in core I think It's important to try and make it work...That is why I made this comment and the same comment on the discussion about delicious_zen.

cya and great work, really nice! Are colours on the site based on images or simply some color codes?
Thanks

profix898’s picture

FileSize
8.19 KB

1. A really strange issue with this theme in FF (win32). Open up http://xcite-online.de/drupal in a new window/tab (1. page view), then refresh the page (2. page view). Watch the search box, it shrinks size and partly vanishes. Continue and browse to any other page or refresh the same page again (3. or later page view) and the search box expands as before. This behaviour is reproducable, but you need to start with a fresh window/tab.

2. Using Opera9 (win32) the bullets in lists (e.g. recent comments or create new account/request new password) are upshifted a few pixels.

Look at the screenshot to see the issues yourself.

andrewfn’s picture

#16 - lots of whitespace in Internet Explorer 6 at the bottom of the site

I have spent some time trying to pin this down, and it is produced by the following line in layout.css

* html #footer-wrapper {
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
}

This looks like a browser hack to me (the * character) but if you remove this code, the problem in IE6 goes away. Maybe there is a CSS guru out there who knows what this hack is supposed to do and why it is not working.

tmp’s picture

FileSize
1.98 KB

The bottom of the icons are cut of in the comment.tpl.php both on FF1.5 and IE6.

Original:

li.comment_delete a {
  background: url(images/mini-trash.png) no-repeat 0 2px;
  padding-left: 15px;
}

Changed: 0 0px

li.comment_delete a {
  background: url(images/mini-trash.png) no-repeat 0 0px;
  padding-left: 15px;
}
forngren’s picture

This is really, really good, IMO the best drupal theme I've ever seen. Keep up the work!

Frando’s picture

FileSize
77.08 KB

... another update: ;-)

* fixed the issue with the icons in comments (thanks to #30!)
* improved the css that positions the search field - I could not reproduce the bug mentioned in #28, however, I noticed a bug with the search field in IE which is gone by now, so hopefully this weird reload bug in FF is gone as well
* fixed the whitespace bug with IE (#16, #29)

@ #27: I'll have a look at the module as soon as time permits. The colors are css colors, images are only used for gradients and similar stuff. So background images are used for header, footer, mission, primarylinks, secondarylinks, tablehead and poll bars. The gifs for this make 1.7 kb in total ;)

Thanks again for your reviews and compliments!

profix898’s picture

"hopefully this weird reload bug in FF is gone as well" Yes, it IS gone. Thanks.

Michelle’s picture

FileSize
16.37 KB

This is a really nice theme. I'm using it on my 4.7 site. The header seemed a little odd to me, though, so I switched things around a bit. I'm attaching it here in case anyone is curious. I don't claim to be a designer, though, so it may well be that my version sucks. ;)

If you want to see it live on 4.7, the URL is http://couleeregiononline.com/ . I did the screenshot for historical purposes as this site is being developed and changing a lot and I can't guarantee this theme will be there if someone looks in the future.

Michelle

sime’s picture

@Michelle. I think your variation has merit. But I have to admit I really liking the other way! :-P

To the designer/themer: I thought I was all blued out. But I like this theme a lot. One thing I like (and it's a subjective thing) is that the page content feels important. All the sidebar/header content is perfectly usable/accessible, and it looks great, but visually it is not competing for my attention when I'm reading. I think this is really important for community plumbers whose foremost goal is to deliver information. The result is that I find the page is relaxing to read.

Michelle’s picture

I should probably clarify what I didn't like about it rather than just saying it was odd. I don't have a logo, so I just unchecked the Drupalicon. This put the site name over to the right too far so I moved it left. I wanted to move the tabs down because the seemed to get lost way up at the top, which required moving the site name. When I did all that, the background didn't work so I flipped it upside down.

Anyway, I'm certainly not claiming my way is better. Just explaining my reasoning better.

Michelle

tmp’s picture

FileSize
5.9 KB

The formating of lists (ul - li) is not OK.

See screenshot for more info.

Michelle’s picture

I'm running this on 4.7, so hopefully someone using it on 5.x will comment to rule out version incompatibility.

I've noticed that on a lot of pages, my content gets split. There will be some at the top then a huge gap, then more at the bottom. This only happens on Firefox; seems fine on IE 6. (Don't have IE 7 to test).

You can see it on http://couleeregiononline.com/communities/holmen . It isn't due to the custom stuff on that page, though, as I see it even on admin type pages such as /admin/help. Basically, if there's two vertical sections, they split.

Any suggestions? I really like this theme, but I'm geting tired of scrolling down over the gap...

Thanks,

Michelle

kweisblatt’s picture

Hi.. Great theme! But, I on my 4.7 site the cck pages are getting pushed down. Any fixes for this?

Thanks,
Kris

greggles’s picture

Now that there is a project page http://drupal.org/project/bluebreeze

perhaps we should close this general issue in favor of using the bluebreeze issue queue: http://drupal.org/project/issues/bluebreeze

greggles’s picture

also, I'm really enjoying using this theme - works great for me!

webchick’s picture

Status: Needs review » Closed (fixed)

Agreed.

xamox’s picture

I like the Garland theme, too bad this one wasn't the default though. I like it better. props.

Frando’s picture

Thanks again for your comments and sorry for the long delay, I'd been quite busy with other development things in the past week .. however, I haven't forgotten bluebreeze ;)

Let's continue this in the issue tracker of the project.

Thanks!

zoon_unit’s picture

Version: x.y.z » 5.0-beta2

Fantastic theme! Personally, I think the ideal theme would have the Bluebreeze design, but with the menu layout of Zen. Having the menu below the banner, with the possibility of a secondary menu right below it, just works so much better for most real life web designs.

I find the placement of the primary menu and search box as a key irritation when customizing most themes. By moving the search box out of the banner area, as you have, is a great step forward. With the primary menu below the banner area (and with its own div) you maximize the flexibility of the design. Banners quite often contain graphics as well as logos.

How hard would it be to develop a "bottom-menu" variation of Bluebreeze?

One other item: How hard would it be to define a % width for the fluid version so that there is padding on either side of the theme?