Drupal theming | drupal.org

Document Status

Work in progress. See issue for more information: #1902848: .css documentation?

Getting started with Zurb Foundation

Zurb foundation is a great theme to get your website or application to a point of release. It has a strong component library and features lots of options and abilities for responsive design.

Get acquainted with Zurb Foundation

Be sure to visit the official Zurb Foundation theme documentation so you can leverage more out of your theme:

Foundation 4 Documentation
Foundation 3 Documentation

Drupal Zurb Foundation Versions

The Drupal adaptation of zurb foundation leverages different versions of foundation. There's a significant difference between the drupal Zurb Foundation 1.x and the 2.x branch.

The Drupal 1.x branch supports Zurb Foundation 3.
The Drupal 2.x branch supports Zurb Foundation 4.

Kalatheme Screenshots

Here are some screenshots for Kalatheme.

New Responsive Layouts:

Layouts

Style Plugin Options:

Styles

Subtheme Example Using a wrapbootstrap Library:

Subtheme

Settiings:

Settings

Bootstrap Customization Interface:

Customize

Code for Panels Layout:

Code

Radix Subtheming Guide

The latest dev version ships with a more flexible radix_starter theme to kickstart sub theming. Here's a quick guide.

Installing Compass Radix gem

Install rubygems: sudo apt-get install rubygems
Install Compass Radix: sudo gem update; sudo gem install compass_radix

This should also install sass, compass and other dependencies.

Create a subtheme

Get the latest radix version: git clone --recursive --branch 7.x-2.x http://git.drupal.org/project/radix.git
Copy radix_starter and place it in your themes directory.
Rename radix_starter to YOUR_THEME_NAME.
Rename radix_starter.info to YOUR_THEME_NAME.info
Edit YOUR_THEME_NAME.info. Add a name, description and uncomment the line hidden: true.
Open a terminal and cd to your theme directory.
Run the following command: compass clean && compass watch.
Visit Appearance in your Drupal admin and enable your new theme.

Customization

In your theme folder, you will find a _variable.scss partial under assets/sass. This file holds all the SASS variables used in the theme. You can customize your theme colors from there.

Style Guide

Style Guide provides a visual testing page for Drupal themes. Quickly compare the display of common elements across your themes, and verify that your new theme addresses all common style elements.

Overview

The Style Guide module creates a preview page for displaying common theme elements in all active themes for your Drupal site. The module comes with previews for common HTML elements, such as tables, forms, links and lists. The Style Guide module creates an API and preview page for displaying common theme elements. Use it to preview items such as tables, menus, and lists in your custom themes.

Purpose

The purpose of a visual style guide as both a general theming and development tool is to ensure that common site elements are styled in a consistent and intentional way. For further reference see

Installing Style Guide

See Installing contributed modules

Using Style Guide

Forms API - Modify Form widgets with hook_field_widget_form_alter()

Widgets are the parts that make up forms, like textarea widgets, file upload widgets etc.
By altering them you can add, remove or change parts.

You can alter individual form widgets using the following hook:
hook_field_widget_form_alter()
hook_field_widget_WIDGET_TYPE_form_alter

There are at least two ways to find this WIDGET_TYPE;

1. Checking used widgets using hook_field_widget_form_alter

Add the hook_field_widget_form_alter to your module/theme, like this;

<?php
function YOUR_THEME_field_widget_form_alter(&$element, &$form_state, $context) {
  echo "\n YOUR_THEME_field_widget_form_alter";
  echo "\n element: ";
  print_r($element);
  
  echo "\n widget type: ";
  print_r($context['instance']['widget']['type']);
}
?>

Checking the element you can find the widget you are looking for, then the $context['instance']['widget']['type'] contains the WIDGET_TYPE.

2. Checking hook_field_widget_info in the module

You can locate the hook_field_widget_info in the module which widget you want to alter.

Export Display Suite settings

This documentation is written for the 7.x-2.x version of Display Suite.

Display Suite exposes all its settings (displays, fields and view modes) to CTools. This allows you to easily move the displays that you configured to another environment (e.g., from the development to the staging environment).

You can export Display Suite settings with the modules Features or the CTools sub module Bulk Export.

Export settings using Bulk Export

Enable the module Bulk Export at Administration > Modules (admin/modules)
Go to Administration > Structure > Bulk Exporter (admin/structure/bulk-export)
Choose the vertical tab "Display Suite"
Select all the elements that you want to export
Enter a module name, e.g., "ds-settings"
Click "Export". Bulk Export generates export code that needs to be placed in a module.
Create a folder, e.g., "ds-settings" in the modules directory of your website. Copy and paste the export code into the respective files, e.g., "ds-settings.info", "ds-settings.module" and "ds-settings.inc".

You can now move this module to another environment (e.g., staging) and enable it there.