Ein einfaches Drupal-Theme erstellen 2: das Styling

Noch sieht unser Theme etwas traurig aus, aber das werden wir gleich ändern.

ohnestyles
ohnestyles

Ich passe erstmal die Schriftarten an und vergebe für h1-h3 Kapitälchen:

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-size: 14px;    
  font-weight: normal;
  line-height: 24px;
  color: #43473b;
}


h1, h2, h3, h4, h5, h6 {
  font-family: Times;
  font-weight: normal;
  color: #43473b;
}

h1 { font-size: 45px; font-variant:small-caps;}
h2 { font-size: 30px; font-variant:small-caps;}
h3 { font-size: 22px; font-variant:small-caps;}

a { color: #43473b; 
    text-decoration: none;
}
a:hover { color: #fc737b; 
        }

Dann gehts an die page.tpl.php, aus der entnehmen wir nämlich, welche divs für welche Komponenten vorgesehen sind.

Anfangen tut das Ganze mit gleich zwei umgebenden divs für die Seite:

<div id="page-wrapper"><div id="page">

Ich setze mal nur den page-wrapper auf 1260px. Dann kommt die div header, da wirds schon interessanter:

<div id="header"><div class="section clearfix">

      <?php if ($logo): ?>
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
          <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
        </a>
      <?php endif; ?>

      <?php if ($site_name || $site_slogan): ?>
        <div id="name-and-slogan">
          <?php if ($site_name): ?>
            <?php if ($title): ?>
              <div id="site-name"><strong>
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
              </strong></div>
            <?php else: /* Use h1 when the content title is empty */ ?>
              <h1 id="site-name">
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
              </h1>
            <?php endif; ?>
          <?php endif; ?>

          <?php if ($site_slogan): ?>
            <div id="site-slogan"><?php print $site_slogan; ?></div>
          <?php endif; ?>
        </div> <!-- /#name-and-slogan -->
      <?php endif; ?>

      <?php print render($page['header']); ?>

    </div></div> <!-- /.section, /#header -->

Zuerst wird das Logo ausgegeben, das ist unser Header-Bild. Dann kommt der Name der Seite und falls vorhanden der Slogan. Man darf sich hier ein wenig über das div-Gestrüpp wundern, das geht sicher auch einfacher, aber wir lassens jetzt mal so wie es ist. Ich setze mal nur eine Hintergrundfarbe für den Header:

#header {background-color: #bfd0ea; 
        }

Und ich schiebe den Block für die Suche nach rechts, wie der heißt habe ich mit Chrome rausgefieselt:

block-search-form
block-search-form

Das zugehörige css ist:

#block-search-form{float: right;
                    padding: 10px;}

Jetzt kriegt der header noch eine Hintergrundfarbe:

#navigation {    background-color:#bfd0ea;    
                }

Und beim Hauptmenü passe ich noch die Schrift an:

#main-menu {
    font-family: Times;
    font-variant:small-caps;
    font-size:24px;
    
    }

Das Sekundärmenü möchte ich in der Fußzeile haben, da packe ich mir den ganzen Block in der page.tpl,php und schiebe ihn nach der div footer hin:

<div id="footer"><div class="section">
      <?php print render($page['footer']); ?>
    </div>
    
    <?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Secondary menu'))); ?>
      
    </div> <!-- /.section, /#footer -->

Die sidebar-first sitzt noch nach dem content, die klemme ich mir auch im Ganzen:

<?php if ($page['sidebar_first']): ?>
        <div id="sidebar-first" class="column sidebar"><div class="section">
          <?php print render($page['sidebar_first']); ?>
        </div></div> <!-- /.section, /#sidebar-first -->
      <?php endif; ?>

und schiebe sie vor die div content. Jetzt positionieren wir noch sidebar-first, content und sidebar-second nebeneinander:

#content {        padding: 20px;
                width: 600px;
                float:left;
                
}                
                
#sidebar-first {width: 300px;
                float:left;
                padding: 10px;
                }
                
#sidebar-second{
    width:300px;
    float: left;
}

Das sieht jetzt schon im Ganzen gut aus:

seitentitel-kleingeschrieben
seitentitel-kleingeschrieben

Was mich noch stört: wenn man auf eine andere Seite als die Startseite wechselt, wird der Seitentitel klein geschrieben, das hätte ich gern noch anders. Dafür genügt ein kleiner Eingriff in der page.tpl.php, in der ist hinterlegt, dass der Seitentitel nur in h1 formatiert wird, wenn der Content Title leer ist

<?php if ($site_name): ?>
            <?php if ($title): ?>
              <div id="site-name"><strong>
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
              </strong></div>
            <?php else: /* Use h1 when the content title is empty */ ?>
              <h1 id="site-name">
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
              </h1>
            <?php endif; ?>
          <?php endif; ?>

Dafür editiere ich den ersten Block  hinter der der Zeile

<?php if ($title): ?>

und setze einen h1-Tag:

<div id="site-name"><strong>
                <h1><a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a></h1>
              </strong></div>

Das wars! Jetzt wird der Seitentitel immer h1 formatiert.

Mir ist das Styling jetzt schön genug, ich lass es so, es sieht meinem TwentyFourteen ähnlich genug.

finish
finish

Ich hoffe, ihr habt soviel Spaß beim Nachbauen wie ich beim Basteln!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert