[TUTORIAL] Arredondar bordas do fórum

[Fry]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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.

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

1º - 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:

PhpBB 2

.bodyline{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

PhpBB 3

#wrap {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

PunBB

.pun {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

Invision

#ipbwrapper {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}

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.

2º - 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.

3º - 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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

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.

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).

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.

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

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

[Fry]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


Lados arredondados
> > >Como deixar lados de fórum arredondados? < < <

Para deixas os lados do fórum arredondados você só precisa por um código de estilo CSS, para por faça de acordo com as informações citadas abaixo:

Painel de Controle
Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Imagens e Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Folha de Estilo CSS

Em seguida:

Código:

.bodyline{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}


Veja a diferença: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] & [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].