Skip to Content

Eigene Panel-Styles

Für die Eiligen: Ein Beispiel-Style befindet sich im Anhang. Lies weiter bei Was habe ich gemacht ?

Panel oder Pane ?

Jeder, der mit Panels zu tun hat, kommt erstmal in Begriffsverwirrung. Hier nochmal zur Klärung:

Bereiche (Regions) heißen Panel

Blöcke darin heißen Pane

[Ab Panels-3.7 heißen die Bereiche teilweise auch Regions]

Panels bringt einige wenige Panel-Styles mit. Der interessanteste Vertreter heißt Rounded Corner - Übersetzt: Abgerundete Ecken.

Der Style kann (wie im Beispiel rechts) auf ein Pane wirken, oder aber auf ein komplettes Panel.

In beiden Fällen kommt um den eigentlichen Content ein weiteres Template. Ein CSS und diverse Grafiken machen den Rest.

Warum ein eigener Style - reicht nicht CSS ?

Für kleine Änderungen würde eine das Pane umschließende CSS-Klasse sicher reichen. Der original Panel-Style Rounded Corner reicht die im GUI einstellbare Klasse leider nicht ins umschließende Template, sondern packt die Klasse in den Content. Damit sind die umgebenen <div> unerreichbar.

OK, wenn schon neu, dann richtig !

Sobald der Hintergrund nicht mehr weiß ist, zeigt sich, dass Rounded Corners nur bedingt einsatzfähig ist. Auch eine Änderung der Grafiken auf PNG24 würde nicht helfen, weil die Konstruktion überlappende Grafiken hat, was dann sichtbar würde.

Anforderungen

  • Muss auf jedem Hintergrund gut aussehen
  • ID und Klasse soll an sinnvoller Stelle stehen
  • Style soll wiederverwendbar sein
  • Style soll für Panes und Panels funktionieren

Ort des neuen Styles

  • eigenes Modul anlegen mit Panels-Style
  • Theme um Panels-Style erweitern   <- That's the way we go !

Was habe ich gemacht ?

  1. Theme vorbereitet
  2. vorhandenen Style kopiert
  3. Dateinamen, Funktionen, ... umbenant
  4. In drupal: Clear-Cache
  5. Testen - der selbstgewählte neue Stilname sollte auswählbar sein. Siehe rechts.
  6. Ärgern - es hat nicht funktioniert !!!
  7. Allerlei Code geändert - und nochmal ClearCache. Jetzt tut's !

Jetzt konnte der Style nach eigenen Vorstellungen gestaltet werden.

Zum Testen kannst Du einfach den Style aus dem Anhang benutzen.
Die Punkte 2 bis 7 entfallen dann natürlich - bis auf ClearCache.

 

1. Theme vorbereiten

In die theme.info Datei folgende Zeilen anfügen:

; Panel-Style Plugins
plugins[panels][styles] = plugins/styles
; Wenn auch eigene Layouts angelegt werden sollen:
;plugins[panels][layouts] = plugins/layouts

Außerdem müssen im Themeordner diese Verzeichnisse angelegt werden:

2. vorhandenen Style kopieren

Ordner /modules/panels/plugins/styles/corners in mytheme/plugins/styles kopieren.

3. Umbenennen der Dateinamen, Funktionen, ...

Sinnvollerweise sollten auch die Grafiken nach dem Style benannt werden.

In den Scripten müssen jetzt alle Vorkommen von "rounded_corners" und "rounded-corners" umbenannt werden in "lightbluebox".

PS: Unterstrich oder Bindestrich waren eine tolle Stolperfalle !

4. ClearCache

Nötig ist natürlich nur ein Clear-ThemeCache.

Das braucht es bei der Entwicklung häufiger, weil auch das CSS generisch in der *.inc Datei gebildet wird

5. Testen und 6. Ärgern

NIchts funktioniert. Warum ?  Der Pfad zum Theme-Template panels-lightbluebox-box.tpl.php wird in $plugin falsch definiert. Auch an anderen Stellen werden Pfade falsch zusammengestellt. 

7. Codeänderungen

Hier die einzelnen Abschnitte - die vollständigen Dateien befinden sich im Anhang:

Die Style-Definition, auch erweitert um die Argumente css_id und css_class :

