#1   em 03/02/11, 02:10 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
Códigos CSS
Olá a todos,

Muitas são as vezes em que se pedem códigos para modificar algumas opções do fórum, utilizando o CSS.

Porque não uni-los todos aqui neste tópico?

Coloquem aqui os que souberem, e não se esqueçam de dividir códigos para phpBB2 e phpBB3, punBB e Invision!
Lembrando que todos os códigos postados aqui deverão serem inseridos em:
Painel de controle -> Visualização -> Imagens e cores -> Cores / Folha estilo CSS

Atenciosamente ' Alucard ~



Última edição por 'Leozin em 24/11/16, 11:20 am, editado 4 vez(es)





#2   em 03/02/11, 02:16 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
CSS - Forumeiros - Tirar o negrito dos nomes Grupos & nome de Usuario - PHPBB2
Bom para retirar o negrito dos nomes de usuarios e nomes de grupos
Código:
.a.gen,a.genmed,a.gensmall {
font-weight: lighter;
}
.gen,.genmed,.gensmall {
font-weight: lighter;
}
.genmed {
font-weight: lighter;
}
.gensmall {
font-weight: lighter;
}
Usem esse codigo aceda em

Painel de controle → Visualização → Cores → Folha estilo CSS

Somente copiar e colar o codigo agora aperte F5 para atualizar a sua pagina
e ver o resultado

Abraços, Tecnomm

Vejam o resultado

100% Testado e aprovado em versão PHPBB2 mas quem quiser para a sua versão apenas contacte me aqui neste topico





#3   em 03/02/11, 02:17 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
CSS - Mudando a cor do fundo de anuncios rotativos - Todas as versões
Bom pessoal utilizem este codigo caso fique com um fundo cinza como na imagem abaixo


Código:
#fa_ticker_block {
background-color: #ffffff;
border: 0px;
}
Por enquanto testado em PHPBB2 & PHPBB3 mas testem em outras versões
e postem aqui caso este codigo não funcione pode postar aqui e pedir um
codigo adequado para retirar isto, lembrando que o usuario que pedir
devera ter o fórum colocado no perfil !

Este codigo devera ser adicionado em

Painel de controle -> Visualização -> Cores -> Folha estilo CSS

Abraços, Tecnomm :cheers:





#4   em 03/02/11, 02:18 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
CSS - Administração de menu - Invision Power Board
Bom vamos agora aprender a adminstrar as propriedades do menu mas em
versão invision, todos os codigos aqui postados deveram serem
adicionados em

Painel de controle -> Visualização -> Cores -> Folha estilo CSS
#submenu {
margin-top: -5px;
margin-left: -5px;
margin-right: -5px;

}
#submenu {
background-image: url('Link Da Imagem')
}

#submenu ul li a:hover {
background-color: transparent;
color: #ffffff;
}

#submenu ul li a {
padding:0.0em 0em 0.0em 0;
color: #ffffff;
text-decoration:none;
}
Agora veja a tabela abaixo
Azul -> Propriedades de lados, quando colocado -5 ele se junta a propriedade #wrapper do forum
Verde -> Aonde iras colocar o link da imagem que ficara de fundo do seu menu
Indigo -> E a cor que ficara as letras quando estiver hover
Azul escuro -> E a cor que ficara as letras
Espero que tenham gostado do mini tutorial!

Abraços, Tecnomm
:cheers:





#5   em 03/02/11, 02:20 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
Retirar o link do seu logo - PHPBB3 + Alguns efeitos!
Agora va em
Painel de controle -> Visualização -> Gestão das imagens -> Modo Avançado

Então coloque este link no lugar do link da imagem do seu logo
Código:
http://illiweb.com/fa/empty.gif
Bom para remover o link do seu logo apenas adicione este codigo
.headerbar {
background-image: url('Link da sua imagem');
fixed-height: 800px;
fixed-width: 250px;
background-position: center;
background-repeat: no-repeat;
height: 250px;
}
A palavra em negrito e para você substituir pelo link da sua imagem!
Aonde adicionar?!
Painel de controle -> Visualização -> Cores -> Folha estilo CSS

Agora o codigo com efeitos hover para o seu logo
Código:
.headerbar {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}
.headerbar:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
cursor:allowed;
}
Aonde adicionar?!
Painel de controle -> Visualização -> Cores -> Folha estilo CSS

___________________________________________________________________

O seu logo ficara sempre do tamanho de acordo com o zoom que você der no seu navegador ele nunca altera o seu tamanho





#6   em 03/02/11, 02:22 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
Re: Códigos CSS
PHPBB3

Fazer efeito Hover no menu
Código:
ul.linklist li a img {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}
ul.linklist li a img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
cursor:allowed;
}
PHPBB2
Código:
.mainmenu {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}

.mainmenu:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
cursor:allowed;
}
PHPBB3

Borda em menu
div.navbar {
border: 1px solid #00000;
}
PHPBB3

Fundo do campo de texto
textarea {
background-image: url('
Link da sua imagem');
background-position: center center;
background-repeat: no-repeat;
}
PHPBB2

Fundo do campo de texto
textarea#text_editor_textarea {
background-image: url('Link da sua imagem');
background-position: center;
background-repeat: no-repeat;
}
Bom em breve posto mais...





#7   em 03/02/11, 02:30 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
Re: Códigos CSS
PHPBB3

Centralizar todo o perfil
e adicionar bordas e fundo
.postprofile{
background-color: #ECF3F7;
border: 1px solid #4CBDFF;
text-align: center;
}
As cores vermelhas são modificaveis por cores utilize abaixo o pequeno selecionador de cores






Depois somente copie o valor e modifique.

Abraços, BrunO™





#8   em 03/02/11, 02:31 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
[Dica] Removendo barrinha branca dos Anúncios
Pessoal,

Uma coisa que me irritava profundamente nos Anúncios era a barrinha branca que ficava logo abaixo da margem superior:


Para removê-la, basta adicionar o seguinte código ao CSS:
Código:
div#fa_ticker_container {
        margin-top: 0px !important;
        }
Testado e funcionando no IE7 e Firefox.

#9   em 03/02/11, 02:32 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
PHPBB3

Deixar o ícone de próximo post mais para baixo, conserto de alinhamento.
Código:
.last-post-icon {
margin-bottom: -9px;
}
Retirar as imagens de novas mensagens e etc, no final da pagina.
Código:
ul#picture_legend {
display:none;
}
Retirar a borda debaixo dos links, aquela linha branca.
Código:
ul.navlinks {
border-bottom: 0px solid #fcfcfc;
}
Deverá adicionar os códigos em;

Painel de controle :: Visualização :: Imagens e cores :: Cores / Guia folha estilo CSS

Espero que tenham gostado! :cheers:

#10   em 03/02/11, 02:32 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
Adicionar uma imagem fixa no fundo dos fóruns.
li.row {
background-image: url('http://img15.imageshack.us/img15/9581/alt.png');
background-position: bottom;
background-repeat: repeat-x;
}
A letra de vermelho poderá ser modificada pela sua imagem.

O resultado poderá ser visto no fórum no meu perfil.
:cheers:

#11   em 03/02/11, 02:35 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
Deixar menu com bordas retas


Phpbb 3
Código:
#page-header .navbar {
-moz-border-radius: 0px 0px 0px 0px;
margin-left:-6px;
margin-right: -6px;
}
Ocultar caixa de Search abaixo do menu

Phpbb 3
Código:
.search-box, #search-box {
display: none;
}
Abaixar ícone de "Ultimo post"

Phpbb 3
Código:
.last-post-icon {
margin-bottom: -9px;
}
Deixar nome de grupo de usuários todos em letras minusculas/ maisculas

Phpbb 3

Minuscula
Código:
em {
text-transform: lowercase;
}
Maiúscula
Código:
em {
text-transform: uppercase;
}
Até mais! Brevemente novos códigos.

#12   em 03/02/11, 02:36 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
Olá!

Este código faz com que uma imagem muito grande fique redimenssionada no fórum, para que caiba.
.post img {
max-width: 100%;
}
Ps: Pode alterar o valor em vermelho.
Abraços, Expert.

#13   em 03/02/11, 02:37 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
Agora vai ai um código para adicionar sombras ao redor do fórum, lembro
que para visualizar o efeito deverá atualizar o firefox para a versão 3.5.3.
Código:
[color=darkblue][color=red]#wrap[/color] {
-moz-box-shadow: [color=green]0 0 1em[/color] [color=violet]#ccc[/color];
}[/color]
• O texto grafado de vermelho e a classe aonde a sombra irá ser reproduzida.
• O valor de verde são os pontos aonde será exibido a sombra.
• O valor de violeta/ rosa, e a cor da sombra.
Até mais!
:cheers:

#14   em 03/02/11, 02:38 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
Olá!
Este código serve para alterar as linhas chamadas de hr, como esta:

hr, .hr {
color: #000000;
border: 1px solid #000000;
}
• O texto grafado de Violeta e a cor da linha.
• O valor de laranja e a espressura em que será reproduzido a borda. que deixará mais grossa a linha hr.
• O valor de azeitona e a cor da borda que irá engrossar a linha
hr. Recomendado que utilize sempre a mesma cor da linha hr.

Até mais!
:cheers:

#15   em 03/02/11, 02:40 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Fundo dos widgets transparente
Olà pessoal

Muito fixe este topico

Aqui vai a minha pequena contribuição
Codigo para deixar o Fundo dos widgets transparente testado e aprovado em PHPBB3

Aceder ao :
Painel de controle -> Visualização -> Imagens e cores -> Cores / Folha estilo CSS
.module {
background-color: transparent;
}
Nice work :cheers:

#16   em 03/02/11, 02:41 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
Re: Códigos CSS
Bom, lembrando que a maioria destes posts é tudo copiado lá de um tópico da forumeiros, estou avisando isto, para você novo administrador ou coordenador não estiver entendendo nada.





#17   em 03/02/11, 02:43 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
Olá!
Vim aqui porque tenho uma solução temporária até a ferramenta de redimensionamento de imagens ser traduzida.
Traduzir redimensionamento de imagens:
Código:
.resizebox .resize_border {
background-color: #FFFFCC;
-moz-border-radius:10px;
border:1px solid #000;
}
a.fullsize {
color: transparent !important;
background-image: url('http://img257.imageshack.us/img257/2408/redp.png');
background-repeat: no-repeat;
height: 20px;
width:130px;
}
.resize {
color: transparent !important;
background-image: url('http://img689.imageshack.us/img689/8599/redi.png');
background-repeat: no-repeat;
height: 20px;
width:130px;
}
a.enlarge {
color: transparent !important;
background-image: url('http://img94.imageshack.us/img94/2435/reda.png');
background-repeat: no-repeat;
height: 20px;
width:130px;
}
Até mais!

#18   em 03/02/11, 02:43 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Subfórum em negrito
Bom procurei no Fórum dos fóruns e não encontrei nada relacionado a mudar a aparência dos títulos dos subfóruns no índice.

Estava querendo colocar a fonte dos subfóruns em negrito no índice.
Li alguns tópicos que falavam principalmente em CSS.
Então resolvi fazer eu mesmo!

Fiz o seguinte:
O estilo relacionado aos subfóruns é gensmall
Então no Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de Estilo CSS, cole o seguinte código:
Código:
.gensmall {
  font-weight: bold;
}
E pronto... todos os subfóruns agora estão em negrito!!!
Utilizo a versão phpBB3

#19   em 03/02/11, 02:46 pm


Avril Lavigne


Diamond Member
Diamond Member
avatar
Re: Códigos CSS
Olá a todos!

Vim trazer-lhes um código para retirar os nomes dos grupos, testado na versão Phpbb 3:
Código:
em .gensmall {
display: none;
}
em {
color: transparent !important;
}
Melhores cumprimentos,
Lervisc

#20   em 03/02/11, 02:47 pm


Haseo


Emerald Member
Emerald Member

Re: Códigos CSS
Colocar bordas arredondadas nos botões do fórum
Código:
input.button1, input.button2, button.button2 {
font-size: 1em;
}
a.button1, input.button1 {
font-weight: bold;border: 1px solid #666666;
}
a.button2, input.button2, button.button2 {
border: 1px solid #BCBCBC;
}
a.button1, input.button1, a.button2, input.button2, button.button2 {
width: auto !important;
padding: 2px 3px;
font-family: Verdana,Arial,Helvetica,sans-serif;color: #000000;
background-repeat: repeat-x;
background-color: #FAFAFA;
background-image: url('http://illiweb.com/fa/prosilver/bg_button.gif');
background-position: top;
overflow: visible;
}
Colocar efeito de relevo no fórum
Código:
.row1,.row2,.row3,td.spacerow,td.cat,td.rowpic,th,.topnav{
  border: 1px solid;
  border-color: #707070 #000000 #000000 #707070;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.row1{
  background: #272727;
}

.row2{
  background: #272727;
}

.row3{
  background: #414141;
}
Aonde adicionar os códigos?
Painel de Controle -> Visualização -> Imagens e Cores -> Cores / Folha de Estilos CSS
Boa sorte!

EDIT
: Pode deixar algumas partes do fórum em cinza-escuro, para colocar
para branco altere onde estiver #000000 pela cor em hexadecimal desejada
(branco : #ffffff)





#21   em 03/02/11, 02:51 pm


Haseo


Emerald Member
Emerald Member

Re: Códigos CSS
esse código abaixo é para quem quer fazer o logo "desaparecer" quando o mouse não estiver apontando:
Código:
a#logo {
opacity:0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}
a#logo:hover {
opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
testado em PHPBB 3. não sei se é "logo" também no phpbb 2 e no invision e nem mesmo no punbb.





#22   em 03/02/11, 02:51 pm


Haseo


Emerald Member
Emerald Member

Re: Códigos CSS
deixar os textos do fóruns piscando.
Código:
a:link {
text-decoration: blink !important;
}





#23   em 03/02/11, 02:52 pm


Haseo


Emerald Member
Emerald Member

Re: Códigos CSS
Aqui vai um código que funciona para invision, e insere uma imagem de fundo no menu de navegação:
div#logostrip {
background-color: transparent !important;
background-image: url(IMAGEM);
}
Basta ir para sua folha de estilo CSS e colar lá :]
Substitua o que está em vermelho pelo link de sua imagem ;]





#24   em 03/02/11, 02:52 pm


Haseo


Emerald Member
Emerald Member

Re: Códigos CSS
Efeito 3D nas bordas:
PhpBB3
Código:
#wrap {
width : 1010px;
padding : 5px;
border : 6px solid #EEE;
-moz-border-radius : 7px;
-webkit-border-radius : 7px;
-moz-box-shadow : 0 0 10px #666;
-webkit-box-shadow : 0 0 10px #666;
}
PhpBB2
Código:
.bodyline {
width : 1010px;
padding : 5px;
border : 6px solid #EEE;
-moz-border-radius : 7px;
-webkit-border-radius : 7px;
-moz-box-shadow : 0 0 10px #666;
-webkit-box-shadow : 0 0 10px #666;
}
PunBB
Código:
.pun {
width : 1010px;
padding : 5px;
border : 6px solid #EEE;
-moz-border-radius : 7px;
-webkit-border-radius : 7px;
-moz-box-shadow : 0 0 10px #666;
-webkit-box-shadow : 0 0 10px #666;
}
Invision
Código:
body {
width : 1010px;
padding : 5px;
border : 6px solid #EEE;
-moz-border-radius : 7px;
-webkit-border-radius : 7px;
-moz-box-shadow : 0 0 10px #666;
-webkit-box-shadow : 0 0 10px #666;
}





#25   em 10/04/11, 12:36 pm


'Leozin


A Place For My Head
A Place For My Head
avatar
Retirar Itálico da Legenda dos Grupos
Primeiro vá ao Painel de Administrador, e aceda à Visualização > Cores > Folha de Estilo CSS.
E insira o seguinte código:
Código:
em {
font-style: normal;
}
*Obs: Para que o código faça efeito, é preciso saber se o código já está adicionado ao fórum, para isto, dê Ctrl+F para ver se já foi aplicado, caso sim, retire-o, e o insira no começo da Folha de Estilo CSS.





#26  


Conteúdo patrocinado


Re: Códigos CSS