Resolução capa fórum

3 participantes

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

Tópico resolvido Resolução capa fórum

Mensagem por rcnovalski 31.01.22 14:52

Detalhes da questão


Endereço do fórum: https://www.jeeprenegadeclube.com/
Versão do fórum: ModernBB

Descrição


Tudo bom pessoal estou com um problema e gostaria de ajuda, existe alguma maneira de configurar que a capa do fórum fique proporcional automaticamente mediante a resolução que a pessoa use seu monitor. Por exemplo: HD ou FHD

Resolução HD
Resolução capa fórum Resolu13


Resolução FHD
Resolução capa fórum Resolu12

Obs.: Lembrando que estou usando CSS, existe uma resolução ideal para criar essa imagem ?
rcnovalski

rcnovalski
*

Membro desde : 09/05/2014
Mensagens : 40
Pontos : 74

https://www.jeeprenegadeclube.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Resolução capa fórum

Mensagem por Connor R. 31.01.22 16:23

Olá, em seu css procure a seguinte classe ".headerbar". Nesta classe você deve alterar os valores abaixo:

Código:
background-color: #000000!important;
background-size: contain !important;

Caso decida ter algo mais especifico leia abaixo.

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Resolução capa fórum

Mensagem por rcnovalski 31.01.22 16:33

segue meu css:
#logo {
float: none !important;
}
.navbar {
text-align: center !important;
margin-top: -285x !important;
}
/******logo tamanho*****/
#logo {
display: none !important;
}
.headerbar {
   background-color: #FFFAFA
!important;
   background-image: url(https://i.ibb.co/NCp02X3/Capa-Forum-JRC-31012022.png)!important;
   height: 250px!important;
   background-position: top!important;
}
/*******fim logo tamanho ******/

.mod-top-row .mod-top-desc {
   bottom: 0;
   font-size: 1.1rem;
   height: 24px;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
   background-color: #FF0303;
}


/********* imagem do mesmo  tamanho celular ****/
img {
   max-width: 100% !important;
}
/********* fim imagem do mesmo tamanho *******/

/***** centralizar baixo e cima botão buscar *******/
#search-box {
margin-top: 160px !important;
}
/***** fim centralizar baixo e cima botão buscar *******/

#search-box #keywords {
   background-color: grey !important;
}

/*** ocultar menu****/
a.mainmenu[href="/calendar"], [href="/faq"], [href="/groups"], [href="/register"], [href="/memberlist"], [href="/login"], [href="/search"], [href="/profile?mode=editprofile"], [href=""], [href="/gallery/index.htm"]
{display: none !important}
a#logout {display: none !important;}


/****m fim ocultar menu******/


/******* cor fundo wiget ********/
.module {
background-color:#FFFFFF    !important
}

/******** fim da fundo de widget *********/

/***** cor barra  widget *******/
.module .h3 {
   background-color: #000000!important;
}

/****** fim cor barra wifget *****/

/******  tirar cor fundo onde fica banner ******/
.headerbar {
   background-color: #EEE9E9!important;
 }

 /******* fim retirar cor banner *****/
 


/***** ACERTAR TAMANHO BANNER *****/
.headerbar {
 width: 100% !important;
 background-size:100% 100% !important;
}
/******* FIM ACERTAR BANNER ******/
.h3{
color:#ff7f00
!important;
}

testando daqui
#main .c0c7fdaf {
   background-color: #e9ebed!important;
}
#fa_ticker_block .module {
   background-color: #e9ebed!important;
}
#main div[style="overflow:visible"] {
   background-color: transparent!important;
}
rcnovalski

rcnovalski
*

Membro desde : 09/05/2014
Mensagens : 40
Pontos : 74

https://www.jeeprenegadeclube.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Resolução capa fórum

Mensagem por Connor R. 31.01.22 16:35

Please, mande dentro da tag code.
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Resolução capa fórum

Mensagem por rcnovalski 31.01.22 16:47

Caramba desculpa não entendi, Envergonhado
rcnovalski

rcnovalski
*

Membro desde : 09/05/2014
Mensagens : 40
Pontos : 74

https://www.jeeprenegadeclube.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Resolução capa fórum

Mensagem por Connor R. 31.01.22 16:50

Olá, use a tag code para enviar códigos. Evita erros e fica mais fácil de entender.

Mas, substitua o seu css pelo código dentro da tag abaixo.


Código:

#logo {
float: none !important;
}
.navbar {
text-align: center !important;
margin-top: -285x !important;
}
/******logo tamanho*****/
#logo {
display: none !important;
}
.headerbar {
  background-color: #FFFAFA
!important;
  background-image: url(https://i.ibb.co/NCp02X3/Capa-Forum-JRC-31012022.png)!important;
  height: 250px!important;
  background-position: top!important;
}
/*******fim logo tamanho ******/

.mod-top-row .mod-top-desc {
  bottom: 0;
  font-size: 1.1rem;
  height: 24px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: #FF0303;
}


/********* imagem do mesmo  tamanho celular ****/
img {
  max-width: 100% !important;
}
/********* fim imagem do mesmo tamanho *******/

/***** centralizar baixo e cima botão buscar *******/
#search-box {
margin-top: 160px !important;
}
/***** fim centralizar baixo e cima botão buscar *******/

#search-box #keywords {
  background-color: grey !important;
}

/*** ocultar menu****/
a.mainmenu[href="/calendar"], [href="/faq"], [href="/groups"], [href="/register"], [href="/memberlist"], [href="/login"], [href="/search"], [href="/profile?mode=editprofile"], [href=""], [href="/gallery/index.htm"]
{display: none !important}
a#logout {display: none !important;}


/****m fim ocultar menu******/


/******* cor fundo wiget ********/
.module {
background-color:#FFFFFF    !important
}

/******** fim da fundo de widget *********/

/***** cor barra  widget *******/
.module .h3 {
  background-color: #000000!important;
}

/****** fim cor barra wifget *****/

/******  tirar cor fundo onde fica banner ******/
.headerbar {
  background-color: #000000!important;
 }

 /******* fim retirar cor banner *****/
 


/***** ACERTAR TAMANHO BANNER *****/
.headerbar {
 width: 100% !important;
 background-size: contain !important;
}
/******* FIM ACERTAR BANNER ******/
.h3{
color:#ff7f00
!important;
}

testando daqui
#main .c0c7fdaf {
  background-color: #e9ebed!important;
}
#fa_ticker_block .module {
  background-color: #e9ebed!important;
}
#main div[style="overflow:visible"] {
  background-color: transparent!important;
}
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Resolução capa fórum

Mensagem por rcnovalski 31.01.22 17:15

Corrigido OK, muito obrigado meu amigo pela ajuda ficou top.

Resolução capa fórum Resolu14
rcnovalski

rcnovalski
*

Membro desde : 09/05/2014
Mensagens : 40
Pontos : 74

https://www.jeeprenegadeclube.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Resolução capa fórum

Mensagem por Lobs 01.02.22 0:47

Tópico resolvido


Movido para "Questões resolvidas".
Lobs

Lobs
****

Membro desde : 02/06/2013
Mensagens : 323
Pontos : 378

https://www.forumnsanimes.com

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