THEME_PATH\/MYTHEME.info<\/code>:<\/p>\n

plugins[panels][styles] = panels\/styles<\/code><\/pre>\n
Die Zeile gibt an das alle Panels Style Plugins im o.g. Verzeichnis befinden (THEME_PATH\/panels\/styles<\/code>). Alle dort abgelegten\u00a0.inc<\/code>\u00a0Dateien werden automatisch als Plugin geladen.<\/p>\n
Panels Style Plugin anlegen<\/h2>\n
THEME_PATH\/panels\/styles\/color-preset.inc<\/code>\u00a0\/** * @file * Custom panels color presets. *\/<\/code><\/p>\n
<\/code><\/p>\n
\/\/ 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‘), );<\/p>\n
<\/code><\/p>\n
\/** * Renders the pane content. *\/ function theme_MYTHEME_color_preset_style_render_pane($content) { if (!empty($content)) { return theme(‚panels_pane‘, $content); } }<\/p>\n
<\/code><\/p>\n
\/** * 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(), );<\/p>\n
<\/code><\/p>\n
return $form; }<\/p>\n
\/** * Available color presets. * @return array *\/ function theme_MYTHEME_color_preset_colors() { return array( 'grey' => t('Grey'), 'yellow' => t('Yellow'), 'pink' => t('Pink') \/\/ etc. ); }<\/code><\/p>\n
Achtung: Die in $plugin registrierten Funktionen wie\u00a0render pane<\/code>\u00a0und\u00a0render region<\/code>\u00a0werden dort\u00a0ohne<\/em>\u00a0theme_<\/code>-Prefix angegeben aber im Methodenaufruf\u00a0mit<\/em>\u00a0theme_<\/code>-Prefix.<\/p>\n
Die in\u00a0theme_MYTHEME_color_preset_colors()<\/code>\u00a0definierten Array-Keys werden wir als CSS-Klasse verwenden um unsere Panes entsprechend der Auswahl zu stylen.<\/p>\n
Preprocess-Hook<\/h2>\n
Der Preprocess-Hook pr\u00fcft ob unser Style Plugin aktiv ist und setzt entsprechend der Auswahl die CSS-Klasse auf den Pane Container.<\/p>\n
THEME_PATH\/preprocess\/panels-pane.preprocess.inc<\/code><\/p>\n
\/** * @file * Preprocess panels color presets. *\/<\/code><\/p>\n
<\/code><\/p>\n
\/** * Implements hook_preprocess_panels_pane(). *\/ function MYTHEME_preprocess_panels_pane(&$variables) {<\/p>\n
<\/code><\/p>\n
\/\/ Pr\u00fcfen 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‘]; } }<\/p>\n
return $variables; }<\/code><\/p>\n
Stylesheet<\/h2>\n
z.B. in\u00a0THEME_PATH\/sass\/components\/_color_preset.scss<\/code>\u00a0(falls kein Sass verwendet wird dann in entsprechender\u00a0style.css<\/code>):<\/p>\n
\r\n.grey {\r\n    background-color: #CCC;\r\n    color: black;\r\n}\r\n\r\n.yellow {\r\n    background-color: yellow;\r\n    border: 1px solid red;\r\n}\r\n\r\n.pink {\r\n    background-color: deeppink;\r\n    color: white;\r\n    font-size: 120%;\r\n    \r\n    h2 {\r\n        text-transform: uppercase;\r\n    }\r\n}\r\n<\/code><\/pre>\n
<\/p>\n
Fazit<\/h2>\n
Wir haben mit unserem Style Plugin die Usability erh\u00f6ht und stellen auch bei sp\u00e4teren \u00c4nderungen sicher dass die einzelnen Panes immer den Vorgaben des Corporate Designs entsprechen.<\/p>\n","protected":false},"excerpt":{"rendered":"
Drupal ist m\u00e4chtig – ohne eine einzige Zeile Code kann schon Gro\u00dfartiges 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\u00a0Panels Style Plugins\u00a0das Styling einzelner Panels Panes vereinfachen und sicherstellen dass […]<\/p>\n","protected":false},"author":5,"featured_media":1389,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[78],"tags":[224],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1388"}],"collection":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":1,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"predecessor-version":[{"id":1391,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1388\/revisions\/1391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media\/1389"}],"wp:attachment":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}