Features

Last updated on
12 February 2025

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

Why use LayoutStudio

LayoutStudio is designed to make it easier to create the custom themes from scratch by providing themers with very quick layout options, abundant classes on body, blocks, comments and nodes.

LayoutStudio is also excellent for SEO optimization by putting the main content just below the header. Very few starter have this feature. We also use the Tripoli CSS reset and visual plugins for consistent cross-browser styling out of the box.

See the features list below for a complete list or watch the YouTube video.

Theme Settings Options

You can choose your layout and layout dimensions from the theme's setting page.

Watch an image on flickr.

You can also quickly create full width headers and footers.

Optimized for SEO and Accessibility

Main content area (primary) comes before sidebars, just below the header. This maximizes content for search engines. Skip-to links are also provided, maximizing accessibility.

Available Regions

In order of HTML/source code output:

  • Page Top
  • Header
  • Preface: First, Middle and Last
  • Highlighted
  • Help
  • Primary: main content area
  • Secondary: First, Middle and Last This is the first sidebar area.
  • Tertiary: First, Middle and Last. This is the second sidebar area.
  • Postscript: First, Middle and Last
  • Navigation
  • Footer
  • Page Bottom

The main layout regions of primary, secondary and tertiary are semantically named because this represents their order in the source, and because of our layout options the secondary or tertiary sidebars could be both be on the left or right depending on your layout settings.

Tripoli CSS Reset

LayoutStudio makes use of the Tripoli CSS Reset and visual plugin for great cross-browser consistency out of the box. Visit the Tripoli sample page to see changes Tripoli makes to your source output. (Please note that LayoutStudio only utilizes the base, ie reset, and the visual plugin.)

Fantastic CSS classes

Here is a partial list of the classes that LayoutStudio provides you with.

Body classes

  • Language (ID attribute): lang-en
  • Random: random-3 becomes random-10 on next refresh. Maximum random number is determine on theme settings page.
  • Unique Node or View: node-1
  • Current Node type: node-type-page
  • Front/Not-Front: front or not-front
  • Current Menu-itemt: menu-item-about
  • Logged-out/Logged-in: logged-in or not-logged-in
  • Section: first part of the path or URL alias (ie /about URL creates a section-about class)
  • Sub-Section: second part of the path or URL alias (ie /about/mission URL creates a sub-section-mission class)
  • Indicator for empty secondary, tertiary, preface and postscript regions (no-secondary and no-tertiary)
  • Current acting user role: role-authenticated-user role-manager or role-anonymous-user

Node Template Classes/ID

  • Node ID (ID attribute): node-23
  • Node Author: user-5
  • Node Authored by current user: user-me
  • Teaser or Full Node: node-teaser or node-full
  • Node Type: node-page
  • Node Type and Teaser/Full Node:node-page-teaser or node-page-full
  • Odd/Even "zebra classes": odd or even
  • Node Count: count-1
  • Node author role: role-authenticated-user role-manager

Block Template Classes/ID

  • Block ID (ID attribute): block-block-primary-links
  • Random: random-3 becomes random-10 on next refresh. Maximum random number is determine on theme settings page.
  • Block Module: indicates which module generated the block - block-block-menu
  • Odd/Even "zebra classes" within region: odd or even
  • Block Count within region: region-count-1

Comment Classes

  • Comment author role: role-authenticated-user role-manager

Help improve this page

Page status: No known problems

You can: