Drupal - Style | wedi

You are here

Drupal - Style

----------------------------------------------------
I             Drupal-Styling                       I
----------------------------------------------------
 
Ein Theme besteht aus folgende Dateien:
    .info    ... Beschreibung des Themes
    .css     ... CSS Beschreibung
    logo.png ... Logo
    pic.png  ... zusaetzliches Bild
 
Ablage der Themedateien:
    ./sites/all/themes/<themename>/
 
 
<themename>.info
----------------------------------------------------
    ;$Id$
    name = <themename>
    description = Theme Beschreibung
    version = 1.0
    core = 6.x
    base theme = bluemarine         // von existierendem Theme ableiten
    stylesheet[all][] = style.css
    stylesheet[all][] = new.css     // Medientypen: all, screen, print
    screenshot = pic.png            // oder Datei screenshot.png benennen
 
 
new.css
----------------------------------------------------
    /**
     * Styles zum Ueberschreiben der abgeleiteten Styles
     * $Id$
     */
 
    /**
     * Plain white right navigation
     */
    #sidebar-right{
        border-left: 1px solid #ea940c;
        background-color: white;
    }
 
    /**
     * add background image
     */
    #sidebar-left{
        background: url (pic.png) no-repeat top left;
        border-right: 1px solid #ea940c;
    }
 
 
Template Struktur (Vorgabe wie Inhalte dargestellt werden)
----------------------------------------------------
    page.tpl.php  ... Haupttemplate fuer die Seite,
                      beinhaltet <html><head></head><body>...
    node.tpl.php  ... zustaendig fuer die Anzeige der Node-Inhalte
                      vorhandene Variablen: $title
                                            $content
                                            $terms
    block.tpl.php ... Rendern eines Blocks
                      vorhandene Variablen: $block
    box.tpl.php   ... Rendern einer Box
                      vorhandene Variablen: $title
                                            $content
                                            $region
 
 
Regions-Variablen
----------------------------------------------------
    $header, $left, $right, $footer, $content
    CSS-IDs: sidebar-right, sidebar-left
        z.B.:   <td id="sidebar-left">
                    <?php print $left ?>
                </td>
 
                <?php if($right){ ?>
                    <div id="sidebar-right">
                        <?php print $right ?>
                    </div>
                <?php } ?>
 
 
template.php
----------------------------------------------------
    function phptemplate_<hookname>()
                         preprocess_block
                         block
                         preprocess_node
                         node
                         preprocess_page
                         page
                         breadcrumb
 
    falls z.B. "page"-Funktion implementiert wird, wird "page.tpl.php"
    nicht mehr aufgerufen
    "preprocess" -> string vor Ausgabe manipulieren
 
 
Theming fuer Inhalte
----------------------------------------------------
    - Aufruf:
        theme('<themename>', $arg1, $arg2, ...)
                image
                links
                progress_bar
                username
                table
 
    - durchsuchte Hooks:
        theme_themename, themename
 
    - Theme registrieren
        function <modulename>_theme()
        {
            return array('<themename>' => array(
                'arguments' => array('content' => NULL),
            ),);
        }
 
        zusaetzliche Informationen:
            http://api.drupal.org/api/function/hook_theme
 
    - Theme-Hook-Funktion implementieren
        function theme_<themename>($content)
        {
            $output = '<div id="style-id"> ... </div>';
            return $output;
        }
 
    - Stylesheet erstellen
        <modulename>.css:
            #style-id{
                font-size: 18pt; ...
            }
 
        muss in der Theme-Hook-Funktion includiert werden:
            $module_path = drupal_get_path('module', '<modulename>');
            $full_path = $module_path . '/<modulename>.css';
            drupal_add_css($full_path);
 
 
Theming Reihenfolge
----------------------------------------------------
    1. Module-Theming
    2. Default-Theming
    3. Overridden-Theming
 
    1. theme_themename() - Funktion
    2. themename.tpl.php:
            <?php
                // $Id$
            ?>
            HTML-Code mit eingebettetem PHP-Code