Javascript e CSS

Use Javascript e CSS no seu site

Você pode fazer ajuste fino da aparência do seu site e adicionar funcionalidades usando Javascript e CSS.

Você pode alterar a aparência e comportamento do seu site usando javascript e folhas de estilo CSS em suas páginas.

Toda página que seu visitante carrega ao visitar seu site, automaticamente baixa também outros arquivos.

Os principais e indispensáveis são o Javascript e CSS do sistema, que se encontram na pasta /wwwroot/themes/system. Sem esse arquivos, ou se eles forem excluídos do site ou modificados, a aparência do seu site poderá ficar totalmente esquisita, imprevisível e deixar de funcionar.

Logo depois, se você usar algum Tema para seu site, são baixados os arquivos de Javascript e CSS específicos do tema.

Por exemplo, se você escolher tema escuro hfc-dark, o HyperFluxCSS envia para o visitante essa folha de estilos (em /themes/hfc-dark) instruindo ao navegador para substuir as cores padrão pelas cores do tema escuro.

E por fim, se seu site tiver javascript e folha de estilos personalizados, em /wwwroot/themes/custom, eles também são enviados ao navegador do visitante para moldar o comportamento e aparência do seu site da forma que você desejar.

Sendo assim, primeiro são carregados os Javascript e CSS do Sistema. Depois são carregados os Javascript e CSS do tema. E por último, opcionalmente, JavaScript e CSS personalizados do seu seu site, se ele tiver.

Se o estilo ou script se aplica somente a uma página específica, é recomendado inserir o código usando as tags html e diretamente no corpo do código da página.

Mas se o estilo ou javascript é compartilhado/reutilizado em várias páginas, vale a pena editar os arquivos de Javascript e CSS Globais.

Para isso, seu perfil de usuário definido pelo administrador do site deve ter a permissão de Alterar a aparência e configuração do site . Então você terá acesso à edição das folhas de estilos CSS e do Javascript que são adicionados automaticamente a TODAS as páginas do site.

Para isso, clique na opção "Javascript e CSS". Se essa opção não aparecer para você, é porque seu usuário não possui permissão de Alterar a aparência e configuração do site. Então você deve entrar em contato com o administrador do site para lhe conceder essa permissão, ou fazer login usando um usuário que possua essa permissão.

Depois de clicar na opção "Javascript e CSS", você verá campos para editar Javascript e CSS personalizados do seu site.

Edite o Javascript e o CSS ou cole de algum outro lugar que você já os tenha prontos e salve. Depois abra a página desejada que utiliza o novo script ou estilo e veja se o resultado foi satisfátorio. Se for necessário, volte e corrija os arquivos até obter o resultado desejado.

Note que isso deve ser usado com cautela. Modificar, por exemplo, algum atributo do elemento "body" nestes CSS irá modificar as características de TODAS as páginas do site. Isso pode ser bom se for feito intencionalmente e com consciência, mas se for feito acidentalmente ou com erro pode mostrar de forma distorcida o site todo até que o problema seja corrigido. É por isso que, para páginas específicas, é recomendável inserir a folha de estilos ou o javascript diretamente no código dessa página.

Diferença entre o Custom.css e Custom-inline.css; e entre Custom.js e Custom-inline.css

Os arquivos de Javascript e CSS personalizados são até quatro: dois de Javascript e dois de CSS. Um de cada é "inline" e o outro não.

Os arquivos não-inline são arquivos separados no servidor. O navegador do visitante carrega a página principal, baixa os arquivos do sistema e depois faz uma nova conexão ao seu site para baixar esses arquivos.

Já os arquivos "inline" são enviados incorporados, embutidos, em cada página visitada. Isso pode evitar que o navegador do visitante tenha que fazer um novo acesso. Mas por outro lado, fazem com que cada página tenha um tamanho um pouco maior.

Se alguma propriedade de estilo estiver presente tanto no arquivo inline como no arquivo não-inline, o do arquivo inline tem procedência, portanto é o que prevalece.

Os dois apresentam vantagens e desvantagens.

O Inline é carregado em toda página do seu site e dispensa um novo acesso a arquivos para cada página que seu visitante acessa. É melhor quando são arquivos curtos e o seu visitante provavelmente não vai ficar visitando muitas e muitas páginas de uma só vez, como sites simples e estáticos. Além disso, o inline tem a vantagem de se ter a certeza que a página nunca será carregada sem o Javascript e a folha de estilos.

O não-inline exige um novo acesso ao site, mas normalmente o navegador mantém uma cópia dele que previne que ele tenha que ser baixado de novo toda vez. Em conexões muito ruins, existe uma pequena possibilidade de queda na conexão antes de baixar os arquivos, tornando o site com design deformado e exigindo que o visitante recarregue a página. É melhor para arquivos mais longos ou para sites que tem bastantes postagens para manter o usuário navegando por várias páginas, como jornais e sites de humor.

Na prática, na maior parte dos casos é mais recomendável é usar o não-inline. Apesar desse processo adicional de acessar o site e buscar o arquivo, normalmente essa demora é imperceptível ao usuário, a não ser que você esteja hospedando o site em algum servidor com uma latência muito grande em algum país estrangeiro, ou que o visitante tenha uma conexão com a Internet muito ruim.