ALTU
Search…
Personalizar widget
Ao utilizar os templates de CSS do ALTU, pode surgir a necessidade de uma parametrização um pouco mais específica.
Template Basic:
Template ALTU:

Configuração

Siga os passos abaixo para realizar a modificação apenas com o CSS:
  • Nas configurações do widget acesse Aparência e Comportamento
  • No template que deseja utilizar insira o código abaixo, que fará com que a tag <span> que contém o título do widget seja ocultada. É recomendado colocar esta mudança próxima das linhas que definem o .header-title por organização.
1
.header-title span {
2
display: none
3
}
Copied!
  • Após o segundo passo o título estará oculto como no exemplo abaixo:
  • Após remover o título basta ter o link da imagem e inserir ela junto com as mudanças abaixo na classe .header-title também na aba CSS do widget:
1
.header-title{
2
...
3
background-image: url(LINK DA IMAGEM);
4
background-repeat: no-repeat;
5
background-size: 50%;
6
background-position: center;
7
height: 100%;
8
width: 100%;
9
}
Copied!
  • Feitas estas mudanças você deverá ter a imagem centralizada no lugar do título.
Uma observação importante é que a imagem tenha dimensões como largura: 150px e altura: 50px ou equivalente a estes valores para que se encaixe bem. Para modificar o tamanho da imagem basta modificar o valor da propriedade background-size.
Para o exemplo abaixo utilizou-se a seguinte imagem:
Se quiser baixá-la, clique aqui.

Resultado:

Copy link