Hur man anpassar ett tema

Så här anpassar du utseendet på din webbplats.

Anpassa CSS

För att anpassa CSS på din webbplats ändrar man temat. Låt oss se hur teman fungerar. Standardtemat definieras i systeminställningarna. Ett annat tema kan definieras i sidinställningarna högst upp på varje sida, till exempel Theme: custom.

Här är en exempelfil system/themes/custom.css:

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

Anpassa JavaScript

För att anpassa din webbplats ännu mer kan du använda JavaScript. Detta gör att du kan skapa dynamiska funktioner för webbplatser. Du kan spara JavaScript i en fil som har ett liknande namn som CSS-filen. Då ingår det automatiskt.

Här är en exempelfil system/themes/custom.js:

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

Anpassa bilder och filer

Mappen system/themes innehåller alla temafiler. Du kan lagra dina bilder och teckensnittsfiler här, som används i teman. Varje webbplats har en liten ikon, ibland kallad en favicon. Webbläsaren visar denna ikon till exempel i adressfältet.

Har du några frågor? Få hjälp.

Hur man anpassar en layout

Så här anpassar du en layout på din webbplats.

Anpassa HTML

För att anpassa HTML-koden på din webbplats ändrar man layouten. Låt oss se hur layouter görs. Standardlayouten definieras i systeminställningarna. En annan layout kan definieras i sidinställningarna högst upp på varje sida, till exempel Layout: default.

Här är en exempelfil 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") ?>

Här är en exempellayout för att visa sidinnehåll och ytterligare HTML-kod:

<?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") ?>

Här är en exempellayout för att visa sidinnehåll och ytterligare bloggsidor:

<?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") ?>

Teman kan ha sina egna layoutfiler för att skriva över den befintliga layouten. Lägg till ett tema i filnamnet. Till exempel kommer filen system/layouts/default.html att användas med vilket tema som helst, filen system/layouts/stockholm-default.html kommer bara att användas med Theme: stockholm.

Har du några frågor? Få hjälp.

Hur man anpassar ett språk

Så här anpassar du ett språk på din webbplats.

Anpassa språkinställningar

För att anpassa språket på din webbplats ändrar man språkinställningar. Språkinställningarna innehåller inställningarna för alla installerade tillägg. Du kan också lägga till dina egna språkinställningar i konfigurationsfilen, till exempel bildtexter.

Enkelspråkigt läge

Standardspråket definieras systeminställningarna. Ett annat språk kan definieras i sidinställningarna högst upp på varje sida, till exempel Language: en.

En engelsk sida:

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

En tysk sida:

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

En svensk sida:

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

Flerspråkigt läge

För flerspråkiga webbplatser kan du använda flerspråkigt läge. Till exempel om du översätter en hel webbplats. Öppna filen system/extensions/yellow-system.ini och ändra CoreMultiLanguageMode: 1. Gå till din innehållsmapp och skapa en ny mapp för varje språk. Här är ett exempel:

├── 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                

Den första skärmdumpen visar mapparna 1-en,2-de och 3-sv. Detta ger dig webbadresserna http://website/ http://website/de/ http://website/sv/ för engelska, tyska och svenska. Här är ett annat exempel:

├── 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                

Den andra skärmdumpen visar mapparna 1-en,2-de, 3-sv och default. Detta ger dig webbadresserna http://website/en/ http://website/de/ http://website/sv/ och en hemsida http://website/ som automatiskt upptäcker besökarens språk.

För att visa ett språkval kan du skapa en sida som visar tillgängliga språk. Språkvalet kan integreras i navigeringen på din webbplats. Detta gör det möjligt för besökare att välja språk.

Gör en översättning

När du installerar en webbplats hälsas du med ett hej. Du kan göra en översättning om ett språk saknas. Börja med svenska språkfilen eller ett av tillgängliga språken. Detta visa dig vilka textrader och textfragment är tillgängliga. Det räcker om du översätter svenska språkfilen. En underhållare kan ta hand om allt annat. Läs mer om översättningar.

Har du några frågor? Få hjälp.