Aanpassen van de layout van de webshop met aangepaste CSS

De (online ticketverkoop) webshop biedt geavanceerde functies waarmee beheerders de lay-out van hun webshop kunnen aanpassen door aangepaste CSS (Cascading Style Sheets) toe te voegen. Dit artikel leidt je door het proces van het aanpassen van de webshoplay-out met behulp van aangepaste CSS.

Toegang tot Aangepaste CSS:Om toegang te krijgen tot de aangepaste CSS-functionaliteit, moet je een beheerder zijn. Ga naar de volgende URL in je webbrowser: http://delphi.roodfluweel.be/configure/shop/customcss.

Stappen om Aangepaste CSS Toe te Voegen:

1. Inloggen als Beheerder: Zorg ervoor dat je bent ingelogd op Delphi als beheerder voordat je begint.
2. Navigeer naar de Aangepaste CSS-pagina: Open je webbrowser en ga naar de URL http://delphi.roodfluweel.be/configure/shop/customcss.
3. Begrijp CSS: Aangezien deze functie geavanceerd is, moet je bekend zijn met CSS. CSS is een opmaaktaal die wordt gebruikt om de stijl en lay-out van webpagina's te definiëren. Als je niet bekend bent met CSS, overweeg dan om hulp te vragen van een webontwikkelaar.
4. Maak Aanpassingen: In het tekstveld op de aangepaste CSS-pagina kun je je CSS-code invoeren en aanpassingen maken aan de lay-out van je webshop. Dit stelt je in staat om kleuren, lettertypen, marges, en andere visuele aspecten van je webshop aan te passen.
5. Voorbereiding in de Browser: Voordat je wijzigingen opslaat, is het een goed idee om je CSS-code in een webbrowser te testen om er zeker van te zijn dat de gewenste wijzigingen worden weergegeven zoals verwacht.
6. Opslaan van CSS: Als je tevreden bent met de wijzigingen in de webbrowser, kopieer dan de CSS-code en plak deze in het tekstveld op de aangepaste CSS-pagina in Delphi.
7. Bewaar de Wijzigingen: Klik op de knop "Opslaan" om je aangepaste CSS op te slaan. De wijzigingen zullen nu van toepassing zijn op de lay-out van je webshop.

Conclusie

Met de mogelijkheid om aangepaste CSS toe te voegen, kun je de lay-out van je Delphi-webshop volledig aanpassen aan je wensen. Vergeet niet om CSS te testen in een webbrowser voordat je de wijzigingen opslaat om ervoor te zorgen dat alles er precies zo uitziet als je wilt.

Als je verdere hulp nodig hebt of technische ondersteuning, neem dan contact op met Rood Fluweel.

Voorbeeld

Een voorbeeld hoe je de belangrijkste kleuren aanpast

:root {
  --lpink: #F8B0B7;
  --dpink: #7D275F;
  --ddcblue: 3CC0BE;
}

button.button, button[type=button],  a.button 
{ background-color:var(--lpink); border: 1px solid var(--lpink); color:black;text-decoration:none;} 
button.button:hover, button[type=button]:hover, a.button:hover { background-color:#F8B0B7; border: 1px solid #F8B0B7; filter: brightness(85%); transition-duration: 1s;} 
button.trash-tickets,button.trash-tickets:active, button.trash-tickets:hover { border: none;} 
header.top-nav a { color:var(--dpink); font-weight: bold; padding-left: 10px; padding-right: 10px;} 
header.top-nav a:hover {color: black; }
.steps li .step { background-color: var(--dpink); border:5px solid var(--dpink);color:white; } 
.steps li.selected .step { background-color: var(--lpink); border: 5px solid var(--lpink);}
.steps li::before { border-top: 4px solid var(--lpink); }
.steps li .title { color: gray; }

Voorbeeld 2

Hier is een voorbeeld hoe je de site volledig zwart maakt met witte tekst en rode accenten.

body {background:black;color:white;} 
a { color: white; text-decoration: none;} 
a:hover {text-decoration:underline;} 

// Knoppen worden op verschillende manieren gerendered.
button.button, button[type=button],  a.button 
{ background-color:black; border: 1px solid red; color:red; text-decoration:none;} 
button.button:hover, button[type=button]:hover, a.button:hover { color:black; background-color:red; border:red; text-decoration:none; border: 1px solid red;} 

// nog meer knoppen die anders gedefineerd werden
button.trash-tickets,button.trash-tickets:active, button.trash-tickets:hover { border: none;} 

// De horizontale lijn is gewoon een lege div.
div.banner { display: none; }         

// als je de header bovenaan een achtergrondkleur wil geven, kan dat ook.
header.top-nav { background-color: #2c2520} 
header.top-nav a { color:white; font-weight: bold; padding-left: 10px; padding-right: 10px;} 
main { padding-left: 10px; padding-right: 10px; }         

// de bolletjes van de progress bar kan je ook aanpassen van kleur.
.steps li .step { background-color: #2c2520; border:5px solid #2c2520;color:#fff;} 
.steps li .title { color: gray; }