Colocar imagem no titulo do widget

Qual é minha questão:

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

Olá!

Aceda à "Folha de Estilos CSS":
Painel de Controle Visualização Imagens e Cores Cores 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.

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 ?

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;
        }

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

Até

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

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

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.

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 !!!

Olá!

Estranho, veja aqui resultou
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.

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

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

Segue abaixo minha css:

CSS BR-Phones:

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

Saudações!

Aceda á tua 'Folha de Estilo CSS':
Painel de Controle Visualização Imagens e Cores Cores 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.

Abraços,
Mikéé.

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:

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!

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.

Olá,

Aceda á:
Painel de controle  Visualização Imagens e Cores Cores 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é!