Back to top

Drupal theme style elements–check-list

Web designers who need to create Drupal theme designs but aren't familiar with Drupal often miss to style some elements that are Drupal-specific. Not every project will have these elements, but most will use the same ones. This is a check-list of possible elements to serve as a reminder to designers of Drupal interface.

Drupal tabs, Form fields and Submit button (Log in Page, Contact)

If you allow for user registration the Log in page will inevitably be accessible to anonymous users (along with Create new account and Reset your password). Forms styles aren't usually forgotten, but Drupal tabs are:

Drupal Login tabs Wide

Drupal Login tabs Narrow

Page not found

Page not found 404 error message

Although you don't have to style this page differently from others, it's good practice to include more options for those not finding what they are looking for. Pointers to most requested pages or similar guidelines that complement the Main navigation are a good choice, and specific styling usually applies.

Many websites design it expanding on their identity in a humorous way:

The Australian Page not found

Lego Page not found

Look at more of the examples: 38 brilliantly designed 404 error pages, 24 Clever 404 Error Pages From Real Websites.

Access denied page

Access denied 403 error message

The Access denied situation often happens when a user clicks on a link in an email that takes them to a page they usually have access to, but if they are logged out, the system sees them as an anonymous user.

That is why it's good practice to offer a login form to Anonymous users right there on the Access Denied page. Check the styles unless you already covered form elements.

Maintenance page

Maintenance page

Although the maintenance downtime should be minimal there are cases when more thought needs to be put into the design of the Maintenance page. If there are scheduled down-times that can disrupt your visitors' workflows, or there is time-sensitive information that should be communicated at all times you should provide more explanations and guidance on what the visitors can do while they're waiting for the site to be available again.

Database connection lost page

Database connection lost

Breadcrumbs

Drupal Breadcrumbs

Is-active links

is-active class for links that link to the currently viewed page

Drupal provides is-active class on links in menus and blocks when the link destination is the page you're currently viewing.

Drupal messages

Drupal messages–Status, Warning and Error

Pager

Pager Full
Pager Full
Pager Mini
Pager Mini

“Submitted by” data on nodes

“Submitted by” information on Drupal nodes

Autocomplete throbber and suggestions list

Autocomplete throbber and suggestions list

Comments area and Comment form

Drupal comment form and Comments

Vertical tabs (Create/edit nodes form)

Drupal vertical tabs on node forms

Vertical tabs hide the lot of node form elements that can often be skipped, yet they're there if you need to change any defaults. Color contrast on the item summary can help with readability so you can quickly skim through what the values are.

Drupal vertical tabs on node forms with item summary color contrast

Special form submit buttons–Save, Preview, Delete

Special colors for form submit buttons–Save, Preview, Delete

Action links

Drupal action links

Project types that have a lot happening internally where organization staff performs various tasks on the system can have action links strategically placed throughout the system. Editors/staff responsible for those tasks usually aren't Drupal admins, they aren't familiar with the structure of Drupal “back-end”. They need to have custom Dashboards for their tasks and/or action links in appropriate places. The class action-links and relevant markup is borrowed from the built-in Drupal admin pages but can be used in any custom theme.

Blocks in regions

“Tools” block in regions “Highlighted”, “Content”, and “Sidebar second”
The same block Tools shouldn't look the same in all regions. Here the regions are Highlighted, Content, and Sidebar second.

Drupal themes define regions on the page you can easily add different blocks of content to. Designing for all block-region combinations is an overkill, but providing some basic guidelines is a good way to ensure things don't look weird if an editor/staffer decides their links would be best placed above content and not in the sidebar.

Views formats

There are hardly any Drupal projects that don't utilize the Views module, the super useful database query designer interface. There are several common Views Formats to choose from that affect what the Views output looks like. The most used are Unformatted list, Table, HTML List, and Grid.

Common Views Formats with Exposed filters

Would you like me to help you identify Drupal design elements? Or help you with any other Drupal problem? Please contact me and I'll summon all my skills and Drupal might to solve it for you.