Designanpassung

12.09.2019 von YellowBlog

Sowohl beim Standard-Template Stockholm wie auch bei den anderen Templates verschwindet auf kleineren Bildschirmen die rechte Sidebar komplett. Ziel der Designanpassung ist es, diese Sidebar bei kleinen Bildschirmen unterhalb des Inhaltes anzuzeigen.

Template- und CSS-Anpassungen

Vorkehrungen

Von allen Dateien

  • blog.html
  • blogpages.html
  • default.html
  • error.html
  • footer.html
  • header.html
  • navigation.html
  • navigation-sidebar.html
  • navigation-tree.html
  • pagination.html
  • sidebar.html
  • sitemap.html

wurde eine Sicherung mit der Namensergänzung -org angelegt, also zum Beispiel zu blog.html wurde blog-org.html erstellt.

Keine Anpassungen

Bei den Dateien

  • error.html
  • navigation-tree.html
  • sitemap.html

wurden keine Anpassungen vorgenommen.

CSS-Anpassungen

Ziel ist es, die Sidebar auch bei kleinen Bildschirmen wieder unterhalb des Inhalts anzuzeigen. Dazu reicht es aber nicht aus, nur den CSS-Code zu verändern.

Verantwortlich für das Verhalten bei kleinen Bildschirmen ist dieser Abschnitt der Datei stockholm.css

@media screen and (max-width: 32em) {
    body {
        margin: 0.5em;
        font-size: 0.9em;
    }
    .content h1,
    .content h2 {
        font-size: 1.3em;
    }
    .footer,
    .page {
        margin: 0;
        padding: 0;
    }
    .header .sitename,
    .navigation,
    .navigation-tree {
        float: none;
    }
    .header .sitename,
    .navigation,
    .navigation-tree {
        margin-bottom: 0.5em;
    }
    .navigation-search {
        padding-bottom: 1em;
    }
    .with-sidebar .main {
        margin-right: 0;
    }
    .with-sidebar .sidebar {
        display: none;
    }
    .content .main .wikipages ul,
    .content .main .wikitags ul,
    .content .main .wikilinks  ul {
        columns: 1;
    }
}

Die Umschaltung erfolgt bei einer Breite von 512 Pixel und kleiner.

Template-Anpassungen

Die folgenden Dateien wurden mit Kommentaren versehen:

  • blog.html
  • blogpages.html
  • default.html
  • footer.html
  • header.html
  • navigation-sidebar.html
  • navigation.html
  • pagination.html
  • sidebar.html

In den folgenden Datei wurde die Reihenfolge der Elemente vertauscht:

  • blog.html
  • blogpages.html
  • default.html

Beispiel default.html

Vorher:

<?php $this->yellow->layout("header") ?>
<!-- Layout-Datei default.html mit Anpassungen und Kommentaren -->
<!-- nach Aufruf layout("header") -->
<div class="content">
<?php $this->yellow->layout("sidebar") ?>
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContent() ?>
</div><!-- Ende class class="main" -->
</div><!-- Ende class class="content" -->
<?php $this->yellow->layout("footer") ?>

Nachher:

<?php $this->yellow->layout("header") ?>
<!-- Layout-Datei default.html mit Anpassungen und Kommentaren -->
<!-- nach Aufruf layout("header") -->
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContent() ?>
</div><!-- Ende class class="main" -->
<?php $this->yellow->layout("sidebar") ?>
</div><!-- Ende class class="content" -->
<?php $this->yellow->layout("footer") ?>

Tags: Yellow CMS