Colocar imagem no titulo do widget

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 30/06/13, 01:36 pm

Qual é minha questão:
Olá, estou com problemas
 em colocar uma imagem
nos Widgets

Detalhes da Questão:
Em meu forum as categorias possuem uma imagem, uma especie de barra cinza chumbo que deixa as categorias mais bonitas.
Gostaria de saber se tem como fazer o mesmo com os widgets... 
Preciso apenas colocar a mesma imagem das categorias nos widgets .

Imagens:
Quero por esta imagem :

Como quero que fique :


A tabela de Categorias em Azul tem uma imagem de fundo quero que a tabela em vermelho fique igual

Entenderam ?


Endereço do meu fórum:
http://br-phones.forumeiros.com

Versão do fórum:
PUNBB
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por MateusA em 30/06/13, 04:23 pm

Olá!

Aceda à "Folha de Estilos CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilos CSS

Código:
Código:
.module .main-head {
background: url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png); repeat-x;
}

Valide.

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 30/06/13, 08:40 pm

Olá não saiu muito bem do jeito que eu queria, mas valeu a intenção ...
É que na verdade eu queria que os cantos do back groud ta dabela do widget fossem arredondados ...
Igual ao da imagem abaixo:

Entendeu ?
Se me ajudar vou ser muito grato obrigado desde já estarei colocando como resolvido assim que me responderem esta ultima questão
Vocês acham que é possivel arredondar ?
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por MateusA em 30/06/13, 08:54 pm

Olá!

Troque por esse:
Código:
        .module .main-head {
        background: url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png); repeat-x;
        border: 1px solid black;
        border-radius: 10px 10px 10px 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      -o-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px;
        }

Seta No código procure por "10px" vai diminuindo.

Até
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 30/06/13, 09:00 pm

Certo vou tentar, ja te respondo para falar se funcionou ...
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 30/06/13, 09:03 pm

Olá, infelizmente não resultou alem de continuar quadrado ficou mais ainda.

Tentei ir diminuindo coloquei

3px 3px 3px 3px;

em todos os 10px; e não alterou nada ...

Mas obrigado mesmo assim irei apagar agora de minha css pois ficou desproporcional ...
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por MateusA em 30/06/13, 09:16 pm

Olá!

Troque por esse:
Código:
.main .main-head{background-image:url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png);margin-bottom:12px;text-shadow:1px 1px 3px #000}.module .main-head{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;color:#fff!important;font-family:Trebuchet, Arial!important;font-size:13px;height:12px;margin-bottom:5px;padding-top:.4em!important}.module .main-head{-moz-border-radius:4px;-webkit-border-radius:4px;background:#000 url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png) top repeat-x;border:1px solid #000;border-radius:4px;height:17px;margin-bottom:0;margin-top:15px;padding-top:.4em!important}.module .main-head *{font-weight:400!important}.m .main-head {font-family:Lobster!important;font-size:22px!important;margin-top:1px}

.module .main-head {
  background-image:url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png);margin-bottom:12px;text-shadow:1px 1px 3px #000;
}

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 30/06/13, 09:21 pm

Juro, Não resultou novamente ficou igual antes...
Crazy so quero dizer ... OBRIGADO mesmo por você estar se esforçando e tentando me ajudar na maioria dos meus topicos valeu cara se quiser desistir por mim blz não tem problema fico feliz por termos tentado ...
Valeu mesmo !!!
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por MateusA em 30/06/13, 09:23 pm

Olá!

Estranho, veja aqui resultou
Seta http://narutorevolution.forum-pro.net/

Você adicionou o código em primeiro?
Já tentou personalizar está parte do fórum antes, e, existe algum código na sua "Folha de Estilos CSS", exceto o meu que tenha sido adicionado por você?

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por Daemon em 30/06/13, 09:25 pm

Isso acontece porque em seu css já possui códigos que modificam o header do seu widget... poderia passar o seu css?
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 30/06/13, 09:35 pm

Sim coloquei ele em primeiro acima de todos e mesmo assim não resultou...
Vou passar minha css mas é muito grande sera que cabe ?
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 30/06/13, 09:40 pm

Segue abaixo minha css:
CSS BR-Phones:

Não coube por isto hospedei ele...
Grato desde já...
Obrigado pela atenção
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por Sennior em 01/07/13, 09:56 pm

Saudações!

Aceda á tua 'Folha de Estilo CSS':
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS

