burger
infomaniak
infomaniak
cloud-computing-logo
Cloud Computing
web-domain-logo
Web & Domains
event-marketing-logo
Events & Marketing
  • Our products
    • Collaborative tools icon chevron
    • Web & Domains icon chevron
    • Cloud Computing icon chevron
    • Events & Marketing icon chevron
    • Streaming icon chevron

      ksuiteCollaborative suite

      Discover the collaborative suite → Discover →
    • kSuite Professional email, sovereign cloud and AI for sustainable performance
    • kSuite The suite for secure communication, storage and sharing
    • kdrive
      kDrive Store, collaborate and share your files
    • mail service
      Mail Service Create your email addresses with your domain
    • kChat
      kChat Communicate live with your teams
    • kmeet
      kMeet Organise your meetings online in complete security
    • swisstransfer
      SwissTransfer Send your files up to 50 GB free of charge.
    • kpaste
      kPaste Share and encrypt your sensitive information
    • ksuite
      Custom Brand Control the brand image of your products
    • kChat
      Chk Link reducer & QR code generator
      Find the web hosting solution you need
    • Domain name
      Domain name Reserve your domain name at the best price
    • Site Creator
      Site Creator Create your website with ease
    • web hosting
      Web Hosting Create your website with over 100 CMS
    • web hosting
      Wordpress Hosting Create your WordPress website easily
    • Cloud Server
      Cloud Server Power up your sites with guaranteed resources
    • SSL Certificat
      SSL certificates Secure your websites with an EV or DV certificate
    • Options
    • Domain privacy
      Domain Privacy Protect your domains’ private data
    • DNS Fast Anycast
      FastAnycast DNS Speed up your site access times
    • Dyn DNS
      DynDNS Access your devices remotely
    • Dyn DNS
      Renewal Warranty Secure your domains against loss and theft
      Find the right Cloud Computing solution

      Cloud services

    • public cloud
      Public Cloud (IaaS) Create your projects in a high-end, ultra-competitive Cloud
    • Cloud Server
      VPS Cloud Create a Windows / Linux server
    • Kubernetes service Deploy your containerised apps on a large scale.
    • VPS Lite
      VPS Lite Create a Windows/Linux server at a low cost
    • Database Service Manage your databases with a managed solution
    • jelastic cloud
      Jelastic Cloud (PaaS) Create your own customised environments
    • Other services

    • llm api
      AI Tools Boost your productivity with our sovereign AI
    • swiss backup
      Swiss Backup Back up your devices in the Cloud
    • nas synology
      NAS Synology Rent a NAS in our secure data centers
    • High availibility
      Very High Availability Create a multi-data center infrastructure with customised SLAs
    • Housing
      Housing Install your servers in our data centers
    • Auth Add a privacy-friendly login method to your apps
      Infomaniak Events, the independent local events portal
      Online ticketing service with a wide choice of concerts, shows and events.
    • online shop
      Ticketing Create your ticketing service and sell tickets
    • kdrive
      Access Control Control access to your events with ease
    • kdrive
      Guest manager Automate your event invitations
    • kdrive
      Newsletter Send your newsletters at competitive prices
    • Streaming radio
      Streaming radio Create and broadcast your own live radio station online
    • streaming video
      Video-Streaming Create and broadcast live events and TV online
    • VOD and AOD
      VOD & AOD service Host and broadcast your recordings without limits
  • Resources
    documentation icon Documentation
    Guides & tutorials
    API documentation
    special offers icon Special offers
    Get started for free
    Student programme
    Become an affiliate
    partner program icon Partner programme
    Find a partner
    Become a partner
    support icon Support & contact
    Contact Support
    Premium support - 24/7
    Contact our sales department
    Hiring an expert
    Migrate to Infomaniak
  • About us
    forest
    icon Ecological commitment
    We pollute. But we are taking action to reduce the footprint of our services and infrastructure
    Discover our commitment →
    icon About Infomaniak
    Our vision, our values
    Our teams
    Infomaniak is recruiting
    Press and communication
    Blog and news
    icon Security
    Data confidentiality
    Bug Bounty Programme
  • Get started for free
    Sign in
  • search-icon
    close-icon
      icon

      Would your needs exceed our solutions? To find out, contact us so that we can advise you personally.

      Our flagship products:
  • search-icon
  • Get started for free
    Sign in
Price Price
Knowledge base

1000 FAQs, 500 tutorials and explanatory videos. Here, there are only solutions!

Knowledge base Edit the code (source / CSS) on Site Creator

    Edit the code (source / CSS) on Site Creator

    This guide explains how to customize the source code, modify the CSS, modify the HEAD or BODY section of a website created with Site Creator Infomaniak.

     

    Prerequisites

    • Access Site Creator:
      1. Click here to access the management of your product on the Infomaniak Manager (need help?).
      2. Click directly on the name assigned to the relevant product.
      3. Click on Customize my site:

     

    Add custom code

    Once in Site Creator:

    1. Click on Design in the left sidebar.
    2. Click on More settings.
    3. Click on Custom Code at the bottom:
      sign
    4. Enter HTML, JavaScript (with its scriptor custom CSS (with its tags style) - read below for a few examples.
    5. Save the changes at the bottom of the page.

     

    Metadata in HEAD & BODY

    To add JavaScript code or any other code in the HEAD or BODY of your site's source code:

    1. Click on Settings in the left sidebar.
    2. Click on SEO & Metadata in the Website Configuration section.
    3. Scroll down to Custom Code.
    4. Choose to add under the tabs HEAD or under BODY.
    5. Save the changes at the bottom of the page:
      sign

    CSS customization examples

    These examples allow you to start the advanced customization of the website pages. However, there is a risk that, depending on the changes made, you may no longer be able to access the editor itself, which will force you to start over from scratch.

    It is strongly recommended to never insert tags of type html, head or body that could conflict with the application's source code itself ⚠️ For additional help contact a partner or launch a free tender — also discover the role of the host.

    sign

    Customize the website's background

    To set your chosen image (to be uploaded to the file library) as the background and customize its display:

    1. Go to point 3 visible on the first image at the top of this guide.
    2. Insert the code <style> to indicate that you want to modify the CSS code,
    3. then body { to indicate that you want to modify the body of the page and the "{" to open the space allowing to insert the commands,
    4. then background-image: url("../data/files/fond01.jpg"); with the exact path & name of the image uploaded to the library, don't forget the semicolon to be able to insert the next command.
    5. background-repeat: repeat; to repeat the inserted image.
    6. background-attachment: fixed; so that the background image remains fixed even if the visitor scrolls the page up or down to read its content.
    7. } to close the previously opened insertion space.
    8. </style> to indicate that the code ends here.

     

    Space out the letters of all the site's links

    To space out the letters significantly in clickable words (links):

    1. Go to point 3 visible on the first image at the top of this guide.
    2. Insert the code (if not already present) <style> to indicate that you want to modify the CSS code,
    3. then .container div a { to indicate that you want to modify the page blocks and more particularly the links ("a") and the "{" to open the space allowing to insert the commands,
    4. then letter-spacing:1em; by decreasing the value (0.9em for example) without forgetting the semicolon to be able to insert the next command or finish.
    5. } to close the previously opened insertion space.
    6. </style> to indicate that the code ends here.

     

    Take note of these other CSS code examples to insert on your site.



    Link to this FAQ:
    Has this FAQ been helpful?
    Thank you for your feedback. Improve this FAQ?
    Please do not ask any questions through this form, it is only used to improve our FAQ.
    Please use our contact form for any question.
    Your message has been sent. Thank you for suggesting an improvement to this FAQ.
    Display all FAQs for this product
    logo infomaniak
    Prices do not include VAT
    facebook
    twitter
    linkedin
    instagram

    Infomaniak

    About Infomaniak The team Infomaniak is recruiting Press space Infomaniak blog All certificates Products and offers Clients' opinions

    Support

    Assistance 7/7 FAQ and guides Premium Support Sales contact API REST Report abuse WHOIS

    Partnerships

    Become a reseller Affiliate programme Directory of partners Requests for quotes

    Ecology

    Green hosting Certificates & awards

    Follow our development

    The email entered is invalid
    earth icon
    • EN
      • EN
      • DE
      • ES
      • FR
      • IT
    ©2025 Infomaniak - Legal documents - Legal notice - Data Protection - Privacy Policy - Site map - Manage your cookies
    icann-logo
    swiss
    new-iso
    swiss-hosting
    logo infomaniak
    Prices do not include VAT

    Infomaniak

    About Infomaniak The team Infomaniak is recruiting Press and media Infomaniak blog All certificates Products and offers Clients' opinions

    Support

    Assistance 7/7 FAQ and guides Premium Support offer Sales contact API REST Report abuse WHOIS

    Partnerships

    Become a reseller Affiliate programme Directory of partners Requests for quotes

    Ecology

    Green hosting Certificates & awards

    Follow our development

    The email entered is invalid
    icann-logo
    swiss
    new-iso
    swiss-hosting

    facebook
    twitter
    linkedin
    instagram
    ©2025 Infomaniak
    Contracts - Legal notice - Data Protection - Privacy Policy - Site map - Manage your cookies

    Managers

    earth icon
    • EN
      • EN
      • DE
      • ES
      • FR
      • IT
    Your browser is outdated, security and browsability are no longer guaranteed. We recommend that you update it as soon as possible by clicking here.