Como personalizar a barra de rolagem – Web Acappella

Como personalizar a barra de rolagem - Web Acappella

Olá pessoal,

O Web Acappella a cada dia que passa tem se tornado um programa cada vez mais flexível e completo, com um pouco de criatividade e conhecimento podemos agregar diversos recursos e funcionalidade à um projeto desenvolvido no programa.

Que tal personalizar a barra de rolagem do seu site?

A personalização é extremamente simples, neste post vamos fornecer um tutorial breve sobre a personalização da sua barra de rolagem.

Primeiramente vamos ao código:

<style> ::-webkit-scrollbar {
 width: 10px;
 height: 10px;
 -webkit-border-radius: 16px;
}

::-webkit-scrollbar-track-piece {
 background-color: #ffffff;
}

::-webkit-scrollbar-thumb:vertical {
 height: 5px;
 background-color: #666;
 -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
 width: 5px;
 background-color: #666;
 -webkit-border-radius: 3px;
}

</style>

Explicando o código:

::-webkit-scrollbar {
width: 10px;
height: 10px;

– Define a largura e altura da barra de rolagem onde width = largura e height = altura

::-webkit-scrollbar-track-piece {
background-color: #ffffff;

– Possibilita a troca da cor de fundo da barra de rolagem, basta substituir a cor hexadecimal definida no exemplo acima com #ffffff pela cor hexadecimal desejada;

::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: #666666;
-webkit-border-radius: 3px;

– Possibilita a troca da cor da barra de rolagem, basta substituir a cor hexadecimal definida no exemplo acima com #66666 pela cor hexadecimal desejada;
– Possibilita também a troca do formato da barra podendo ser mais arredondada ou não. A personalização pode ser definida em -webkit-border-radius: 3px; bastando trocar 3pxpela dimensão desejada;

Agora vamos adicionar o código ao Web Acappella!

No seu Web Acappella no menu superior vá em Site > Propriedades do site > Avançado (ícone de engrenagem) e insira o código acima na seção HEAD do seu site como no exemplo abaixo:

Pronto, a sua barra já está personalizada!

Obs. Inicialmente a barra só tem compatibilidade com o navegador Google Chrome.

Gostou? Comente e compartilhe!


Comments

  1. Parabéns pelo post. Muito bom mesmo!
    Abraços,
    Marcio

  2. Olá amigo, me tira um duvida por favor, eu gostaria de criar um menu lateral no webacappella da seguinte forma, tera varias categorias, os menus e submenus, como ele fica a esquerda do meu site eu gostaria de que quando eu clicar em academias, abaixo abrisse o submenu empurrando o restante para abaixo, mas isso não encontrei como, só consigo colocar os submenus a frente do menu.. não sei se entendeu, mas se conseguir me ajudar agradeço…

  3. Obrigado!
    um grande abraço

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *