[TUTORIAL] Arredondar bordas do fórum

Ir para baixo

[TUTORIAL] Arredondar bordas do fórum Empty [TUTORIAL] Arredondar bordas do fórum

Mensagem por seender 28.05.09 16:46

[TUTORIAL] Arredondar bordas do fórum Magic Efeito CSS
Este tutorial ensina como editar as bordas das paginas do seu fórum para em vez de ficar como normal ou seja default, modificar o tanto que quer que ela fique arredondada.


[TUTORIAL] Arredondar bordas do fórum Act_bottom Atenção:
os códigos mencionados neste tutorial, não terá efeito quando o Fórum for acedido pelos através dos navegadores Internet Explorer.


--> Tutoriais, Dicas e Astúcias <--
Arredondar a borda do Fórum




- Arredondar a borda das paginas do Fórum:
Vamos começar primeiramente arredondando as bordas das paginas do Fórum, para isto terá de adicionar o código correspondente à versão do seu Fórum:

[TUTORIAL] Arredondar bordas do fórum Versio11 PhpBB 2
.bodyline{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

[TUTORIAL] Arredondar bordas do fórum Versio12 PhpBB 3
#wrap {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

[TUTORIAL] Arredondar bordas do fórum Versio15 PunBB
.pun {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

[TUTORIAL] Arredondar bordas do fórum Versio14 Invision
#ipbwrapper {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

[TUTORIAL] Arredondar bordas do fórum Logo Explicando:
Vamos agora a explicação das propriedades utilizadas:
  • O código -moz-border-radius corresponde ao navegador "Mozilla". A unidade definida para esta propriedade definirá o tamanho do arco de arredondamento dos cantos das páginas do Fórum.
  • Já quanto à propriedade -webkit-border-radius, destina-se aos navegadores: Safari, Epiphany, Google Chrome, Midori, Arora, OmniWeb, iCab, Shiira, ABrowse. À semelhança da propriedade anterior o valor definirá o tamanho do arco de arredondamento dos cantos das páginas do Fórum.



- definir uma cor para a borda:
Os códigos a verde são editáveis (#000000) cores hexadecimais, que definem a cor da borda do Fórum, o que poderá definir outros códigos, selecionando uma cor do quadro em baixo:


  • Depois de selecionar a cor, encontrará o código da mesma na caixa "Hex", copie esse código e substitua pelo que está a verde, no código de arredondamento.



- Adicionar o código à Folha de estilo CSS:
Terá de aceder a;
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)
[TUTORIAL] Arredondar bordas do fórum Css11
[TUTORIAL] Arredondar bordas do fórum 110111Seta Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso serial a da folha de estilo.
[TUTORIAL] Arredondar bordas do fórum 110210Seta Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).
[TUTORIAL] Arredondar bordas do fórum 110310Seta Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.
[TUTORIAL] Arredondar bordas do fórum 110410Seta Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

Deverá colocar o código, nesta página. Se já contém algum código, deve adicionar o código de arredondamento, assim como qualquer outro que adicione futuramente, depois do já existente.




© Fórum dos Fóruns


[TUTORIAL] Arredondar bordas do fórum Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Arredondar a borda do Fórum
seender
seender
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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