Design de Widget - ModernBB

Detalhes da questão

Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Alô galera, gostaria de ajuda para alterar o design de alguns dos Widgets do fórum...

- Últimos assuntos

Como é: https://i.imgur.com/S0jgCzP.png
Como gostaria: https://i.imgur.com/SCIjnTy.png
Imagem: https://i.imgur.com/6PdksZK.png

- Trama do RPG

Como é: https://i.imgur.com/M6H5oKi.png
Como gostaria: https://i.imgur.com/6rfRvXg.png
Imagem: https://i.imgur.com/Ui7Ox6o.png


Obrigado desde já e até!!!!

up, pls não me abandonem ;=;

up, pls não me abandonem ;=; ²

Olá!

Adicione este código na sua folha de estilos CSS:

Código:

#topwidg > div.module:nth-child(1) div.h3 {
background: url(https://i.imgur.com/6PdksZK.png) no-repeat -0px -5px;
background-size: 100% 100%;
font-size: 20px !important;
text-align: center;
}
#topwidg > div.module:nth-child(1) div.h3 i {
  display:none;
}

Resultado: http://prntscr.com/mq1mvi

Hancki

Olá! Existe uma maneira de retirar o fundo branco do título do widget? (Eu já criei uma nova imagem png com fundo transparente, mas parece que é o próprio widget que põe o fundo).

P.s: link da imagem arrumada https://i.imgur.com/E8BSsMT.png

Obrigado desde já e até!

Olá!

Adicione mais este código ao existente:

Código:

#topwidg > div.module:nth-child(1), #topwidg > div.module:nth-child(1) div.h3 {
  background-color: transparent !important;
  box-shadow: 0px !important;
}
#topwidg > div.module:nth-child(1) div[class="lastsubjects"] {
  background-color: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

Resultado: http://prntscr.com/mqitfu

Hancki

Funcionou! Tem como fazer isso com o widget "Trama do RPG" agora, se não for abusar da sorte kkk?

Obrigado desde já e até!

Claro que sim! Troque todo o código anterior por este:

Código:

#topwidg > div.module:nth-child(1), #topwidg > div.module:nth-child(1) div.h3, #topwidg > div.module:nth-child(2) > div.h3 {
  background-color: #e9ebed !important;
  box-shadow: 0px !important;
}
#topwidg > div.module:nth-child(1) div[class="lastsubjects"] {
  background-color: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
#topwidg > div.module:nth-child(1) div.h3, #topwidg > div:nth-child(2) > div.h3 {
background: url(https://i.imgur.com/E8BSsMT.png) no-repeat -0px -5px;
background-size: 100% 100%;
font-size: 20px !important;
text-align: center;
}

Hancki

Olá! Então, a imagem no 2° widget ficou esticada, veja: https://i.imgur.com/XSpQa6s.png

Lá no primeiro post eu coloquei a imagem que cabe certinho no 2°, que é essa: https://i.imgur.com/Ui7Ox6o.png
Tem como colocar essa no lugar? ><

Obrigado desde já e até!

Olá!

Claro que sim, mas vou precisar da imagem sem fundo (formato png)!

Hancki

Opa, perdão! Achei que já estava no formato, mas lá vai: https://i.imgur.com/CUEozn7.png

Até! Obrigado!

Olá!

É só usar este:

Código:

#topwidg > div.module:nth-child(1), #topwidg > div.module:nth-child(1) div.h3, #topwidg > div.module:nth-child(2) > div.h3 {
  background-color: #e9ebed !important;
  box-shadow: 0px !important;
}
#topwidg > div.module:nth-child(1) div[class="lastsubjects"] {
  background-color: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
#topwidg > div.module:nth-child(1) div.h3, #topwidg > div:nth-child(2) > div.h3 {
background: url(https://i.imgur.com/CUEozn7.png) no-repeat -0px -5px;
background-size: 100% 100%;
font-size: 20px !important;
text-align: center;
}

Hancki

Olá! Então, eu coloquei, mas agora o Widget pequeno ficou com a imagem reduzida, veja: https://i.imgur.com/48jF5Qs.png

Pelo código eu vi que só tem a imagem cumprida (https://i.imgur.com/CUEozn7.png)

Tem como colocar essa (https://i.imgur.com/E8BSsMT.png ) no menor e essa (https://i.imgur.com/CUEozn7.png) no maior?

Desculpe pela trabalheira kkk Obrigado desde já e até!

Zênite escreveu:Olá! Então, eu coloquei, mas agora o Widget pequeno ficou com a imagem reduzida, veja: https://i.imgur.com/48jF5Qs.png

Pelo código eu vi que só tem a imagem cumprida (https://i.imgur.com/CUEozn7.png)

Tem como colocar essa (https://i.imgur.com/E8BSsMT.png ) no menor e essa (https://i.imgur.com/CUEozn7.png) no maior?

Desculpe pela trabalheira kkk Obrigado desde já e até!

Olá!

A confusão foi minha!

Use este:

Código:

#topwidg > div.module:nth-child(1), #topwidg > div.module:nth-child(1) div.h3, #topwidg > div.module:nth-child(2) > div.h3 {
  background-color: #e9ebed !important;
  box-shadow: 0px !important;
}
#topwidg > div.module:nth-child(1) div[class="lastsubjects"] {
  background-color: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
#topwidg > div:nth-child(2) > div.h3 {
background: url(https://i.imgur.com/CUEozn7.png) no-repeat -0px -5px;
background-size: 100% 100%;
font-size: 20px !important;
text-align: center;
}
#topwidg > div.module:nth-child(1) div.h3 {
background: url(https://i.imgur.com/E8BSsMT.png) no-repeat -0px -5px;
background-size: 100% 100%;
font-size: 20px !important;
text-align: center;
}

Hancki

Funcionooooooou!!!!!! Valeuuuuu! Podem fechar!

Obrigado, de verdade!