Aprendendo como editar um Template

Este tutorial irá mostrar-lhe como começar a editar templates utilizando o que vem por padrão na versão 1.5.  Eu recomendo começar com uma instalação do Joomla simples - um site de teste.  Não tente fazer isso pela primeira vez em seu site online!

Vamos começar pelo arquivo index.php.  Ele está localizado aqui: / templates / rhuk_milkway / index.php.  Cada template tem este arquivo e ele coloca todos os diferentes elementos da página.

Ir para seusite/administrator > > Extensões > > Administrar Template e abra o template rhuk_milkyway.
Clique em " Editar HTML " no canto superior direito.  Você verá o código que contem todo o sistema principal do seu template.
Backup!  Selecione todo o código e copie-o em um editor de texto.  Salve o arquivo em algum lugar seguro.

Editando o código fonte

Este é um pequeno truque que irá trocar os módulos nas colunas da esquerda e da direita.

• Vá até no código até que você veja:                                                                                                           (Eu inseri um espaço no início e no fim de parar o código aqui)

• • Essa linha diz ao Joomla para mostrar todos os módulos na posição "esquerda ".

• Descendo, você verá:                                                                                                                             
  

• Vamos fazer o inverso do que fizemos anteriormente e mudar o nome = "right " para name = "left "
• Clique em "Aplicar "e marque a frente de seu site.

Em seguida, vamos olhar para o arquivo CSS que controla a cor, fontes, imagens e muito mais para seu template.  Houve apenas um arquivo index.php, mas muitas vezes há muitos arquivos CSS.Cada uma controla um aspecto diferente ou o estilo do modelo - por exemplo, pode-se controlar a variação do modelo vermelho, outra variação verde e um terceiro do azul.  Os designers de templates acharam melhor dividi-los em arquivos diferentes, assim você não precisa carregá-los todos de cada vez - você não tem que carregar o estilo verde e azul se você estiver usando apenas o estilo azul.

No entanto, 99 % dos designers colocaram todo o código mais importante em template.css (logicamente bem nomeado ).  Ele está localizado na pasta: / templates / rhuk_milkway / css /.

# Vá para Administrator > > Extensões> > Administrar Templates e abra o modelo rhuk_milkyway.
# Clique em " Editar CSS "no canto superior direito.
# Vá para baixo até você encontrar o arquivo template.css e abri-lo.
# Backup!  Como dito acima, selecione todo o código e copie-o para um editor de texto.  Salve o arquivo em algum lugar seguro.

Editando o código CSS Parte 1

Primeiro, vamos alterar parte do estilo do nosso site.  Vamos modificar o design dos links em nosso site:

• Vá ate no código abaixo:

a: link, a: visited {
text-decoration: none;
font-weight: normal;
}

Esta linha de código diz ao Joomla como o estilo de links em seu site.

• Vamos mudar esse código para que os nossos links serão sublinhados:

a: link, a: visited {
text-decoration: underline;
font-weight: normal;
}

Clique em "Aplicar "e volte para o seu site.

Editando o código CSS Parte 2

Em seguida, vamos mover a caixa de busca do topo esquerdo para o canto superior direito:

• Va até no código do template.css até ver:

# search {
float: right;
width: 320px;
margin-top: - 20px;
margem direita: 30px;
height: 40px;
overflow: hidden;
text-align: right;
}

• Vamos mudar esse código para que a nossa caixa de pesquisa irá se mover para a esquerda:

# search {
float: left;
width: 320px;
margin-top: - 20px;
margem direita: 30px;
height: 40px;
overflow: hidden;
text-align: right;
}

Veja o resultado:

Posted in: Aulas Tutorias,Tutoriais