it-swarm.com.de

Wie erstellen Sie ein benutzerdefiniertes Panel-Layout in einem Omega-Unterthema?

Ich möchte ein neues benutzerdefiniertes Panels-Layout erstellen, das auf einem der Omega-Panels-Layouts basiert, und es in mein Omega-Unterthema einfügen, aber ich kann anscheinend keinen Weg finden, dies zu tun.

Bisher habe ich meinem Unterthema Folgendes hinzugefügt: .info Datei:

; PLUGINS
plugins[panels][layouts] = panels/layouts

Ich habe dann das Layout übernommen, aus dem ich arbeiten möchte (omega_12_twocol_6_6_bricks) und umbenannt und kopiert in sites/all/themes/mycustom/panels/layouts/omega_12/mycustom_12_twocol_6_6_bricks. Ich habe dann alle Dateien im mycustom_12_twocol_6_6_bricks Verzeichnis, das 'omega' durch 'mycustom' ersetzt. Dann, in meinem mycustom_12_twocol_6_6_bricks.inc Datei, die ich geändert habe:

function omega_omega_12_twocol_6_6_bricks_panels_layouts() {
  $items['omega_12_twocol_6_6_bricks'] = array(
    'title' => t('Two Column 6-6 bricks'),
    'category' => t('Omega: 12 Column Grid'),
    'icon' => 'omega_12_twocol_6_6_bricks.png',
    'theme' => 'omega_12_twocol_6_6_bricks',
    'admin css' => '../omega_panels_admin_12.css',
    'regions' => array(
      'top' => t('Top'),
      'left_above' => t('Left above'),
      'right_above' => t('Right above'),
      'middle' => t('Middle'),
      'left_below' => t('Left below'),
      'right_below' => t('Right below'),
      'bottom' => t('Bottom'),
    ),
  );

  return $items;
}

zu

function mycustom_omega_12_twocol_6_6_bricks_panels_layouts() {
  $items['mycustom_12_twocol_6_6_bricks'] = array(
    'title' => t('My Custom Two Column 6-6 bricks'),
    'category' => t('Omega: 12 Column Grid'),
    'icon' => 'mycustom_12_twocol_6_6_bricks.png',
    'theme' => 'mycustom_12_twocol_6_6_bricks',
    'admin css' => '../omega_panels_admin_12.css',
    'regions' => array(
      'top' => t('Top'),
      'left_above' => t('Left above'),
      'right_above' => t('Right above'),
      'middle' => t('Middle'),
      'left_below' => t('Left below'),
      'right_below' => t('Right below'),
      'bottom' => t('Bottom'),
    ),
  );

  return $items;
}

Ich habe auch die admin-CSS-Datei in das relative Verzeichnis kopiert, wie in der .inc-Datei angegeben, den gesamten Cache geleert und update.php ausgeführt, aber ich kann mein neues Layout nicht sehen, wenn ich ein neues Panel hinzufüge.

Die Modulversionen, die ich verwende, sind:

  • Drupal 7.22
  • Panels 3.3
  • Omega 3.1

Jede Hilfe hier geschätzt.

Danke vielmals

5
Dan Murfitt

Der grundlegende Prozess ist:

Bearbeiten Sie die Datei MYTHEME.info:

; PLUGINS
plugins[panels][layouts] = panels/layouts

Erstellen Sie ein Verzeichnis in panel/layouts/mypanel

Erstellen Sie Ihre Include-Panels/Layouts/mypanel/mypanel.inc

/**
 * Implements hook_panels_layouts().
 */
function mytheme_mypanel_panels_layouts() {
  $items['mypanel'] = array(
    'title' => t('My Panel'),
    'category' => t('My Site'),
    'icon' => 'mypanel.png',
    'theme' => 'mypanel',
    'regions' => array(
      'top' => t('Top'),
      'left' => t('Left column'),
      'right' => t('Right column')
    ),
  );

  return $items;
}

Erstellen Sie Ihre 50x75 mypanel.png und platzieren Sie sie als panel/layouts/mypanel/mypanel.png

Erstellen Sie die Vorlagendatei als panel/layouts/mypanel/mypanel.tpl.php

<div class="panel-display mypanel" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-panel mypanel-top grid-16 alpha omega">
        <div class="inside"><?php print $content['top']; ?></div>
    </div>

    <div class="panel-panel mypanel-left prefix-1 grid-4 alpha">
        <div class="inside"><?php print $content['left']; ?></div>
    </div>

    <div class="panel-panel mypanel-right grid-9 suffix-1 omega">
        <div class="inside"><?php print $content['right']; ?></div>
    </div>
</div>

Laden Sie den Cache hoch, leeren Sie ihn und prüfen Sie, ob Sie eine Bedienfeldseite erstellen können. Neun von zehn Fällen hat das Problem, dass Panels benutzerdefinierte Panel-Layouts abrufen, mit einer falsch benannten Include- oder Vorlagendatei zu tun, was meines Erachtens Ihr Problem ist.

7
mpdonadio

Kopieren Sie einen Ordner des vorhandenen Layouts in das Themenverzeichnis Ihrer Site, um ihn als Vorlage oder Gliederung zu verwenden, die wir dann umbenennen, z. B. twocol. Wenn Ihr Thema mytheme heißt, wird der Ordner twocol nach/sites/all/themes/mytheme/layouts/twocol kopiert.

Dieser Ordner enthält vier Dateien. Diese Dateien sind:

  1. twocol.png, ein Screenshot des Layouts.
  2. twocol.css, ein Stylesheet für das Layout.
  3. twocol.inc enthält nur eine Implementierung von hook_panels_layouts ().
  4. panel-twocol.tpl.php, die Vorlagendatei für das Layout.

Wir müssen die Dateien umbenennen. Wir werden ein einfaches Layout mit einer Zeile und zwei Spalten erstellen, die als onerowtwocols bezeichnet werden. Ersetzen Sie alle Twocols-Namen in den Dateinamen durch onerowtwocols, mit Ausnahme von panel-twocol.tpl.php, das in onerowtwocols.tpl.php umbenannt werden muss (d. H. Auch panel- aus dem Namen entfernen). Vergessen Sie nicht, den Ordner auch in onerowtwocols umzubenennen.

Jetzt müssen wir die Info-Datei unseres Themas ändern, die in diesem Beispiel in unserem Stamm-Themenordner unter/sites/all/theme/mytheme mit dem Namen mytheme.info vorhanden ist. Wir müssen Drupal, wo sich der Ordner mit den benutzerdefinierten Bedienfeldlayouts für dieses Thema befindet, mitteilen, indem wir die folgende Zeile am Ende der Datei hinzufügen:

; Panels layouts. You can place multiple layouts under the "layouts" folder.
plugins[panels][layouts] = layouts

Der Titel wird in Drupal angezeigt und in die Funktion t()) eingeschlossen, die ihn übersetzbar macht. Wir verwenden 'title' => t ('Eine Zeile, zwei Spalten'). .

Der Screenshot des Layouts ist der nächste, es wird 'icon' => 'onerowtwocols.png' sein. Das Thema ist der Name der Vorlagendatei ohne die Erweiterung .tpl.php, wie folgt: 'theme' => 'onerowtwocols'.

Das CSS: 'css' => 'onerowtwocols.css'.

Im Panel-Array definieren wir die Bereiche, in denen Inhalte platziert werden können, sobald unser Layout fertig ist. Fügen Sie einfach ein neues Element für jeden Bereich hinzu. Am Ende erhalten Sie Folgendes:

'panels' => array(
    'top' => t('Top'),
    'left' => t('Left side'),
    'right' => t('Right side')
),

sie finden ein Plugins-Array (in der .inc-Datei) wie folgt:

$plugin = array(
  'title' => t('One row two columns'),
  'category' => t('onerowtwocols'),
  'icon' => 'onerowtwocols.png',
  'theme' => 'onerowtwocols',
  'css' => 'onerowtwocols.css',
  'regions' => array(
    'top' => t('Top'),
    'right' => t('Right side'),
    'left' => t('Left side')
  ),
);

... also bearbeiten Sie einfach dieses Array, mehr oder weniger mit den obigen Anweisungen (es ist ziemlich offensichtlich). Bearbeiten Sie den Screenshot so, wie Sie Ihr Layout am besten darstellen möchten. Stellen Sie sicher, dass Sie die Dateigröße (in Pixel) der ursprünglichen PNG-Datei beibehalten, damit sie in der Benutzeroberfläche von Panels schön und sauber aussieht.

Beginnen wir nun mit dem eigentlichen Layoutteil. Öffnen Sie onerowtwocols.tpl.php und nehmen Sie sich einen Moment Zeit, um zu sehen, wie das Layout mit zwei Spalten eingerichtet wurde. Die kleinen PHP - Schnipsel wie print $ content ['left']; werden verwendet, um den Bereich zu definieren, in dem Inhalte hinzugefügt werden können. Wir werden teilweise den vorhandenen HTML-Code verwenden und einige unserer eigenen ändern. Wir wird von außen beginnen und sich hineinarbeiten. Das äußere Div wird fast gleich bleiben, wir werden nur eine Klasse in unsere eigene ändern:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <!-- Our content goes here -->
</div>

Das PHP - Snippet innerhalb des div ermöglicht die Verwendung von CSS über die Panels-Benutzeroberfläche. Wir werden es belassen, aber es ist besser, CSS nur über ein Stylesheet zu verwenden, um den Stil von unserem PHP zu trennen Als nächstes erstellen wir zwei Zeilen:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
</div>

Da wir keine feste Breite und Höhe festlegen, können wir beiden Zeilen dieselbe Klasse zuweisen. Jetzt erstellen wir die beiden Spalten in der unteren Zeile:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
    <div class="panel-1row2cols-row clearfix">
        <div class="panel-1row2cols-left"><!-- Our content goes here --></div>
        <div class="panel-1row2cols-right"><!-- Our content goes here --></div>
    </div>
</div>

Schließlich werden wir unsere Bereiche unter Verwendung der Namen hinzufügen, die wir in der Datei onerowtwocols.inc verwendet haben:

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><?php print $content['top']; ?></div>
    <div class="panel-1row2cols-row clearfix">
        <div class="panel-1row2cols-left"><?php print $content['left']; ?></div>
        <div class="panel-1row2cols-right"><?php print $content['right']; ?></div>
    </div>
</div>

Dies bedeutet, dass nur noch eine Datei zum Bearbeiten übrig ist, unsere CSS-Datei. Wir werden das Layout an den Bereich anpassen, in dem es sich befindet, sodass wir keine festen Breiten angeben:

Das äußere Div und die Zeilen sind 100%:

.panel-1row2cols {
    width: 100%;
}
.panel-1row2cols-row{
    width: 100%;
}
Our columns will float to the left and to the right:
.panel-1row2cols-left {
    float: left;
}
.panel-1row2cols-right {
    float: right;
}

Schließlich müssen wir unser Layout einsatzbereit machen, indem wir den Cache leeren, damit es tatsächlich mit den anderen Layouts angezeigt wird.

4
user13530