Anleitung


Template HAPPY


Das Template Happy beinhaltet 6 verschiedene Farbschemas. Wie man diese ändern kann, entnehmen Sie aus der Anleitung: CMS Scorpion - Allgemeine Anleitung.
Bei diesem Template sind alle Modulpositionen, mit der Ausnahme von Sidebar-A, verfügbar. Es können allerdings alle Menüarten: Topmenü, Sidebar-A, Sidebar-B und Footermenü benutzt werden. Allerdings verhält sich bei diesem Template das Menü Sidebar-A wie das Topmenü, doch dazu später mehr.

Den Einbau der Menüs, der Sitemap, des Kontaktformulars, etc. entnehmen Sie aus der Anleitung: Wildcards


Installations Hinweis

Um den Style (Darstellung) der Webseite wirksam zu machen, müssen Sie die Schreibrechte der Datei template/happy/css/template/style.css auf cdmod777 stellen.
Weitere Informationen zu Schreibrechte finden Sie hier: CMS Scorpion - Installation



Menü

Die Erstellung eines Menüpunktes erfolgt bei diesem Template etwas anders als bei anderen Templates. Der Grund hierfür ist, dass dieses ein sogenanntes OnePage Template ist. Wollen Sie nun wie auf der Demo Webseite von Happy zu einem bestimmten Punkt Scrollen, so dürfen Sie keinen "normalen" Menüpunkt im Administrator Bereich erstellen. Sie müssen hierfür nun einen EXTERNEN LINK mit der Einstellung Intern Öffnen erstellen. In das Feld Link extern müssen Sie nun eintragen, zu welcher Position dieser Menüpunkt gehört.
Die Positionen wurden im Template bereits fix vergeben. So lautet die sogenannte Section oder ID einer Position z.B. section-2.
Als fixe Positionen wurden die Modulpositionen herangenommen, so ist fast jede Modulposition ein Bereich.

In das Feld Link extern müssen Sie zuerst den voreingestellten Inhalt http:// löschen, danach tippen Sie das Zeichen Route (#) ein und daran anschließend die ID Nummer. Dies sieht z.B. wie folgt aus: #section-2


Liste der verfügbaren Positionen inkl. ID

  • Header-B - section-2
  • Header-C - section-3
  • Main-Top - section-4
  • Main - section-5
  • Main-Bottom - section-6
  • Bottom-Full-A - section-7
  • Bottom-Full-B - section-8
  • Bottom-Full-C - section-9
  • Bottom-A - section-10
  • Bottom-B - section-10
  • Bottom-C - section-10

Natürlich können Sie auch normale Menüpunkte erstellen, in welchen Sie auf Unterseiten wechseln und ebenfalls den Menüpunkt Externer Link für externe Links benutzen.


Dieses Topmenü wurde nur für eine Ebene vorbereitet. Unterebnen des Menüs werden NICHT angezeigt.


Sidebar-A Menü

Da das Topmenü bzw. dieses Template eine OnePage ist, gibt es im eigentlichen Sinne keine Unterseiten (obwohl es natürlich auch so genutzt werden kann). Deshalb wurde die Modulposition Header-A und das Menü Sidebar-A der Modulposition Navbar und dem Topmenü gleich empfunden.
Das bedeutet nun, diese Positionen und Menüs wurden gleich aufgebaut. So können Sie nun auf weiteren Unterseiten ein anderes Topmenü anzeigen lassen, wie Sie das auch bei der Demo Seite von Happy sehen können.

Das hat nun den Grund, Sie befinden Sich z.B. auf der Unterseite Sitemap oder Impressum, haben allerdings die Modulpositionen für welche die Menüpunkte stehen nicht eingebunden, so ist dieser Menüpunkt sozusagen ohne Funktion. Um dieses zu umgehen verwenden Sie nun diese Modulposition und Menüpunkt.


Beispiel - verwendung Topmenü

Beispiel - verwendung Sidebar-A Menü


Buttons

Das Template Happy ist mit dem System Boostrap aufgebaut. Dieses verwendet eigene Buttons. Doch diese sind nicht an die Farben dieses Templates angepasst. Hierzu haben wir einen eigenen Button mit den Design dieses Templates angepasst.


Einbaucode für den Spezial Button

<a class="button-happy" href="URL">Button Inhalt</a>

Beispiele und den Einbaucode von den Standard Buttons finden Sie auf der Demo Webseite von Happy: Demo - Happy Tabellen & Buttons


Ersetzen Sie bei dem Einbau dieses Codes den Text URL durch den Link auf welchen Sie weitergeleitet werden wollen. Außerdem sollten Sie den Text Button Inhalt ändern. Dieser Teil des Codes ist der Anzeigename des Buttons.


Responsive Text

Für die Offline Seite von Happy wurde ein spezielle Formatierung eines Textes eingebaut. Denn dieser Text ist sozusagen im Stil von Responsive. Das bedeutet die Schriftgröße passt sich automatisch der Bildschirmgröße an.
Gedacht ist dies für den Text OFFLINE. Natürlich kann diese Formatierung auch an anderen Stellen der Webseite benutzt werden.


Einbaucode für den Responsive Text

