Hoe maak ik een eigen interface met CSS?

Hoe maak ik een eigen interface met CSS?


Naast de standaard interface instellingen is het mogelijk om een interface via CSS naar wens in te richten. Er zijn hierbij veel mogelijkheden. Zo kan het er bijvoorbeeld, als volgt uit zien:



Let op!
Voor deze aanpassingen is het aan te raden om over een basiskennis HTML/CSS te beschikken. Voor referentie en tips raden wij w3schools.com aan.

Koppelen met server

Om gebruik te kunnen maken van een CSS inrichting is er toegang nodig tot een geselecteerde map op een ISI server.

Toegang instellen tot de server

Via een FTP map kun je bestanden benaderen die op de server staan. Hierdoor is het mogelijk om onder andere de CSS templates te benaderen en te beheren. 


Een FTP map dient eerst aangemaakt te worden door ISI. Neem hiervoor contact met ons op: Professional Services.


De FTP gegevens worden door support toegestuurd en kunnen vervolgens gebruikt worden om in te loggen met een FTP-client (bijvoorbeeld Filezilla: https://filezilla-project.org/).

FTP directory aanmaken

Een FTP directory aanmaken kan via de volgende stappen (Uitgeschreven voor Filezilla):
  1. Ga naar de ‘Site Manager’ (File > Site Manager OF knop rechts onder File)
  2. Kies hier vervolgens voor ‘New Site’ en geef de directory die je gaat toevoegen een toepasselijke naam (bijvoorbeeld: website – CSS)
  3. Vul je ontvangen gegevens vervolgens aan de rechterkant in. Onder de tab ‘General’ als volgt:
Host: Ontvangen van ISI
Port: Mag je negeren
Protocol : FTP – File Transfer Protocol
Encryption: Use explicit FTP over TLS if available
Logon Type: Normal
User: Ontvangen van ISI
Password: Ontvangen van ISI


  1. Ga vervolgens naar de tab ‘Advanced’ en vul daar de ontvangen remote directory in in het veld ‘Default remote directory’ en klik vervolgens op 'OK'.


Je hebt de site nu toegevoegd in je FTP-client en deze opgeslagen in je Site Manager. Wanneer je nu naar Site Manager bij file gaat, kun je door dubbel te klikken op je site de FTP map openen om hier bestanden toe te voegen of aan te passen.



Wanneer de FTP directory is gemaakt naar de CSS map kun je zelf CSS templates wijzigen en toevoegen (lees: dupliceren en hernoemen). Standaard is hier enkel de ‘default’ interface aanwezig. Dit is de basis interface template die gebruikt kan worden om een nieuwe CSS template mee te maken. 

CSS Templates aanmaken

Sleep of kopieer de Default map naar het bureaublad, of een andere locatie waar deze makkelijk terug te vinden is, en geef de Default map een andere naam zodat je altijd terug kunt naar het default template. De default interface blijft ongewijzigd op de server staan, zodat je deze te allen tijde terug kan zetten. Geeft de Default map een andere naam bijvoorbeeld de naam van de interface waar deze voor gebruikt gaat worden. Iedere interface kan een eigen CSS map hebben.

Download het default template onderaan de pagina.


In de map met de nieuwe naam vind je de map 'Style'. In deze map zitten custom.css bestanden. Met deze custom CSS templates kun je bestaande elementen op de site voorzien van een andere opmaak. Je hebt hiermee de mogelijkheid om, buiten de standaard interface instellingen, de shop verder te customizen.



Plaats de hele map terug op de FTP server.
Ga naar de backoffice van de shop en koppel het nieuwe template aan de interface waar deze voor gemaakt is. De CSS overschrijft de ingestelde interface.
Bij aanpassingen op een bestaande CSS template met de interface opnieuw opgeslagen worden in de backoffice van de shop. Als je dit niet doet zal de shop geen verbinding maken met het gewijzigde CSS bestand.



Tip!

Voeg achter je CSS regel voor de zekerheid '!important' toe. Dit zorgt ervoor dat de shop deze CSS regel het belangrijkst vind; anders bestaat de kans dat je wijziging wordt overschreven door de bestaande standaard opmaak.

Voorbeeld:
Div{
      Color: blue !important;
}

Vragen en feedback

Zijn er nog vragen of feedback? Neem dan contact met ons op: Professional Services.


    • Related Articles

    • Hoe open ik een FTP map?

      Toegang instellen tot de server Via een FTP map kun je bestanden benaderen die op de server staan. Hierdoor is het mogelijk om onder andere de CSS templates te benaderen en te beheren.   Een FTP map dient eerst aangemaakt te worden door ISI. Neem ...

    • Hoe richt ik RTF velden in voor een publicatie?

      In een publicatie is het mogelijk een RTF (Rich Text Field) veld toe te voegen. In een RTF veld heeft de besteller de mogelijkheid om tekst op te maken. De opmaakmogelijkheden zijn: Tekenstijlen Normaal Vet Cursief Vet cursief Opsommingen toevoegen ...

    • Hoe controleer ik het aantal geüploade pagina's voor een Controlboxx product?

      Maak een Controlboxx product aan met product type 'DirectUpload'. Ga naar de tab 'Staffels en opties'. Maak in de ‘Option Libary’ een optie aan in de backoffice van de Webshop; bijvoorbeeld 'Aantal' met daaronder de optie 'Pagina’s'. Klik met de ...

    • Interfaces

      Het is mogelijk om een interface aan te maken voor een specifieke groep met klanten. De pagina toont een selectielijst met aanwezige interfaces. Standaard is Default geselecteerd. De interface Default wordt getoond als een nog niet geregistreerde ...

    • Hoe kan ik mijn SEO (zoekmachine optimalisatie) instellen?

      In de shop zijn op diverse plekken drie velden toegevoegd om de vindbaarheid in zoekmachines te optimaliseren: Titel, Omschrijving en Keywords. Dit zijn algemene velden en gelden voor de gehele shop. Voor de titel en de omschrijving is maar één taal ...