Stijlthema Reloaded

<<< Terug naar index

Reloaded stijlthema inrichten

Het inrichten van een Reloaded-stijlthema gaat als volgt (deze uitleg is gebaseerd op de nieuwe beheeromgeving):

• In het linker menu staat een optie met 'stijlbeheer', als je hier op klikt zie je een overzicht van alle aanwezig stijlthema's. Om een nieuw stijlthema aan te maken klik je op de groene knop onderaan de lijst met 'Toevoegen'.

Er wordt dan een nieuw stijlthema aangemaakt met een handvol opties. Er zijn een paar opties verplicht, deze worden aangegeven met een rode cirkel in het menu met daarin de hoeveelheid verplichte velden die nog niet zijn ingevuld.

• In het scherm 'Instellingen' (dit is als het goed is meteen het scherm waar je op beland bij het aanmaken van een nieuw thema) zie je dat de velden 'Naam' en 'Basisthema' verplicht zijn om in te vullen.

Bij het veld 'Naam' voer je de naam van het stijlthema in (tip: als je bij de naamgeving voor een Reloaded thema ook het woord 'Reloaded' meeneemt wordt het filteren op Reloaded thema's makkelijker). In het geval van het aanmaken van een Reloaded thema is de optie 'Basisthema' van extra belang, hier bepaal je namelijk of het thema een Reloaded thema wordt. In de lijst met opties kies je dan ook voor 'Reloaded'.

Als je een Reloaded thema hebt aangemaakt zie je dat de lijst met opties anders wordt, ik zal hieronder de diverse opties uitgebreider omschrijven.

• Naam: Dit veld veranderd niet qua functionaliteit als er een Reloaded thema is gekozen.
• Basisthema: Deze optie staat nu op 'Reloaded'
• Favicon: Hier upload je het bestand die wordt gebruikt als favicon (het kleine icoontje die je bovenin de browser in een tabblad ziet). Hier is het van belang dat het favicon bestand een '.ico' bestand is. Anders zal de afbeelding niet werken.

Wanneer alle opties goed staan, klik je op 'opslaan' en zul je zien dat de optie 'Basisthema' niet meer getoond wordt. Het is wel belangrijk dat het stijlthema eerst wordt opgeslagen voordat de andere opties worden bewerkt. Als je bijvoorbeeld klikt op 'Kleuren' zonder eerst het thema te hebben opgeslagen, zul je zien dat er nog geen opties aanwezig zijn, pas na het opslaan zijn alle opties aanwezig.

Kleuren

Als je het stijlthema hebt opgeslagen zul je in het menu 'Kleuren' een tabel zien met als kopjes 'Wat' en 'Met'. Het kopje 'Wat' slaat in dit geval op de kleur die wordt gewijzigd en 'Met' slaat op de kleur die wordt gebruikt. Bij een nieuw Reloaded thema is de lijst met gebruikte kleuren al gevuld maar deze zijn aan te passen door op de kleur te klikken. Als je dat hebt gedaan zie je een colourpicker verschijnen waar gekozen kan worden uit de gewenste kleur.

Onderstaand een korte uitleg per kleur en waarvoor ze gebruikt worden. Om snel een stijlthema neer te zetten zijn eigenlijk alleen de primary, accent, textColor, headerColor en menu/logo kleuren van toepassing. Er zijn meer opties maar dit zijn vooral applicatie steunkleuren die niet perse hoeven worden aangepast om een thema een eigen gevoel te geven. In deze uitleg zal ik mij dan vooral richten op de bovenstaande kleuren.

Primary1Color, primary2Color en primary3Color kleuren

Dit zijn de hoofdkleuren binnen de applicatie en worden vooral gebruikt voor de wat grotere vlakken kleur (bijvoorbeeld: de gekleurde balk onderin een artikel-item of de kleur van de rechterbalk in de winkelwagen).

Accent1, accent2 en accent3 kleuren

Deze kleuren zijn de steunkleuren binnen de applicatie (vandaar dat ze 'accent' als naam hebben) en deze worden vooral gebruikt door de diverse knoppen binnen Reloaded, Accent1 wordt gebruikt voor de achtergrond kleur van (icon) knoppen, accent2 is een lichtere variant van accent1 en accent3 is een donkere variant. Accent3 wordt dan ook gebruikt voor de mouse-over van de knoppen. De accentkleuren zijn bedoelt om als contrast te dienen t.o.v de primary kleuren, het is dus van belang dat de accentkleuren goed te onderscheiden zijn van de primary kleuren.

TextColor

Deze kleur bepaalt de kleur van de teksten binnen de applicatie die op dit moment een donkergrijze tint hebben. (De teksten die in het wit zijn worden niet meegenomen bij deze kleur).

HeaderColor

Op dit moment staat er een basic afbeelding in de header met daarop witte tekst. Nu is het mogelijk deze afbeelding te veranderen maar witte tekst past niet bij elke afbeelding, headerColor is bedoelt om de tekstkleur in de header aan te passen zodat het contrast met de afbeelding beter is.

Menucolor en logoBackground

Deze twee kleuren combineer ik even in de uitleg omdat ze over het algemeen direct met elkaar van doen hebben. De optie 'menuColor' wordt gebruikt om de achtergrondkleur van het menu aan de linkerkant in te stellen. De optie 'logoBackground' wordt gebruikt om de achtergrondkleur bij het logo te bepalen. Mocht het logo een transparante achtergrond hebben maar moet de achtergrondkleur eigenlijk gelijk zijn aan die van het menu dan is het handig om beide opties te voorzien van dezelfde kleuren. Mocht daarentegen het logo een achtergrondkleur hebben die anders is dan de kleur van het menu dan is het mogelijk beide een andere kleur te geven. Het blok bovenin die het logo bevat zal dan een andere kleur hebben als de rest van het menu.

Door het aanpassen van de bovenstaande opties is het al snel mogelijk een thema neer te zetten.

Menu-item 'Afbeeldingen'

Hier kun je er voor kiezen om diverse afbeeldingen in de applicatie aan te passen. Via de upload vakken aan de rechterkant is het mogelijk een nieuwe afbeelding te uploaden. Onderstaand een toelichting.

• /images/xlapps/ReloadedBG.jpg : Deze afbeelding is de grote achtergrondafbeelding die getoond wordt bij het inloggen.

• /images/xlapps/logo.png : Bij deze optie kan je de gewenste logo uploaden. Deze wordt getoond in het linker menu bovenin en op het inlogscherm.

• /images/xlapps/snow-3193865_1920.jpg : Dit is de afbeelding die bovenin in de header wordt gebruikt. Deze afbeelding werkt het beste in een aspect ratio van 1920px / 345px aangezien het een brede maar niet hoge afbeelding is.