<p class="offline-info">OFFLINE</p>


Hintergrundbild bei Modulposition Bottom-A, Bottom-B oder Bottom-C ändern

Das Hintergrundbild bei den Modulpositionen Bottom-A, Bottom-B und Bottom-C besteht aus einem einzigen Bild welches sich unter diesen 3 Modulpositionen legt.

Um das Hintergrundbild bei diesen Modulpositionen zu ändern müssen Sie lediglich das Bild austauschen.
Dieses Bild können Sie bequem über das in CMS Scorpion integrierten Medienverzeichnis erreichen. Das Hintergrundbild ist unter dem Pfad: bottom/happy/section gespeichert. Löschen Sie zunächst das gewünschte Bild und laden Sie es erneut mit Ihrem Motiv hoch. Sie müssen nur darauf achten, dass der Bildernamen der Datei den selben Namen trägt.
Der Bildername lautet: happy_bottom_a_b_c.jpg


Animationen

Für dieses Template wurden viele verschiedene Animationen eingebaut. Sie können hier ganze Text Blöcke oder Bilder mit einem Spezial Effekt einblenden lassen. All diese Animationen können Sie sich auf der Demo Seite von Happy ansehen: Demo - Happy Animationen
Auf der Demo Seite von Happy ist ebenfalls der Einbaucode eingebunden mit welchem diese Animation funktioniert. Hier erklären wir Ihnen noch wie man vorgeht um diesen Code korrekt einzubauen.
Die erste Animation auf der Demo Webseite nennt sich 'Bounce'. Der dazu gehörige Einbaucode ist:


<div class="wow bounce" style="visibility: visible; animation-name: bounce;">
Eigener Inhalt (Text/Bild)
</div>


Zunächst kopieren Sie diesen Code, wie weiter oben in dieser Anleitung bereits erklärt, in den Quellcode ein. Danach müssen Sie den Text Eigener Inhalt (Text/Bild) mit ihrem Inhalt (Text, Bild) ändern. Danach klicken Sie noch auf Speichern und fertig ist die neue Animation eingebaut.


Tabellen und Buttons

Der Einbau von verschiedenen Tabellen und Standard Buttons ist ebenfalls möglich. Wie bei Animationen haben wir hier ebenfalls die Einbaucodes auf der Demo Webseite von Happy: Demo - Happy Tabellen & Buttons


Tabelle


Der Einbaucode einer Tabelle kann wie folgt aussehen:


01 <table class="table">
02  <thead>
03   <tr>
04    <th>Vorname</th>
05    <th>Nachname</th>
06    <th>Username</th>
07   </tr>
08  </thead>
09  <tbody>
10   <tr>
11    <th>Max</th>
12    <th>Mustermann</th>
13    <th>Maxi</th>
14   </tr>
15   <tr>
16    <th>Mary</th>
17    <th>Mustermann</th>
18    <th>Mary</th>
19   </tr>
20   <tr>
21    <th>Jeniffer</th>
22    <th>Musterfrau</th>
23    <th>Jenny</th>
24   </tr>
25  </tbody>
26 </table>

Die Bedeutung der einzelnen Zeilen sagt nun folgendes aus:

  • In Zeile 01 steht der Beginn und der Style (class) der Tabelle. Dieser unterscheidet sich dann zu den anderen Darstellungen der verschiedenen Tabellen: <table class="table">
    Die Zeile 26 in unserem Beispiel beendet die Tabelle.
  • Zwischen der Zeile 02 und Zeile 08 wird sozusagen der Kopf der Tabelle dargestellt, dieser ist allerdings nicht zwingend notwendig. Und kann auch weggelassen werden. <thead> ... </thead>
  • Zeile 03 und Zeile 07 geben an das dies eine Zeile der Tabelle ist: <tr> ... </tr>
  • Eine Spalte wird angegeben wie z.B. in Zeile 04: <th>Vorname</th>
    In unserem Fall steht in dieser Tabelle das Wort Vorname. Dies können Sie nun durch Ihren Text oder durch ein Bild ersetzen. Wollen Sie nun eine 2te, 3te oder 4te Spalte hinzufügen, dann wiederholen Sie diese Zeile erneut. Es ist nur darauf zu achten, dass diese wie im Beispiel, zwischen den Codezeilen <thead> ... </thead> steht.
  • Zum Schluss kommen wir noch auf die Zeile 09 und Zeile 25 zu sprechen. <tbody> ... </tbody>
    Zwischen diesen Zeilen steht nun die eigentliche Tabelle. Diese ist zwingend notwendig, nicht so wie bei dem Kopf der Tabelle. Lassen Sie nun den Kopf der Tabelle weg, müssen Sie mit diesen Codezeilen beginnen.

  • Font Awesome

    Font Awesome sind spezielle Icons. Diese können sehr einfach durch eine bestimmte Codezeile eingebaut werden.
    Welche Happy beinhaltet inklusive Einbaucode finden sie wiederum auf der Demo Webseite: Demo - Happy Font Awesome.



    Stand: 26.10.2016

Letzten Templates

Template Happy

HAPPY

Template Paige

PAIGE

Blog

COMING SOON

Top