Center

102
7.X
Demo to see how the theme looks in a sample Drupal site Apply theme

Center is a base theme that aims to speed up the theming process by offering a starting point for building a custom theme and allowing easier access to CSS classes. Center is not for everyone, as it caters to theme developers who prefer developing in code, rather than the UI.

The primary goals of Center are to provide:

  • Better access to CSS classes in markup.
  • Better default markup.
  • Reusable HTML components.

Better access to CSS classes in markup.

Center does not add any CSS. It strips CSS away, leaving what can be considered vital or useful core CSS styles. Center overrides many of Drupal's core templates and theme functions, which allows theme developers better access to CSS classes via preprocess functions.

Better default markup.

While the markup in Center is more clean than that of Stark, it isn't minimal. Semantic markup choices need to be made on a per project specific. Center simply tries to create smart defaults and allow for easy overriding.

Center has a theme setting for removing all default markup from fields. This option is enabled by default. WARNING: This also removes field labels!! This allows theme developers to dictate field markup, labels and CSS classes from the parent template such as node.tpl.php.

This setting can be disabled from the theme settings page at /admin/appearance/settings/center for Center or your sub-theme. Alternatively, you can disable it in your sub theme's .info file like so

settings[nuke_fields] = FALSE

Development Mode

Center has a development mode that prints out some helpful information about themed items in HTML comments.

Development mode is disabled by default. It can be enabled from the Center's theme settings page at /admin/appearance/settings/center or that of your sub-theme. Alternatively, you can disable it in your sub theme's .info file like so

settings[dev_mode] = TRUE

When Development mode is enabled, HTML comments are added to Fields, Nodes, Blocks and Taxonomy terms showing values for certain variables that are useful when targeting these items with preprocess functions or theme hook suggestions. These comments do not affect the structural markup of the page and are easily viewable with your favorite web inspector. For more information about these items use devel or devel_themer.

For example, the Body field shown in the Full view mode of an Article node would have the following comment appended.

<!-- Name: body | Bundle: article | View Mode: full -->

Reusable HTML components.

Center includes alternative theme functions and templates. These can be applied via theme hook suggestions, which allows for targeted application of markup variations and more manageable templates.

View mode based theme hook suggestions

Center adds two additional theme hook suggestions to nodes and taxonomy terms that are based on view mode.

For nodes:

  • node--[mode].tpl.php
  • node--[mode--[bundle].tpl.php

For terms:

  • node--[mode].tpl.php
  • node--[mode]--[vocabulary].tpl.php

These are most useful when leveraging a lot of custom view modes on your site, especially those that are meant to be used across multiple content types or terms.

Center makes a fine base theme on it's own, however it is developed in conjunction with Prototype, a SASS based starter theme built to take advantage of Center.

 

Want to customize this theme in a unique way for your website, we are here to help you!

We also build custom Drupal themes

 

Get a custom theme