However, version 0.16.1 is very unstable, and dies with

***MEMORY-ERROR***: screem[5527]: GSlice: assertion failed: sinfo->n_allocated > 0

As a workaround (initially suggested for the highly similar Firestarter crashes), try running screem with this command:

G_SLICE=always-malloc screem

Too bad last development version of Screem is dated March 2006.

In this post, I’m briefly reviewing 4 themes (atck, blueprint, framework, and zen), made specifically to serve as theme developer’s starting point. All 4 are listed with their features (as per Drupal project page of each one), with my personal “impressions” (not based on actual use experience, yet). There’s also my choice and order of preference for the 4 candidates at the end.

Advanced Theme Construction Kit (ATCK) (see also atck homepage and atck on-line layout builder tool)

1. WYSIWYG grid builder
A browser-based grid builder which produces starter code for a page.tpl.php file. The grid builder itself was originally built by Christos Constandinou and it uses a modified version of Yahoo Grids which is more flexible and easier to customize. With Christos’ permission (thanks, Christos!) it, and the supporting css, has been customized so that it works for Drupal themes and so that it is css3 valid. Access the builder online (FF only!), or download it and run it locally. [builder cannot be on Drupal.org because of MIT license]

2. style.css [separate download because of BSD license]
style.css contains only the css needed to support what the grid-builder outputs, as well as some general ‘resets’. The only modifications one should need to make here would be if they want to make their layout a fixed width and/or a different width (default widths are in %).

3. page-layout.css and template.php
These files are where the visual styling of the site happens. The source of these files is from a combination of code from the Hunchbaque theme and some changes/additions which I added in order to provide baseline settings I prefer and/or provide more granular settings. The beauty of these files is the simplicity of them – they include as little markup/styling as possible to avoid complexity, while at the same time putting many helpful tools/comments at your finger tips so that you can accomplish what you want.

4. page.tpl.php
A sample page.tpl.file is included as a reference for finishing your own page.tpl.php file using code output from the grid builder. Note particularly the variable names for the blocks, regions, menus, etc. (at this point the builder does not include those items)

5. fix-ie-6.css and fix-ie-7.css
These files are included for purposes of providing IE-only css to each of the respective versions. By using conditional comments like this we keep the main css files hack-free and atck css3 valid.

Impression: atck is very easy to make initial block layout from scratch (thanks to builder), it has separate fix-CSSs for IE6 and IE7, is very flexible even in complicated grids, and is code-documented.

Blueprint: theme for developers (also required: Blueprint CSS Framework)

* normalizes Drupal’s CSS to be consistent
* properly aggregates all blueprint CSS files into a single file when this setting is enabled
* put scripts at bottom of page for nice performance gains, read more: http://developer.yahoo.com/performance/rules.html#js_bottom
* flexible layout, from 1 to 3 columns, based on where you configure your blocks to show (left, centre, right)
* SEO optimization without the need for heavy modules and additional queries per page
o automatically adds META description to many pages, read more: http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with…
o automatically adds META keywords if taxonomy exists on that node, read more: http://searchengineland.com/070905-194221.php
* better forum icons, http://drupal.org/node/102743#comment-664157
* improve forum display and performance, http://www.sysarchitects.com/node/70
* prevents duplicate form submissions with jQuery, read more
* shows the # of comments below a node since Drupal doesn’t do this by default (usability)
* highlight any comments by the author of the node
* adds a “you need to login / register” box below all comments if you can’t add a comment (usability)
* supports conditional comment subjects, if the setting is off it won’t show a chopped off title of the comment
* uses CSSEdit http://macrabbit.com/cssedit/ comments for grouping of styles
* lots of comments and theming tricks in template.php to learn from

Impression: blueprint has some not-really-theme-design-related features; blueprint is a whole framework with docs; it has single ie.css for fixes; it requires framework knowledge; blueprint’s css modifications aren’t easy (em-to-px and px-to-em conversions).

Framework theme: blank canvas for theme developers

# Framework gives general placement and formatting to basic Drupal elements
# Fixed width of 960px by default. Main column resizes between two-column and three-column layouts
# CSS file is highly organized, including a table of contents, colour codes, section flags, alphabetical properties, etc.
# Includes a list of CSS utility classes for easy content formatting
# W3C valid CSS 2.1 / XHTML 1.0 Strict
# Verified and tested with Firefox 3, Firefox 2, IE7, IE6, Safari 3
# Search in sidebar (as a block) and header (as a theme configuration option)
# Clean and simplified code and file structure
# Works nicely in mobile browsers
# The administration section is adapted from the default Garland theme

Impression: good and simple starting point; code-documented; has ie.css and ie-6.css fix files; far lighter and easier than blueprint, but less capable than atck.

Zen: starting theme for Drupal (plus online docs)

* Well documented php and css files.
* Lots of easy-to-access classes and ids for CSS developers.
* Classes on body include items like “logged-in”, “not-logged-in”, “front”, “not-front”, as well as the node type (“node-type-story”, “node-type-blog”, etc) for single node pages. This can allow CSS developers to do things like have a different colour for a given page item for non-logged-in users, have a larger header section on the front page, or put a different background colour on a given node type.
* Automatic (table-less) column resizing for 1, 2, and 3-column layouts.
* Separate layout.css file to allow for changing the type of column layout (holy grail, jello mold, etc).
* A print.css file optimizes print display automatically when sent to a printer — removes, sidebars and nav elements, optimizes font size, adds text to links showing href, etc.

Impression: code-documented plus extensive online documentation; has print.css; has sub-theming guidelines to simplify future support and enhancements of customized sub-themes (has a STARTERKIT sub-theme ready for customizations); also has “happy user testimonials” :). For one of the new Drupal-based projects I decided to try this one. Next in line are (in order of preference): atck for complex layouts *or* framework for simple sites, and blueprint isn’t quite to my liking (so far at least).

