Kleuren en opmaak instellen

Deze pagina beschrijft hoe de kleur en opmaak van klantpagina's kan worden aangepast. Klantpagina's zijn pagina's die een klant kan doorlopen om een reservering te maken.

Het uiterlijk van de klantpagina's is geheel naar wens aan te passen. Het uiterlijk van van de klantpagina's kan worden aangepast om de reserveringsdialoog bijvoorbeeld in een gewenste huisstijl weer te geven.

Ga naar het configuratiescherm door in het dropdown menu onder de gebruikersnaam op Configuratie te klikken. Kies vervolgens voor Kleuren en opmaak instellen in het dropdown menu onder 'klantpagina'.

Thema toevoegen

Met de knop + Toevoegen kunnen er extra thema's worden toegevoegd. Er opent zich een dialoogvenster waarin onder andere de naam en omschrijving van het thema kan worden ingevuld. Hiervoor kunnen alleen kleine letters worden gebruikt. De overige onderderdelen uit dit dialoog venster worden onder het kopje 'Overige instellingen wijzigen' behandeld. Klik op Opslaan, om het toegevoegde thema te bewaren.

Thema wijzigen

Voor het aanpassen van de kleuren en opmaak van de reserveringsdialoog zijn er diverse instellingen beschikbaar. Deze instellingen zijn aan te passen in het configuratiescherm. Kies in het dropdown menu onder 'klant pagina' voor kleur en opmaak instellen. De instellingen die in dit venster kunnen worden aangepast hebben betrekking op de kleuren, het lettertype- en grootte van elementen in de reserveringsdialoog. Selecteerd een thema om het aan te passen.

Als de instellingen naar wens zijn geconfigureerd, dienen de wijzigingen bevestigd te worden met de knop Opslaan onderaan de pagina.

Overige instellingen wijzigen

Met de knop Wijzigen opent zich een dialoogvenster waarin de volgende instellingen van het geslecteerde thema kunnen worden aangepast.

• Thema naam
• Thema omschrijving
• Geavanceerde css
• Header
• Footer
• Standaard afbeelding

CSS toevoegen

In I-reserve is het mogelijk om klantpagina's op te maken met behulp van CSS. CSS staat voor Cascading Style Sheets en kan gebruikt worden om elk element in een webpagina vorm te geven. In het dialoogvenster 'theme' kan in het tekstvak 'Geavanceerd (CSS)' de opmaak regels worden ingevoerd. Kies na in het invoeren van de CSS regels voor opslaan om de wijzigingen te behouden.

Als de instellingen die aan het thema gewijzigd kunnen worden niet afdoende zijn, kan er gekozen worden om CSS te implementeren. Deze (geavanceerde) CSS wordt als laatste geladen. Hierdoor kunnen bestaande stijl en lay-out instellingen naar wens worden overschreven.

De CSS werkt alleen, als deze syntactisch correct genoteerd staat. Een CSS regelset bestaat uit een selector en een declaratie.

Header en Footer selecteren

In het dialoogvenster 'Theme' kan ook de gewenste header en footer worden gekozen voor de klantpagina's. Een header en footer zijn respectievelijk boven en onderaan een webpagina te vinden en vormen de basis van de vormgeving. Kies Wijzigen om het dialoogvenster 'Theme' te openen. Gebruik voor het selecteren van de gewenste header, of footer de dropdown menu's achter 'Header' en 'Footer' en bevestig deze keuze door op Opslaan te klikken. Om een header of footer te kunnen selecteren, dienen deze wel eerst te zijn aangemaakt als content blok.

Standaard afbeelding instellen als logo

Het is mogelijk om een standaard afbeelding te aan het desbetreffende thema. Dit maakt het mogelijk om een standaard logo te tonen op bepaalde klantpagina's. Deze functionaliteit is te vinden in het dialoogscherm 'Theme'. Open het dialoogvenster met de knop Wijzigen en klik met de muis op het icoon naast 'Standaard afbeelding'. dialoogscherm wordt geopend. Klik vervolgens op Bestand kiezen en navigeer in de geopende verkenner naar de gewenste afbeelding op de pc. Selecteer de juiste afbeelding, klik op openen en upload de afbeelding met de knop Opslaan.

De standaard afbeelding kan bijvoorbeeld geplaats worden in de header of footer van het thema. De afbeelding kan op twee manieren worden opgenomen in de code.

Door het onderstaande aan de code tot te voegen wordt de afbeelding in het content blok, of de content geplaatst. De afbeelding verschijnt in dit geval zoals deze aan het thema is toegevoegd.

 {logo}

Het gebruik van de volgende code maakt het mogelijk om de eigenschappen van afbeelding aan te passen.

 <img src="{logo url='true'}"/> 

Voorbeeld: De afbeelding wordt in de header geplaatst en moet dertig procent van de totale breedte beslaan en dient mee te schalen met de grote van het venster. Dit wordt bewerkstelligd door het volgende toe te voegen aan bovenstaande code.

 "width=30%"

De regel code die de afbeelding aanroept en de gewenste eigenschappen meegeeft wordt dan als volgt.

 <img src="{logo url='true'}"width=30%"/> 

Verschilllende thema's gebruiken

Het is mogelijk om een klantpagina in elk beschikbare thema weer te geven. Om een pagina in een bepaald thema weer te geven, dient er &style=$ID aan de url van de reserveringsdialoog te worden toegevoegd. Het $ID staat tussen haakjes achter de naam van het thema vermeld in het scherm 'Kleur en opmaak'. Het gebruik van deze extenties maakt het mogelijk om verschillende thema's naast elkaar te gebruiken. Door op een klant pagina een hyperlink te plaatsen met een extentie, kan er worden doorverwezen naar een klant pagina in een ander thema.

Voorbeeld: Naast het standaard thema is er een thema toegevoegd met de naam thema 2. Als dit thema is geselecteerd in 'Kleur en opmaak', staat er bovenaan de pagina 'Geselecteerd thema: thema 2 (113)'. Er is een campagne pagina voor een tijdelijke aanbieding die in thema 2 moet worden weergegeven. Om dit te bereiken wordt er aan de link van knop Aanbieding in het bootstrap menu &style=113 toegevoegd.