[TUTORIAL] Separar categorias por imagens

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Membro Entusiasta

[TUTORIAL] Separar categorias por imagens Empty [TUTORIAL] Separar categorias por imagens

Mensagem por Cream 03.04.12 22:02

[TUTORIAL] Separar categorias por imagens Templates Separar categorias por imagens
Vamos aprender neste tutorial à colocarmos uma imagem que separará as categorias do seu fórum. Entretanto, precisaremos modificar os templates do fórum, logo o tutorial é válido somente para as versões phpBB 2 e punBB.

--> Tutoriais, Dicas e Astúcias <--
Separar categorias por imagens


[TUTORIAL] Separar categorias por imagens Warning Para que possamos prosseguir com o tutorial, é preciso que tenha noção sobre a edição dos templates, que serão necessárias para a continuação deste tutorial. Para isso, veja: Modificar os templates do fórum

[TUTORIAL] Separar categorias por imagens Logo phpBB 2 e punBB

- Aceder ao template que iremos modificar:
Teremos de fazer a edição de uma página de template, para que possamos o fazer teremos de aceder à:
Painel de controle -> Visualização -> Templates -> Geral -> index_box

(carregue na imagem para aumentar)
[TUTORIAL] Separar categorias por imagens 2heyc6p

- Alterar o código:
Atenção a esta parte. Primeiramente salve todo o template em um bloco de notas para caso algo saia errado, você possa recolocá-lo. Assim que o fizer, procure no template o seguinte código:
Código:

    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">         
   
E antes desta partícula, coloque o seguinte:
Código:

    <div id="CatImg"></div>
   
Logo após salve e publique o template.

- Adicionar o código à folha de estilo CSS:
Agora vamos adicionar o código CSS que sustentará a imagem. Terá de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)
[TUTORIAL] Separar categorias por imagens 1114

E deverá colocar o seguinte código CSS, alterando a partícula "Link-da-imagem" pelo link da imagem que será exibida entre as categorias do seu fórum. Após as modificações salve:
Código:

    #CatImg{
    background:url('Link-da-imagem') no-repeat;
    width:100%;
    height:70px;
    padding:5px;
    margin-left:-5px;
    margin-top:10px;
    }

Resultado
(carregue na imagem para aumentar)
[TUTORIAL] Separar categorias por imagens 2qs9aty




© Fórum dos Fóruns


[TUTORIAL] Separar categorias por imagens Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Separar categorias por imagens
Cream

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos