Drupal ist mächtig – ohne eine einzige Zeile Code kann schon Großartiges entstehen. Als Webagentur setzen wir auf individuelles Interface Design. Doch gerade dann macht es Sinn unseren Sitebuildern eine Auswahl an vorgefertigten Farb- und Typografiekombinationen anzubieten. Im konkreten Fall wollen wir mit Hilfe eines Panels Style Plugins das Styling einzelner Panels Panes vereinfachen und sicherstellen dass Panes immer nach verschiedenen vordefinierten Styles ausgegeben werden.

Ziel

Eine Sidebar mit unterschiedlichen Pane-Boxen (Farbe, Icons, Typografie, …) befüllen und verschiedene Farb- und Typografiekombinationen zur Auswahl anbieten.

Annahmen

Für unser Beispiel kann jedes beliebige Drupal 7 Theme verwendet werden. Wir verwenden ein Subtheme „MYTHEME“ auf Omega 4.x Basis.

THEME_PATH: Pfad zum Theme (z.B. sites/all/themes/MYTHEME) MYTHEME: Name des Themes color_preset: Name unseres Style Plugins

Code: Gist auf Github

Panel Style Plugin Verzeichnis definieren

THEME_PATH/MYTHEME.info:

plugins[panels][styles] = panels/styles

Die Zeile gibt an das alle Panels Style Plugins im o.g. Verzeichnis befinden (THEME_PATH/panels/styles). Alle dort abgelegten .inc Dateien werden automatisch als Plugin geladen.

Panels Style Plugin anlegen

THEME_PATH/panels/styles/color-preset.inc /** * @file * Custom panels color presets. */

// Plugin registrieren $plugin = array( ‚title‘ => t(‚Color preset‘), ‚description‘ => t(‚Set a color preset.‘), // Achtung: render pane wird im Methodenaufruf mit „theme_“ prefixed! ‚render pane‘ => ‚MYTHEME_color_preset_style_render_pane‘, ‚pane settings form‘ => ‚MYTHEME_color_preset_settings_form‘, ‚category‘ => t(‚MYTHEME‘), );

/** * Renders the pane content. */ function theme_MYTHEME_color_preset_style_render_pane($content) { if (!empty($content)) { return theme(‚panels_pane‘, $content); } }

/** * Color preset settings form. */ function MYTHEME_color_preset_settings_form($style_settings) { $form = array(); $form[‚preset_color‘] = array( ‚#type‘ => ’select‘, ‚#title‘ => t(‚Choose color preset‘), ‚#default_value‘ => (isset($style_settings[‚preset_color‘])) ? $style_settings[‚preset_color‘] : FALSE, ‚#options‘ => theme_MYTHEME_color_preset_colors(), );

return $form; }

/** * Available color presets. * @return array */ function theme_MYTHEME_color_preset_colors() { return array( 'grey' => t('Grey'), 'yellow' => t('Yellow'), 'pink' => t('Pink') // etc. ); }

Achtung: Die in $plugin registrierten Funktionen wie render pane und render region werden dort ohne theme_-Prefix angegeben aber im Methodenaufruf mit theme_-Prefix.

Die in theme_MYTHEME_color_preset_colors() definierten Array-Keys werden wir als CSS-Klasse verwenden um unsere Panes entsprechend der Auswahl zu stylen.

Preprocess-Hook

Der Preprocess-Hook prüft ob unser Style Plugin aktiv ist und setzt entsprechend der Auswahl die CSS-Klasse auf den Pane Container.

THEME_PATH/preprocess/panels-pane.preprocess.inc

/** * @file * Preprocess panels color presets. */

/** * Implements hook_preprocess_panels_pane(). */ function MYTHEME_preprocess_panels_pane(&$variables) {

// Prüfen ob unser Style Plugin aktiv ist. if(isset($variables[‚pane‘]->style[’style‘])) { if($variables[‚pane‘]->style[’style‘] === ‚color_presets‘) { // Setzt die in o.g. theme_MYTHEME_preset_colors definierte Farbe als CSS-Klasse $variables[‚attributes_array‘][‚class‘][] = $variables[‚pane‘]->style[’settings‘][‚preset_color‘]; } }

return $variables; }

Stylesheet

z.B. in THEME_PATH/sass/components/_color_preset.scss (falls kein Sass verwendet wird dann in entsprechender style.css):


.grey {
    background-color: #CCC;
    color: black;
}

.yellow {
    background-color: yellow;
    border: 1px solid red;
}

.pink {
    background-color: deeppink;
    color: white;
    font-size: 120%;
    
    h2 {
        text-transform: uppercase;
    }
}

Fazit

Wir haben mit unserem Style Plugin die Usability erhöht und stellen auch bei späteren Änderungen sicher dass die einzelnen Panes immer den Vorgaben des Corporate Designs entsprechen.