Wie man ein Theme anpasst

Wie man ein Aussehen seiner Webseite anpasst.

CSS anpassen

Um das CSS deiner Webseite anzupassen, ändere das Theme. Das Standard-Theme wird in den Systemeinstellungen festgelegt. Ein anderes Theme lässt sich in den Seiteneinstellungen ganz oben auf jeder Seite festlegen, zum Beispiel Theme: custom.

Hier ist eine Beispiel-Datei system/themes/custom.css:

.page {
    background-color: #fc4;
    color: #fff;
    text-align: center; 
}

JavaScript anpassen

Um deine Webseiten noch weiter anzupassen, kannst du JavaScript benutzen. Damit kannst du dynamische Funktionen für Webseiten erstellen. Du kannst JavaScript in eine Datei speichern die einen ähnlichen Namen hat wie die CSS-Datei. Sie wird dann automatisch eingebunden.

Hier ist eine Beispiel-Datei system/themes/custom.js:

var ready = function() {
    console.log("Hello world");
    // Add more JavaScript code here
}
window.addEventListener("DOMContentLoaded", ready, false);

Bilder und Dateien anpassen

Im system/themes-Verzeichnis befinden sich alle Themedateien. Hier speichert man Bilder und Schriftarten, die in Themes verwendet werden. Jede Webseite hat ein kleines Icon, auch Favicon genannt. Der Webbrowser zeigt dieses Icon beispielsweise in der Adresszeile an.

Hast du Fragen? Hilfe finden.

Wie man ein Layout anpasst

Wie man ein Layout seiner Webseite anpasst.

HTML anpassen

Um den HTML-Code deiner Webseite anzupassen, ändere das Layout. Das Standard-Layout wird in den Systemeinstellungen festgelegt. Ein anderes Layout lässt sich in den Seiteneinstellungen ganz oben auf jeder Seite festlegen, zum Beispiel Layout: default.

Hier ist eine Beispiel-Datei system/layouts/default.html:

<?php $this->yellow->layout("header") ?>
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>
</div>
</div>
<?php $this->yellow->layout("footer") ?>

Hier ist ein Beispiel-Layout um Seiteninhalt und zusätzlichen HTML-Code anzuzeigen:

<?php $this->yellow->layout("header") ?>
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>
<p>Hello world</p>
</div>
</div>
<?php $this->yellow->layout("footer") ?>

Hier ist ein Beispiel-Layout um Seiteninhalt und zusätzliche Blogseiten anzuzeigen:

<?php $this->yellow->layout("header") ?>
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>
<?php $pages = $this->yellow->content->index()->filter("layout", "blog")->sort("published", false)->limit(5) ?>
<?php $this->yellow->page->setLastModified($pages->getModified()) ?>
<?php $this->yellow->page->setHeader("Cache-Control", "max-age=60") ?>
<table>
<?php foreach ($pages as $page): ?>
<tr>
<td><a href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("title") ?></a></td>
<td><?php echo $page->getHtml("author") ?></td>
<td><?php echo $page->getDateHtml("published") ?></td>
</tr>
<?php endforeach ?>
</table>
</div>
</div>
<?php $this->yellow->layout("footer") ?>

Themes können ihre eigenen Layoutdateien haben, um das vorhandene Layout zu überschreiben. Zum Beispiel wird die Datei system/layouts/default.html bei allen Themes verwendet, die Datei system/layouts/stockholm-default.html jedoch nur beim Theme: stockholm.

Hast du Fragen? Hilfe finden.

Wie man eine Sprache anpasst

Wie man eine Sprache seiner Webseite anpasst.

Spracheinstellungen anpassen

Um die Sprache deiner Webseite anzupassen ändere die Spracheinstellungen. Die Spracheinstellungen enthalten die Einstellungen aller installierten Erweiterungen. Du kannst auch deine eigenen Spracheinstellungen zur Konfigurationsdatei hinzufügen, beispielsweise Bildunterschriften.

Einsprachen-Modus

Die Standardsprache wird in den Systemeinstellungen festgelegt. Eine andere Sprache lässt sich in den Seiteneinstellungen ganz oben auf jeder Seite festlegen, zum Beispiel Language: en.

Eine Englische Seite:

---
Title: About
Language: en
---
Birds of a feather flock together.

Eine Deutsche Seite:

---
Title: Über
Language: de
---
Wo zusammenwächst, was zusammen gehört.

Eine Schwedische Seite:

---
Title: Om
Language: sv
---
Lika barn leka bäst.

Mehrsprachen-Modus

Für mehrsprachige Webseiten kann man den Mehrsprachen-Modus benutzen. Öffne die Datei system/extensions/yellow-system.ini und ändere CoreMultiLanguageMode: 1. Gehe ins content-Verzeichnis und erstelle für jede Sprache ein eigenes Verzeichnis. Hier ist ein Beispiel:

├── content               
│   ├── 1-en              
│   │   ├── 1-home        = http://website/
│   │   ├── 9-about
│   │   └── shared    
│   ├── 2-de              
│   │   ├── 1-home        = http://website/de/
│   │   ├── 9-about
│   │   └── shared    
│   └── 3-sv              
│       ├── 1-home        = http://website/sv/
│       ├── 9-about
│       └── shared    
├── media                 
└── system                

Der erste Screenshot zeigt die Verzeichnisse 1-en, 2-de und 3-sv. Das erzeugt die URLs http://website/ http://website/de/ http://website/sv/ für Englisch, Deutsch und Schwedisch. Hier ist noch ein Beispiel:

├── content               
│   ├── 1-en              
│   │   ├── 1-home        = http://website/en/
│   │   ├── 9-about
│   │   └── shared    
│   ├── 2-de              
│   │   ├── 1-home        = http://website/de/
│   │   ├── 9-about
│   │   └── shared    
│   ├── 3-sv              
│   │   ├── 1-home        = http://website/sv/
│   │   ├── 9-about
│   │   └── shared    
│   └── default           = http://website/       
├── media                 
└── system                

Der zweite Screenshot zeigt die Verzeichnisse 1-en, 2-de, 3-sv und default. Das erzeugt die URLs http://website/en/ http://website/de/ http://website/sv/ und die Startseite http://website/, welche automatisch die Sprache der Besucher ermittelt.

Um eine Sprachauswahl anzuzeigen, kannst du eine Seite erstellen welche die vorhandenen Sprachen auflistet. Die Sprachauswahl kann man in die Navigation der Webseite einbauen. Das ermöglicht es Besuchern die Sprache auszuwählen.

Erstelle eine Übersetzung

Bei der Installation einer Webseite wirst du mit einem Hallo begrüßt. Du kannst eine Übersetzung erstellen falls eine Sprache fehlt. Beginne mit der deutschen Sprachdatei oder einer der vorhandenen Sprachen. Das zeigt dir welche Textzeilen und Textbausteine vorhanden sind. Es reicht aus wenn du die deutsche Sprachdatei übersetzt. Ein Betreuer kann sich um alles weitere kümmern. Mehr über Übersetzungen erfahren.

Hast du Fragen? Hilfe finden.