Código:
.module {
-moz-border-radius: 5px !important;
-moz-box-shadow: 0 2px 5px 0 #dcdcdc!important;
-webkit-border-radius: 5px!important;
-webkit-box-shadow: 0 2px 5px 0 #dcdcdc!important;
background: #fff url(http://i36.servimg.com/u/f36/11/96/49/61/dropsh10.png) 0 -1px repeat-x!important;
border: 1px solid #D6D6D6!important;
border-radius: 5px!important;
box-shadow: 0 2px 5px 0 #dcdcdc!important;
background: url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png)!important;
border: 1px solid rgb(228, 228, 228)!important;
border-radius: 10px!important;
-moz-border-radius: 10px 10px 10px 10px!important;
-o-border-radius: 10px 10px 10px 10px!important;
-webkit-border-radius: 10px 10px 10px 10px!important;
}

Coloque no inicio de teu CSS.

Valide. Piscada

Abraços,
Mikéé.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por 1Gu@n4 em 02/07/13, 05:46 pm

Certo mas não resultou da maneira que eu esperava, alem de que tive que adicionar um dos codigos que foi citado acima pelo Crazy

Segue o codigo que tive que utilizar por completo:
Codigo:

Código:
.module {
-moz-border-radius: 5px !important;
-moz-box-shadow: 0 2px 5px 0 #dcdcdc!important;
-webkit-border-radius: 5px!important;
-webkit-box-shadow: 0 2px 5px 0 #dcdcdc!important;
background: #fff url(http://i36.servimg.com/u/f36/11/96/49/61/dropsh10.png) 0 -1px repeat-x!important;
border: 1px solid #D6D6D6!important;
border-radius: 5px!important;
box-shadow: 0 2px 5px 0 #dcdcdc!important;
background: url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png)!important;
border: 1px solid rgb(228, 228, 228)!important;
border-radius: 10px!important;
-moz-border-radius: 10px 10px 10px 10px!important;
-o-border-radius: 10px 10px 10px 10px!important;
-webkit-border-radius: 10px 10px 10px 10px!important;
}

.main .main-head{background-image:url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png);margin-bottom:12px;text-shadow:1px 1px 3px #000}.module .main-head{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;color:#fff!important;font-family:Trebuchet, Arial!important;font-size:13px;height:12px;margin-bottom:5px;padding-top:.4em!important}.module .main-head{-moz-border-radius:4px;-webkit-border-radius:4px;background:#000 url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png) top repeat-x;border:1px solid #000;border-radius:4px;height:17px;margin-bottom:0;margin-top:15px;padding-top:.4em!important}.module .main-head *{font-weight:400!important}.m .main-head {font-family:Lobster!important;font-size:22px!important;margin-top:1px}

.module .main-head {
  background-image:url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png);margin-bottom:12px;text-shadow:1px 1px 3px #000;
}

Imagem do resultado:



Digamos que fique assim como eu altero a cor da letra ?
Mas digamos que não como faço para que fique arredondado em todas as extremidades e fique igual ao das categorias... ???

Obrigado abraços!
avatar

1Gu@n4
Nível 5

Masculino
Inscrito dia : 25/05/2013
Mensagens : 42
Pontos Ativos : 96

Ver perfil do usuário http://br-detonados.forumeiros.com/ http://www.facebook.com/GuilhermeCoutinhoFuzel

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por Sennior em 02/07/13, 10:42 pm

Saudações,

Bem, tente assim então:

Código:

.main-head {
background-image: url(http://i36.servimg.com/u/f36/11/96/49/61/index-10.png) !important;
margin-bottom: 12px !important;
text-shadow: 1px 1px 3px #000 !important;
color: white !important;
font-family: lobster;
font-size: 22px;
font-style: normal;
font-variant: normal;
font-weight: 400;
border-radius: 11px !important;
}

Coloque no inicio de teu CSS.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Colocar imagem no titulo do widget

Mensagem por FUJITORA em 02/07/13, 11:21 pm

Olá,

Aceda á:
Painel de controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS

Adicione esse código no início do CSS:
Código:

.module .main-head {
background: url(http://i.imgur.com/QAbSekt.png); repeat-x;
}

Veja se o tamanho da imagem está bom.
Até! Piscada
avatar

FUJITORA
Nível 4

Masculino
Inscrito dia : 10/05/2012
Mensagens : 31
Pontos Ativos : 47

Ver perfil do usuário http://dbzprg.umforum.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum