Design de Widget - ModernBB

2 participantes

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

Tópico resolvido Design de Widget - ModernBB

Mensagem por Zênite 20.02.19 13:51

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é!!!!
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 23.02.19 1:22

up, pls não me abandonem ;=;
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 24.02.19 23:50

up, pls não me abandonem ;=; ²
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Hancki 25.02.19 21:03

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
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 03/10/2009
Mensagens : 8150
Pontos ativos : 12176

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 26.02.19 0:51

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é!
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Hancki 26.02.19 20:03

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


Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 03/10/2009
Mensagens : 8150
Pontos ativos : 12176

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 26.02.19 20:58

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é!
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Hancki 26.02.19 21:48

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
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 03/10/2009
Mensagens : 8150
Pontos ativos : 12176

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 27.02.19 10:42

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é!
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Hancki 27.02.19 12:27

Olá!

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

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 03/10/2009
Mensagens : 8150
Pontos ativos : 12176

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 27.02.19 14:05

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

Até! Obrigado!
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Hancki 27.02.19 18:02

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
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 03/10/2009
Mensagens : 8150
Pontos ativos : 12176

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 28.02.19 10:55

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

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Hancki 28.02.19 20:33

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

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
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 03/10/2009
Mensagens : 8150
Pontos ativos : 12176

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Zênite 01.03.19 2:38

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

Obrigado, de verdade!
Zênite

Zênite
Nível 9

Masculino
Membro desde : 18/12/2018
Mensagens : 218
Pontos ativos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Design de Widget - ModernBB

Mensagem por Convidado 01.03.19 7:43

Tópico resolvido


Movido para "Questões resolvidas".
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos