Este guia explica como personalizar o código fonte, modificar o CSS ou alterar a parte HEAD ou BODY de um site criado com o Site Creator da Infomaniak.

Adicionar código personalizado

Comece por iniciar sessão no Painel de Controle Infomaniak com o seu identificador (utilizador com os direitos necessários sobre o produto em questão):

1. Clique aqui para aceder à gestão de alojamentos e sites (filtrada para mostrar apenas o Site Creator).
   • Se nada for exibido, pode ser que não esteja na Organização à qual o seu site está associado (❓: ajuda).
2. Clique em o nome do Site Creator em questão:
   
3. Clique no botão para editar o seu site:
   

Depois de abrir o Site Creator:

1. Clique em Design no menu lateral esquerdo.
2. Clique em Mais configurações.
3. Clique em Código personalizado na parte inferior:
   
4. Insira código HTML, JavaScript (com suas tags script) ou CSS personalizado (com suas tags style) – veja abaixo alguns exemplos.
5. Salve as alterações na parte inferior da página.

Metadados em HEAD e BODY

Para adicionar código JavaScript ou qualquer outro código na parte HEAD ou BODY do código-fonte do seu site:

1. Clique em Configurações no menu lateral esquerdo.
2. Clique em SEO e Metadados na seção Configuração do site:
   
3. Desça até à secção Código personalizado.
4. Escolha adicionar o código antes ou depois das secções HEAD ou BODY.
5. Salve as alterações na parte inferior da página:
   

Exemplos de personalização CSS

Estes exemplos permitem iniciar a personalização avançada das páginas do site. No entanto, existe o risco de, dependendo das modificações efetuadas, não conseguir aceder ao editor, o que o obrigará a começar tudo de novo.

Personalizar o fundo do site

Para definir a imagem de sua preferência (que deve ser carregada na biblioteca de arquivos) como fundo da página e personalizar sua exibição:

1. Vá para o ponto 3, visível na primeira imagem no topo deste guia.
2. Insira o código <style> para indicar que deseja modificar o código CSS.
3. em seguida, body { para indicar que você deseja modificar o corpo da página e as "{" para abrir o espaço onde as instruções podem ser inseridas,
4. em seguida, background-image: url("../data/files/fond01.jpg"); com o caminho e o nome exatos da imagem carregada na biblioteca, sem esquecer o ponto e vírgula para poder inserir a instrução seguinte.
5. background-repeat: repeat; para repetir a imagem inserida.
6. background-attachment: fixed; para que a imagem de fundo permaneça fixa, mesmo que o visitante role a página para baixo ou para cima para ler o conteúdo.
7. } para fechar o espaço de inserção aberto anteriormente.
8. </style> para indicar que o código termina aqui.

Aumentar o espaçamento entre as letras de todos os links do site

Para aumentar (consideravelmente) o espaçamento entre as letras nas palavras clicáveis (links):

1. Vá para o ponto 3, visível na primeira imagem no topo deste guia.
2. Insira o código (se ainda não estiver presente) <style> para indicar que deseja modificar o código CSS.
3. em seguida, .container div a { para indicar que você deseja modificar os blocos da página e, mais especificamente, os links ("a") e o "{" para abrir o espaço onde você pode inserir os comandos,
4. em seguida, letter-spacing:1em;, diminuindo o valor (0.9em, por exemplo), sem esquecer o ponto e vírgula para poder inserir o comando seguinte ou finalizar.
5. } para fechar o espaço de inserção aberto anteriormente.
6. </style> para indicar que o código termina aqui.

Consulte estes outros exemplos de código CSS para inserir no seu site.