Tutorial - Organizar uma categoria como Forumeiros e você

Este tutorial é uma alternativa ao já criado pela Rainha Mãe, mas mais complexo.
Ele contém algumas imagens para que assim percebam melhor.

1 -
Em primeiro lugar temos que criar um tópico com o nome:




2-
Dentro desse fórum vamos criar 4 fóruns para ser colocado nesse quadruplo fórum.
(Eu coloquei Fórum 1/2/3/4 mas como é óbvio vocês não.)



Depois de criados os fóruns o resultado será este:




3 -
Agora vamos dividir o código em 4 partes:
1ª

Código:

<a href="link da imagem1/" style="float: left;"><img src="imagem1" alt="" /></a><span style="float: left; width: 30%;  margin-left: 5px;"><a href="link do título1/" class="forumtitle">título1</a><br />texto1</span>

2ª

Código:

<span style="float: right; width: 35%; margin-left: 10px;"><a href=" link do titulo4/" class="forumtitle"> título4</a><br /> texto4</span><a href=" link da imagem4/" style="float: right;"><img src="" alt=" imagem4" /></a><span style="clear: both; border-top: 1px solid #FFFFFF; display: block; margin-bottom: 10px;"></span>

3ª

Código:

<a href=" link da imagem3/ " style="float: left;"><img src=" imagem3" alt="" /></a><span style="float: left; width: 30%;  margin-left: 5px;"><a href=" link do titulo3/" class="forumtitle">título 3</a><br />texto3</span>

4ª

Código:

<span style="float: right; width: 35%;  margin-left: 5px;"><a href="link do título5/" class="forumtitle">título5</a><br />texto5</span><a href="link da imagem5/" style="float: right;"><img src="imagem5" alt="" /></a>

Se adicionarmos este código no fórum principal que irá conter os 4 fóruns, podemos verificar isto:




4 -
Vamos colocar em Geral -> Home Page -> Hierarquia o modo de visionamento do fórum em "Separar as categorias no índice :" colocámos "Nenhum"


5 -
Agora se formos ao fórum reparámos que os subfóruns irão aparecer na página principal.



E vamos copiar os endereços de ligação (url) de cada fórum. (podem criar um ficheiro de texto no bloco de notas e colocar lá os urls que serão necessários)


6 -
Espero que já tenham as imagens e os respectivos link's, porque agora é a finalização do código.
Uma coisa importante é que para cada imagem tem de copiar dois códigos:

Por exemplo se navegarem com o "Mozilla FireFox" para copiarem os códigos é só carregarem com o botão direito do rato e copiarem o "Copiar o endereço da ligação" e o "Copiar o endereço da imagem":



Se utilizarem o "Internet Explorer", para o "endereço da ligação" carregarem com o botão direito do rato sobre a imagem e carregam em "copiar atalho" para o outro código vão a "Propriedades" e encontram, onde diz "endereço [url]"



(Relembro, não se esqueçam de copiar os códigos para um ficheiro de texto, ou para outro local desde que os tenham guardados.)


7 -
Agora vamos trabalhar na as 4 partes do código.

1ª parte do código

Código:

<a href=" LINK COM O ENDEREÇO DE LIGAÇÃO DA IMAGEM 1 " style="float: left;"><img src=" LINK COM O ENDEREÇO DA IMAGEM 1 " /></a><span style="float: left; width: 30%;  margin-left: 5px;"><a href=" ENDEREÇO DO FÓRUM 1 " class="forumtitle"> TÍTULO DO FÓRUM 1 </a><br /> TEXTO COM A DESCRIÇÃO DO FÓRUM 1 </span>

2ª parte do código

Código:

<span style="float: right; width: 35%; margin-left: 10px;"><a href=" ENDEREÇO DO FÓRUM 2 " class="forumtitle"> TÍTULO DO FÓRUM 2 </a><br /> TEXTO COM A DESCRIÇÃO DO FÓRUM 2 </span><a href=" LINK COM O ENDEREÇO DE LIGAÇÃO DA IMAGEM 2 " style="float: right;"><img src=" LINK COM O ENDEREÇO DA IMAGEM 2 " /></a><span style="clear: both; border-top: 1px solid #FFFFFF; display: block; margin-bottom: 10px;"></span>

3ª parte do código

Código:

<a href=" LINK COM O ENDEREÇO DE LIGAÇÃO DA IMAGEM 3 " style="float: left;"><img src=" LINK COM O ENDEREÇO DA IMAGEM 3 " /></a><span style="float: left; width: 30%;  margin-left: 5px;"><a href=" ENDEREÇO DO FÓRUM 3 " class="forumtitle"> TÍTULO DO FÓRUM 3 </a><br /> TEXTO COM A DESCRIÇÃO DO FÓRUM 3 </span>

4ª parte co código

Código:

<span style="float: right; width: 35%;  margin-left: 5px;"><a href=" ENDEREÇO DO FÓRUM 4 " class="forumtitle"> TÍTULO DO FÓRUM 4 </a><br /> TEXTO COM A DESCRIÇÃO DO FÓRUM 4 </span><a href=" LINK COM O ENDEREÇO DE LIGAÇÃO DA IMAGEM 4 " style="float: right;"><img src=" LINK COM O ENDEREÇO DA IMAGEM 4 " /></a>

8 -
Agora vamos colar as partes 1, 2, 3 e 4 na descrição do fórum principal.
E como já têm os códigos das imagens e de ligação a cada fórum é só substituir pelo texto que está a MAIÚSCULAS no código.

Colam na descrição do fórum principal código a código e vão substituíndo.
Eu fiz isso com os códigos, deste fórum do FDF e o resultado foi este:



O código para dar o resultado que está acima e que se encontra na descrição do fórum principal é este:

Código:

<a href="http://ajuda.forumeiros.com/Regulamento-e-staff-f1/" style="float: left;"><img src="http://illiweb.com/fa/fdf/parchemin.png" /></a><span style="float: left; width: 30%;  margin-left: 5px;"><a href="http://ajuda.forumeiros.com/Regulamento-e-staff-f1/" class="forumtitle">Regulamento e staff</a><br />Leia com atenção as regras gerais dos fóruns.</span><span style="float: right; width: 35%; margin-left: 10px;"><a href="http://ajuda.forumeiros.com/Anuncios-e-atualizacoes-f4/" class="forumtitle">Anúncios e atualizações</a><br />Informações sobre a manutenção e as atualizações dos fóruns.</span><a href="http://ajuda.forumeiros.com/Anuncios-e-atualizacoes-f4/" style="float: right;"><img src="http://illiweb.com/fa/fdf/annonce.png" /></a><span style="clear: both; border-top: 1px solid #FFFFFF; display: block; margin-bottom: 10px;"></span><a href="http://ajuda.forumeiros.com/Perguntas-e-respostas-frequentes-f3/lista-de-questoes-e-respostas-frequentes-t23.htm" style="float: left;"><img src="http://illiweb.com/fa/fdf/questions.png" /></a><span style="float: left; width: 30%;  margin-left: 5px;"><a href="http://ajuda.forumeiros.com/Perguntas-e-respostas-frequentes-f3/lista-de-questoes-e-respostas-frequentes-t23.htm" class="forumtitle">Perguntas e respostas freqüentes</a><br />99 % das suas perguntas já têm uma resposta. Não perca tempo.</span><span style="float: right; width: 35%;  margin-left: 5px;"><a href="http://ajuda.forumeiros.com/Astucias-f5/" class="forumtitle"> Tutoriais e Astucias</a><br />Tutoriais e astucias para aumentar as opções dos seus fóruns.</span><a href="http://ajuda.forumeiros.com/Astucias-f5/" style="float: right;"><img src="http://illiweb.com/fa/fdf/magic.png" /></a>

Mas ainda não acabou!
Como repararam os subfóruns ficaram em baixo do fórum principal. Pois para isso temos de mudar a "Hierarquia" das categorias e fóruns.
Para isso vamos a Painel... -> Geral -> Home Page -> Hierarquia
E escolhem o nível de visualização "Médio", vocês optem por escolher depois se querem separar as categorias por quadros ou não. (Aqui neste fórum as categorias estão separadas.)

Importante também é a cor que escolheram em
Painel... -> Temas -> Cores -> Contornos -> Cor do quadro das celulas
É a cor que divide os fóruns.
No código que colocaram está com a cor branca (#FFFFFF) se quiserem mudar para outra cor por exemplo vermelho (#FF0000) substituem, essa parte encontra-se na 2ª parte do código.




Se tiverem alguma dúvida, coloquem-na no tópico:
http://ajuda.forumeiros.com/problemas-com-um-script-f7/ajuda-de-tutorial-organizando-uma-categoria-como-a-forumeir-t806.htm