Deze handleiding legt uit hoe u de broncode kunt aanpassen, de CSS kunt wijzigen of het HEAD- of BODY-gedeelte van een website die is gemaakt met Site Creator van Infomaniak kunt aanpassen.

Aangepaste code toevoegen

Begin met het inloggen op de Infomaniak Manager met uw gebruikersnaam (een gebruiker met de benodigde rechten voor het betreffende product):

1. Klik hier om toegang te krijgen tot het beheer van hosting en websites (gefilterd om alleen Site Creator weer te geven).
   • Als er niets wordt weergegeven, bevindt u zich mogelijk niet in de organisatie waaraan uw website is gekoppeld (❓: hulp).
2. Klik op de naam van de betreffende Site Creator:
   
3. Klik op de knop om uw site te bewerken:
   

Zodra u zich in Site Creator bevindt:

1. Klik in het linkermenu op Ontwerp.
2. Klik op Meer instellingen.
3. Klik onderaan op Aangepaste code:
   
4. Voer aangepaste HTML-, JavaScript-code (met de script-tags) of CSS-code (met de style-tags) in – lees hieronder voor enkele voorbeelden.
5. Sla de wijzigingen onderaan de pagina op.

Metagegevens in de <0>HEAD & <0>BODY

Om JavaScript-code of andere code toe te voegen aan het <0>HEAD- of <0>BODY-gedeelte van de broncode van uw website:

1. Klik op Instellingen in het linkermenu.
2. Klik op SEO & Metadata in het gedeelte Siteconfiguratie:
   
3. Scroll naar beneden naar Aangepaste code.
4. Kies of u de code wilt toevoegen onder het tabblad HEAD of onder het tabblad BODY.
5. Sla de wijzigingen onderaan de pagina op:
   

Voorbeelden van CSS-aanpassingen

Deze voorbeelden helpen u bij het starten van de geavanceerde aanpassing van de websitepagina's. Er bestaat echter een risico dat u, afhankelijk van de aangebrachte wijzigingen, geen toegang meer heeft tot de editor, waardoor u deze helemaal opnieuw moet beginnen.

De achtergrondafbeelding van de website aanpassen

Om de afbeelding van uw keuze (die u in de bestandsbibliotheek kunt uploaden) als achtergrond van de pagina in te stellen en de weergave ervan aan te passen:

1. Ga naar punt 3, zoals te zien is op de eerste afbeelding bovenaan deze handleiding.
2. Voeg de code <style> toe om aan te geven dat u de CSS-code wilt wijzigen.
3. vervolgens body { om aan te geven dat u de opmaak van de pagina wilt wijzigen en de "{" om de ruimte te openen waarin u de opdrachten kunt invoegen,
4. vervolgens background-image: url("../data/files/fond01.jpg"); met het exacte pad en de naam van de afbeelding die in de bibliotheek is opgeslagen, en vergeet niet de puntkomma toe te voegen, zodat u de volgende opdracht kunt invoegen.
5. background-repeat: repeat; om de ingevoegde afbeelding te herhalen.
6. background-attachment: fixed; zodat de achtergrondafbeelding vast blijft, zelfs als de bezoeker de pagina naar beneden of omhoog scrollt om de inhoud te lezen.
7. } om de eerder geopende invoegruimte te sluiten.
8. </style> om aan te geven dat de code hier eindigt.

De letters van alle links op de site verder uit elkaar plaatsen

Om de letters in klikbare woorden (links) aanzienlijk verder uit elkaar te plaatsen:

1. Ga naar punt 3, zoals te zien is op de eerste afbeelding bovenaan deze handleiding.
2. Voeg de code (indien nog niet aanwezig) <style> toe om aan te geven dat u de CSS-code wilt wijzigen.
3. vervolgens .container div a { om aan te geven dat u de blokken op de pagina wilt wijzigen, en met name de links ("a") en de "{" om de ruimte te openen waarin u de opdrachten kunt invoegen,
4. vervolgens letter-spacing:1em; door de waarde te verlagen (bijvoorbeeld 0.9em), waarbij u de puntkomma niet vergeet, zodat u de volgende opdracht kunt invoegen of de bewerking kunt beëindigen.
5. } om de eerder geopende invoegruimte te sluiten.
6. </style> om aan te geven dat de code hier eindigt.

Bekijk deze andere voorbeelden van CSS-code die u op uw website kunt invoegen.