// Plugin definition
// Surprise: $theme_path contains the path to panels: "sites/all/modules/panels"
// so we have to build the correct path with drupal_get_path()
  global $theme;
  $path = drupal_get_path('theme', $theme);
  $plugin = array(
  'title' => t('Lightblue-Box'),
  'description'   => t('Pane or Panel with rounded corners'),
  'render panel'  => 'panels_lightbluebox_style_render_panel',
  'render pane'   => 'panels_lightbluebox_style_render_pane',
  'settings form' => 'panels_lightbluebox_style_settings_form', 
  'hook theme' => array(
    'panels_lightbluebox_box' => array(
      'arguments' => array('content' => NULL,'css_id' => NULL,'css_class'=> NULL),
      'path' => $path.'/plugins/styles/lightbluebox',
      'template' => 'panels-lightbluebox-box',
      ),
    ),
  );

 

Pane-Render übergibt CSS-ID und CSS-Klasse dem Style-Template

/**
 * Render callback for a SINGLE PANE.
 * Panel-ID and Class is given to the surrounding box
 */
function theme_panels_lightbluebox_style_render_pane($content, $pane, $display) {
  if (empty($content->content)) {
    return;
  }
  $css=$pane->css;
  unset($pane->css); // Carry $css to surrounding theme
  $output = theme('panels_pane', $content, $pane, $display);
 
  // Just stick a box around the standard theme_panels_pane.
  // But do not forget the $css !
 
  $output = theme('panels_lightbluebox_box', $output, (isset($css['css_id']))?$css['css_id']:'', (isset($css['css_class']))?$css['css_class']:'');
  panels_add_lightbluebox_css($display, 'pane');
  return $output;
}

 

Kleine Reparatur, damit CSS-ID nicht die generische CSS-Datei beeinflusst (Wozu diente es ??)

function panels_lightbluebox_css($display) {
  $idstr = (empty($display->css_id) ? '' : "#$display->css_id").' .lightbluebox';
  $css_id = 'lightbluebox'; 

 

Noch eine falsche Pfadberechnung geändert:

/**
 * Generates the dynamic CSS.
 *
 * Wenn alle png transparent sind, kann Box auf beliebigem Hintergrund sein.
 * Technik: Innenraum mit padding festlegen
 *          Diesen (.wrap-corner) mit bg-color fuellen
 *          Alle Kanten und Ecken draussen herum verteilen.
 */
function _panels_lightbluebox_css($idstr) {
  // $theme_path contains the path to panels: "sites/all/modules/panels"
  // so we build path with drupal_get_path()
  global $theme;
  $path = drupal_get_path('theme', $theme);
  $url =  '/'.$path.'/plugins/styles/lightbluebox'; //panels_get_path('plugins/styles/corners', TRUE);

 

Natürlich muss in panels-lightbluebox-box.tpl.php auch ID und Klasse angewendet werden. Ausschnitt:

<div class="lightbluebox<?php print ' '.$css_class; ?>" <?php if ($css_id) print "id=$css_id"; ?>>
  <div class="wrap-corner">
    <div class="t-edge"><div class="l"></div><div class="r"></div></div>

 

Template und CSS zu erkunden ist jedem Enthusiasten freigestellt, aber soviel sei verraten:

Es gibt 5 Grafikdatein - hier ein Ausschnitt aus Photoshop mit den entsprechenden Slices:

Eine Grafik beinhaltet alle vier Ecken, die anderen vier sind für die Kanten zuständig.

Diese Grafiken werden außerhalb verteilt, wodurch es möglich ist, den Innenraum passend zu färben.

Das kann man natürlich alles ganz anders machen - aber für meine Bedürfnisse war es Perfekt.

Quellen:

Sehr ausführlich steht hier beschrieben, wie man eigene einfache Styles (ohne Template und Grafiken) erzeugt. (Einfach im Sinne von block.inc oder list.inc aus den Panels-Plugins.) Das war ein super Einstieg !

In diesem Beitrag wird ein Collapsible-Style als Modul implementiert (also nicht als Theme-Erweiterung).

Kommentare

Dank dir für den tollen Artikel! Wenn man sich einmal in die ganze ctools Geschichte eingelesen hat, dann wundert man sich, wie einfach das alles ist. Aber der Einstieg... ;)

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal6>, <java>, <javascript>, <php>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

Weitere Informationen über Formatierungsoptionen

CAPTCHA
Nerd oder Robot ?
arb_it_kraft: