DrupalThemes

This page has information about Drupal themes I currently use, as well as themes I have evaluated and/or used in the past. For most themes in the latter category I merely list a couple of notes what I think about them. For some of them, though, there are more details about how to customize them.

This page currently has no real structure, I just use it to jot down the most important notes.

Drupal 8 themes

Directory

Here's a directory of Drupal 8 themes: https://www.drupal.org/docs/8/themes.

Adminimal

Project page: https://www.drupal.org/project/adminimal_theme

Used on sites:

• All

Remarks:

• A serviceable administration theme.
• The built-in Drupal 8 admin theme, Seven, is even more minimalistic and not to my taste.

Nexus

Project page: https://www.drupal.org/project/nexus

Used on sites:

• herzbube.ch
• kino.herzbube.ch

Remarks:

• Looks pretty nice, but its default configuration definitely needs a bit of tweaking.
• I switched to this only because Garland, a former Drupal 7 Core theme, has not been ported to D8 (or rather: porting has been stuck in alpha state since more than two years).

Stark

Project page: - (Drupal core theme)

Used on sites:

• grunzwanzling.ch

Remarks:

• A poor man's substitute for the Zen theme, which has not been ported to D8 (or rather: porting has been stuck in alpha state since more than two years).

Drupal 7 themes

Garland

Project page: - (Drupal core theme)

Used on sites:

• herzbube.ch

Remarks:

• Very nice looking with some variability due to how colors can be changed dynamically in the web browser
• Because this is a theme in Drupal core, it is guaranteed to be maintained

Zen

Project page: http://drupal.org/project/zen/

Used on sites:

• grunzwanzling.ch

Remarks:

• Uses CSS instead of tables
• In its basic form a very featureless theme
• It can probably be customized nicely through CSS (at least the theme is advertised with this feature), but it's too much work for now

Old/Unused themes

Sky

Project page: http://drupal.org/project/sky/

Remarks:

• Uses CSS instead of tables
• Clean looking with sober colors
• Flexible: Can be configured nicely in the web browser
• Complete: Appears to support all of Drupal's features (or at least those that I use)
• Robust: Reacts well to things introduced by new modules
• Future-proof: Appears to be well-maintained

marvin

Remove Druplicon watermark by changing themes/chameleon/marvin/style.css: the entry background needs to be commented out.

Let primary links appear in the top right by changing themes/chameleon/marvin/style.css

.navlinks {
  text-align: right;
}

Change themes/bluemarine/style.css to let footer appear centered

#footer {
  text-align: center;
}

civicspace

This theme has a number of sub-themes. Only 2 of them seem to be good-looking:

• republica: looks similar to the base theme with a slight additional border; has some grave problems that I could not solve which make the theme unsuitable
• declaration: fixed width with centered content; news site style

republica changes

The following CSS file is intended for user customization:

themes/civicspace/layouts/republica/custom.css

Center navigation in the top row:

.global-navigation {
  text-align:right;
}

Duplicate navigation below the footer must be removed/commented out in page.tpl.php.

The link "read the rest of this entry" is unnecessary - there already is a link named "read more". The unnecessary link must be removed/commented out in page.tpl.php.

Unsolved book page problem:

• all book pages display an extra row containing the word "Object" at the end of the page
  • book pages are generated by node.tpl.php
  • the content of a book page node is generated by the following line

<?php print civicspace_word_split(phptemplate_wrap_content($content)); ?>

• • the 2 functions are defined in template.php
  • as far as I could see, phptemplate_wrap_content() does not do anything

Unsolved search box problem:

• search box is entirely (Firefox, iCab) or partially (Safari) outside of the colored area in the title area
• search box has no label (Firefox, iCab)

adc

• clear and good design
• slightly colorless
• everything works

channel_nine

• 4 columns
• looks good when blocks are not in the left column
• extremely poor in colors (kind of "bleached")

friendselectric

• looks nice with its red headings
• has some small problems with large font sizes in Firefox
• logo possibly interferes with the site title and needs to be disabled (e.g. herzbube.ch)

sands

• basically good design, but not "innovative" enough
• book pages don't look good

simplex2

• simple design but has some nice "tricks" (good outline for titles, black buttons for navigation on the top right)
• main problem: fixed width

amare

• rather dark
• font is too narrow
• has problems when content becomes too wide (e.g. access control page)

andreas03

• looks very unusual (but interesting)
• has big problem when font size is large and word wrap is not possible (e.g. long links)

No footer: add the following to page.tpl.php, at the bottom inside the <div id="footer">

<?php print $footer_message ?>

Title "Site menu:" is not translated:

• comment this part out in page.tpl.php (using <-- ... -->)
• the anchor <a id="sitemenu"> is still needed because there is a reference to it further up the page
• instead of <h2...> the line finally looks like this:

<a id="sitemenu"/>

aquasoft

• looks extremely well (of course, it's a Mac theme :-)
• is not even remotely supported :-(

Logo

• aero-soft.com icon removed from page.tpl.php by removing the entire
• element that contains the link to www.aero-soft.com
• has problems when logo is too large -> use 40x44 instead of the usual 80x88
• box in the upper left corner has the same size as the site logo - but this is not the same width as the navigation sidebar
  • the first table row defines a single <td colspan="3"> which contains the logo, the toolbar separator and the primary links
  • we replace this by a element, without colspan, which contains only the logo
    • in addition we give the element class="toolbar" so that it uses the toolbar background defined in CSS
    • we also give the element id="titlecell" for which we define a CSS entry that centres the logo horizontally
  • content in page.tpl.php

<td class="toolbar" id="titlecell">  [... PHP code for logo ...] </td>

• • entry in CSS

#titlecell { text-align: center; }

• • the remaining <td> cell is changed from colspan="3" to colspan="2"
  • the following CSS entry achieves the effect of a pressed toolbutton (same effect as with other toolbuttons)

#titlecell:active { background: url(images/toolbara_bg.gif) #f4f4f4; }

Primary links right-aligned

After the previous logo changes the remaining primary links, including the toolbar separator, do not look very good anymore. To fix this we first need to remove the toolbar separator. The original line that prints the primary links looks like this:

<?php if (isset($primary_links)) { ?><li><img src="<?php print  base_path() . drupal_get_path('theme', 'aquasoft') .'/images/navsep2.gif' ?>" alt="" /></li><?php print aquasoft_primary_links(); ?><?php } ?>

After removing the separator, the line looks like this:

<?php if (isset($primary_links)) { print aquasoft_primary_links(); } ?>

Next we want to display the primary links right-aligned. In CSS in the selector #toolbar li den entry float: left needs to be changed to float: right

#toolbar li{ float: right; margin: 0 0 0 1px; padding: 0; display: inline; text-align: center; vertical-align: middle; }

Note: due to the nature of floating, the toolbar entries (i.e. primary links) now appear in reverse order as they are defined in the Drupal configuration.

Footer message should be centered

First we need to eliminate a CSS bug:

• the footer is printed inside an element <div id="footerreg"> in the page.tpl.php
• in CSS there is a wrong entry .footerreg { ... }
• an ID selector should begin with a hash (#), not with a dot (.)
• the entry should therefore be #footerreg { ... }

After the bug is corrected, we can add

text-align: center;

to the #footerreg entry.

No primary links in footer

The primary links already appear in the toolbar, so there is no point in repeating them once more in the footer. Comment the corresponding entry out in page.tpl.php

<!-- <?php print aquasoft_footer_primary_links(); ?> -->

Search box should be displayed

• page.tpl.php displays the box - if at all - only in the right column
• the search box is not displayed, even if in Drupal another block is activated in the right column
• so far the problem has not been solved yet

General information about style.css

• the total content width in pixel is defined by the #container entry
• the title bar is defined by the selectors .captionleft, .captionmid and .captionright
• the shadow on the left, right and at the bottom of the container is defined by the selectors .shadleft, .shadright, .shadbotleft, .shadbotmid, .shadbotright
• the meaning of the element <div id="wrapper"> in page.tpl.php is not clear; the element is wrapped around the entire table
• the table has 3 rows
  • the first row contains the toolbar
  • the second row contains the main part of the page
  • the third row contains the footer
• the table has 3 columns; the main purpose of the columns is to structure the middle row into
  • sidebar_left
  • content
  • sidebar_right
• toolbar
  • each entry in the toolbar can be given a nice-looking icon

#toolbar #foobar a { display: block; background: url(images/icons/tb_foobar.gif) no-repeat top center; }

• • new icons should have dimensions 32x32, at most 32x39
  • sources for possible icons:
    • /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/ (e.g. ToolbarAppsFolderIcon.icns)
  • to achieve the impression of a pressed toolbutton, the following entry is useful (I assume that the RGB value serves the purpose of achieving a similar non-graphic effect if the user has turned off images)

#toolbar #foobar:active { background: url(images/toolbara_bg.gif) #f4f4f4; }

b7

• nice and simple
• copes well with large font size
• white background is too glaring
• blue variant is the best one

barlow

• rather dark
• very narrow -> nice for blogs
• has trouble when content is too wide

news portal

• good and clear design
• footer cannot handle <p>

spread firefox

• not bad, but too many lines

teleology

• clear page design
• not enough space between stories
• font size much too small in a lot of places

amadou

• layout is conventional but ok
• few colors but good contrast

bluebreeze

• layout is basically ok
• blue-tones are very subdued

glossyblue

• looks nice with the calendar-style date icons for story nodes
• inflexible fixed width - e.g. on the theme admin page the checkboxes and radio buttons are no longer visible

internet_services

• does not look overwhelming :-)
• does not display admin menu correctly