When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image). (CSS 2.1)

When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color. (CSS 1)

Single-line use of ‘background’:

Order of elements:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

The problem is: after installing IE7, you no longer have IE6 (which is replaced by IE7).

However, there is a good and simple solution, enabling one to run IE3 through IE7 on one computer.
To do so, just install the latest version of IE you want (I assume it’s IE7), and then point your browser to evolt’s archive of browsers (what an excellent collection!). You will have to “install” (just copy, really) each older IE you want into a separate directory, and create a short-cut for each. (You may want to use all-in-one installer, found here – also a great package, though I didn’t use it.)

After I installed IE6, I also copied some additional files to its folder (like wininet.dll, version 6.00.2900.2180 or like that), to avoid problems with cookies disabled in IE6.

However, there is a huge problem with multiple IEs: Print Preview and Print do not work at all!
After some searching, I found two bug reports:

• clicking on any bookmark will not load the bookmark, but will open the Print dialogue
• trying to use the bookmark-derived Print dialogue appears not to work: produces blank page

I tested, and found that printing after clicking some bookmark produces the print version of the bookmark’s address! Actually, this allows to use some PDF-printers (like the free PrimoPDF) for Print Previews in IE6, installed as an additional browser together with IE7. You just have to:

1. load the page you need to print-preview
2. bookmark it
3. try to open that bookmark
4. print dialogue appears. just print using your favourite PDF-printer driver
5. voila! you have the printed version of the page you loaded on the 1st step!

That is it. If you know better solution – please comment. I would be glad to have normal Print Preview function in my IE6…

Update: I still have to check/confirm this finding, but it appears that the method described above actually utilizes IE7′s print and print preview DLLs, thus it’s impossible (even with the described trick) to see print and print preview as they really appear in IE6. I am working on this, trying to identify the necessary DLL files to put into IE6 folder to make it use IE6′s print and preview… Please comment if you know the solution.

• vertical-align CSS property should be applied to the inline element within your DIV (which is a block element), and NOT to the DIV itself. For this to work, you may need to set line-height and font-size to the height of the enveloping DIV element:
  1. <div>
  2. <img src="/images/demoBoxH.gif" alt="" />
  3. </div>
  1. div{
  2.     height:200px;
  3.     width:200px;
  4.     background:blue;
  5.     text-align:center;
  6.     line-height:200px;
  7.     font-size:200px;
  8. }
  9. *>div{
  10.     font-size:12px
  11. }
  12. img{
  13.     vertical-align:middle
  14. }
• there is a different approach: for the element within your DIV, set display:absolute and bottom:0px (or top:0px) to vertically align to bottom or top, respectively. Note that this approach doesn’t let aligning to “middle”, and that it works best when only one block-level element is aligned – otherwise elements will overlap at the bottom/top of container DIV. Container DIV should be set to position:relative.
• another approach: we can set the container DIV to
  1. div {display:table-cell;vertical-align:middle}

  because for table cells vertical-align property works as one might expect from common sense and the text-align property. Basically, by doing so we ask the browser to treat our DIV as a table-cell, where vertical-align works just perfectly. However, this approach appears not to work on most IE browsers (probably except for IE7 only, but I didn’t try, as I need IE6 support as well).

• one more table-cell-display-based solution by Nikola:
  1. .nav_next a {
  2. display: table-cell;
  3. width: 85px;
  4. text-align: center;
  5. padding-top: 60px;
  6. position: relative;
  7. top: 60px;
  8. margin-top: -60px;
  9. }

  This time, display:table-cell is applied to the immediate text container (anchor in the example), and then padding-top is added to push text to the bottom. Should work in FF3 and IE6; in FF3, this solution worked in a test setup without the last 3 CSS attributes, but YMMV.

• vertical alignment can be simulated with margins, applied to the element(s) within the container DIV. This is a simple approach and I would recommend it, if the heights of the container and elements within it are known (otherwise, this method is of no help). Example application of this method: if you have a DIV container 200px high, and need to position some SPANed text within it; first, set SPAN to
  1. span {display:block; height:20px}

  (or whatever height value fits your requirements), and then set margins to vertically align the SPAN. To align your SPAN to top, you would apply

  1. span {display:block; height:20px;margin-bottom:180px}

  to your SPAN; to align to bottom –

  1. span {display:block; height:20px;margin-top:180px}

  to align in the middle –

  1. span {display:block; height:20px;margin:90px 0px}

References:

• reference 1
• reference 2
• reference 3
• reference 4
• reference 5
• another methods collection

(The problem I have involves vertically aligning two DIVs within a container DIV so that DIV1 is aligned to top, and DIV2 is aligned to bottom, and their content is aligned appropriately to top/bottom, and that it works in at least IE6, IE7, FF2. If anyone has a ready solution – please comment. When I find mine, I’ll add it to the list above.)

and put your “floatbox” inside a container (such as DIV), you will actually see 200px of the left margin instead of the expected 100px. This problem is known as “IE margin-doubling bug”.

In this post I collected solutions you can use to avoid this problem. The solution I’d recommend is at the end.

The first solution is to apply some minimal height to the container:

This method is described in more details here , and even better here.

Another one is to apply position:relative, this is quite an old solution, described here (there are also other fixes for the problem there, too; link returned error at the time of writing, might be a temporal problem – if not, please remind me to remove it).

Another solution is to wrap the element in another one, and apply float to that another. Removing float from the element helps avoid the trouble. This fix found here. There are lots of examples there, too.

You can also set display:inline, as described in this solution. I would recommend using this one as the most clean and compatible. To apply it to our example at the beginning, we should write the following CSS code: