Personalizar os widgets do fórum

[LeviFernandes]

Qual é minha questão:
É possível aterar o fundo dos menus do widgets igual a do fórum?


eu quero deixar numero 1 igual a do numero 2, como que faço?

Endereço do meu fórum:
http://gta-forum.forumeiros.com

Versão do fórum:
PHPBB3

[Jose Hamizaki]

Tente este codigo:

Código:

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-color: #cor;
}

#cor-A cor que deseja, podendo sempre modificá-la, tem que estar em hexadecimal a cor !

[LeviFernandes]

infelizmente não deu amigo :S

[Convidado]

Saudações!

Acenda sua "Folha de estilo CSS":

.module .h3 {
background: url(AQUI A URL DA IMAGEM) -1px 0px !important;
padding: 0.6em 1.3em !important;
margin-left: -10px;
margin-top: -6px;
width: 172px;
}

Verde > Mude para valor que pede, ou seja, vai mudar a barra que o senhor deseja.
Se acaso quiser adicionar uma cor, ao em vez de url da imagem, procure no código em que lhe passei, este:

background: url(AQUI A URL DA IMAGEM) -1px 0px !important;

E troque por este

background-color: #COR -1px 0px !important;

Verde > Troque pela cor que desejar.
e Validar.

Até.

[LeviFernandes]

Se eu deixar url da imagem eu posso colocar uma imagem no lugar da cor?

[LeviFernandes]

também infelizmente não deu certo

[Convidado]

Se eu deixar url da imagem eu posso colocar uma imagem no lugar da cor?

Saudações!

Claro senhor, eu só coloque como colocar cor vai que o senhor quisesse cor, ao em vez de url da imagem.

Até.

[LeviFernandes]

colocando imagem deu certo, porém ele tira a borda do fundo do widget, e colocando cor não deu certo

[LeviFernandes]

eu preferi colocar a imagem, só que o fundo fica quadrado e não redondo com as bordas, tem um código para deixar a borda do fundo do titulo redonda?

[Convidado]

Saudações!

Adicione este código juntamente com o que passei:

.module{
background-color: #fff !important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid black;
}

Até.

[LeviFernandes]

quase amigo, quase deu certo


Ele até ficou bonito, pois ficou com uma borda gostei porém ele não arredondou da imagem

[Convidado]

Saudações!

Troque o código por este:

.module .h3 {
background: url(AQUI A URL DA IMAGEM) -1px 0px !important;
padding: 0.6em 1.3em !important;
margin-left: -10px;
margin-top: -6px;
width: 172px;
-moz-border-radius: 20px;
border: 1px solid black;
}
.module{
background-color: #fff !important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid black;
}

Verde > Mude para valor que pede, ou seja, vai mudar a barra que o senhor deseja.

Até.

[LeviFernandes]

Um, ele arredondou a metade do fundo, porém a outra metade não, e os que arredondaram não ficaram de acordo a a borda arredondada

[Convidado]

Saudações!

Troque por este:

Código:

module .h3 {
background: url(AQUI A URL DA IMAGEM) -1px 0px !important;
margin-left: -10px;
margin-top: -6px;
-moz-border-radius: 20px;
border: 1px solid black;
}
.module{
background-color: #fff !important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid black;
}

Até.

[LeviFernandes]

sem efeito rs, aconteceu nada

[LeviFernandes]

aguardando

[seender]

Olá!

Vamos por passo, para se adicionar a cor a qualquer fundo de uma div (seletor) a propriedade será esta: background-color; queres adicionar um fundo a o módulo de maneira geral? então o código será este:

Código:

[color=darkblue].module{background-color: [color=red]#FFFFFF[/color];}[/color]

Quer adicionar um fundo ao título dos widgets? o código será este:

.module .h3{background-color: #FFFFFF;}

Quer arredondar as bordas? a propriedade será esta:

Código:

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

O que for mudado nos pixels de uma, deve ser mudado em todos os outros, então para o módulo de maneira geral ficar arrendondado, o código será este:

.module{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

Vermelho -> Quantidade em pixels do arredondamento.

Para arredondar o título o código será este:

.module .h3{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

Vermelho -> Quantidade em pixels do arredondamento.

Quaisquer códigos CSS devem ser aplicados em:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS

Melhores cumprimentos,
seender

[LeviFernandes]

E para colocar uma imagem no fundo dos títulos dos widgets?, o rapaz a cima ele estava quase la, eu até consegui colocar a imagem no fundo dos títulos porém, a imagem não ficou arredondada.

[Convidado]

Saudações!

Senhor, tente o mesmo trocar todos o código em que lhe passei por este:

.module{
background-color: #fff !important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid black;
}
.module .h3 {
background-color: #8B8682 !important;
}

Verde >Troque pela cor que deseja, no entanto olhe está tabela http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm tendo assim mais resultados.

Até.

[LeviFernandes]

mas eu quero olocar imagem e não cor

[Convidado]

Saudações!

Como pode ver após ter colocado a cor os cantos não arredondarão, e pela cor terá o resultado melhor, poderia me passar a imagem que está utilizando? Eu falo a imagem da barra.

Até.

[LeviFernandes]

na verdade eu ainda estou testando qual imagem colocar, mas com a cor não tem um modo que ocupe o fundo dos widgets completamente?

[LeviFernandes]

up

[Mr_Matrix]

Vá EM:

"Painel de controle Modulos Widgets do fórum Escolha seu Widget que quer editar Va em.. Utilizar um table type. marque a opção NAO..."

Pronto seu widgets ficará sem a bordas

Caso queira editar as barras do fundo das mensagens...

"VÁ em>Painel de controle Vizualizações Gestão de imagens Modo avançado Image do fundo dos título escolha o modelo que quiser, ou copie um link de uma imagem de uma barra e cole lá. Para editar a barra do Widgets va em ... Imagem do fundo das categorias (esquerda) ou (direita), e faça a mesma coisa.

[LeviFernandes]

amigo eu quero colocar uma imagem no fundo dos titulos do widgets, eu já fiz isso só que ele fica sem bordas a imagem.

[Mr_Matrix]

1. VÁ em>Painel de controle
   
2. Vizualizações
   
3. Gestão de imagens
   
4. Modo avançado
   
5. Image do fundo dos título
   
6. escolha o modelo que quiser, ou copie um link de uma imagem de uma barra e cole lá.
   
7. Para editar a barra do Widgets va em ...
   
8. Imagem do fundo das categorias (esquerda) ou (direita), e faça a mesma coisa.
   

Se seus widgets estiverem do lado direito editem a opção
Imagem do fundo das categorias (direita)




Resulta?

[Mr_Matrix]

Se essa opção estiver marcada como NAO, as imagens de fundo do titulo nao iram aparecer

1. Utilizar um table type. >> NAO... ele nao ira aparecer imagem no fundo do titulo dos Widgets... Marque SIM nesta opçao.
   

Retire todos os codigos sugeridos pelos membros acima,..

[LeviFernandes]

ok irei tentar.

[LeviFernandes]

onde esta vesta parte ? vSe essa opção estiver marcada como NAO, as imagens de fundo do titulo nao iram aparecer


Utilizar um table type. >> NAO... ele nao ira aparecer imagem no fundo do titulo dos Widgets... Marque SIM nesta opçao.
Retire todos os codigos sugeridos pelos membros acima,..

[Convidado]

Saudações!

Troque o código por este:

Código:

.module{
background-color: #fff !important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid black;
}
.module .h3 {
background-color: #878787 !important;
}

Até.

[LeviFernandes]

/\ e onde coloco a url da imagem ? neste código a cima?

[seender]

Olá!

Vamos por passo, para se adicionar a cor a qualquer fundo de uma div (seletor) a propriedade será esta: background-color; queres adicionar um fundo a o módulo de maneira geral? então o código será este:

.module{background-color: #FFFFFF;}

Quer adicionar um fundo ao título dos widgets? o código será este:

.module .h3{background-color: #FFFFFF;}

Quer arredondar as bordas? a propriedade será esta:

Código:

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

O que for mudado nos pixels de uma, deve ser mudado em todos os outros, então para o módulo de maneira geral ficar arrendondado, o código será este:

.module{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

Vermelho -> Quantidade em pixels do arredondamento.

Para arredondar o título o código será este:

.module .h3{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

Vermelho -> Quantidade em pixels do arredondamento.

Para Aplicar uma imagem de fundo no título dos widgets terá de utilizar estes códigos:

.module .h3{background-image:url(Endereço);background-repeat:repeat-x;}

Vermelho -> Endereço da imagem;
Laranja -> X = Repetição da imagem na horizontal. Y = Repetição da imagem na vertical, ou se não quiser repeti-la, troque o código depois de : e antes de ; por no-repeat.

Para Aplicar uma imagem de fundo nos widgets terá de utilizar estes códigos:

.module{background-image:url(Endereço);background-repeat:repeat-x;}

Vermelho -> Endereço da imagem;
Laranja -> X = Repetição da imagem na horizontal. Y = Repetição da imagem na
vertical, ou se não quiser repeti-la, troque o código depois de : e
antes de ; por no-repeat.

Quaisquer códigos CSS devem ser aplicados em:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS

Melhores cumprimentos,
seender

[LeviFernandes]

muito boa a excplicação /\ me ajudou bastante.
Minha dúvida é, como que coloco uma imagem no fundo? e não cor.