Edição no chatbox

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

Resolvido Edição no chatbox

Mensagem por Ioane em 26/06/13, 06:27 pm

Qual é minha questão:
Olá,

Sei que existe um tópico que ensina a fazer edições no chatbox, mas meu problema é outro. Como podem ver na imagem abaixo, o centauro (imagem de fundo) está tendo suas patas cortadas por um fundo cinza irregular meio degradê, que está à vista no topo e na parte debaixo do chat. O mesmo acontece quando a barra de roll aparece ao lado direito e que, a setinha inferior que permite descer o roll não aparece por estar sendo ocultada por essa imagem.



Há um jeito de deixar esse fundo cinzento realmente como plano de fundo, para que tanto o centauro quanto a barra de roll on apareçam por cima? Senão, há como deixar essa parte transparente?

Agradeço já.

Endereço do meu fórum:
http://mundomeiosangue.forumfacil.net

Versão do fórum:
PHPBB3
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por MateusA em 26/06/13, 06:54 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:
#chatbox_footer {
background: transparent !important;
}

Seta O código acima e para deixar transparente, o código abaixo e para descer um pouco a barra.
Código:
#chatbox_footer {
margin-top: 50px !important;
}
Seta Vai aumentando/diminuindo o numero 50.

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: Edição no chatbox

Mensagem por Ioane em 27/06/13, 03:47 pm

O primeiro código funcionou mas não mudou o fato de que não dá para ver a barra e os pés do centauro. O segundo não ocasionou mudança alguma.

Não seria possível descer um pouco essa área que chamam de "footer"?
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por MateusA em 28/06/13, 11:05 am

Olá!

Poderia me fornecer a sua Folha de Estilos CSS?
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilos CSS

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: Edição no chatbox

Mensagem por Ioane em 28/06/13, 11:10 am

Aqui está:

Código:
#chatbox p{
background:transparent!important;
}
#chatbox {
background-image: url(http://i29.servimg.com/u/f29/15/19/81/48/untitl12.png);
background-repeat: no-repeat;
background-position: bottom right;
}


#chatbox_header {
-moz-border-radius: 20px 20px 0px 0px ;
background:url('http://illiweb.com/fa/pbucket.gif');
}

#chatbox_footer {
background-image: url('http://illiweb.com/fa/pbucket.gif');}



#adds {
  background: url("http://illiweb.com/fa/pbucket.gif") repeat scroll 0 0 transparent;
  border-left: 15px solid #D53323;
  border-right: 15px solid #D53323;
  margin: auto;
  padding: 3px;
  width: 90%;
}

#adds .h2 {
  background: none repeat scroll 0 0 #020202;
  border-bottom: 2px solid #B22222;
  border-radius: 10px 10px 0 0;
  color: #F9F9F9 !important;
  display: block;
  font-family: Georgia;
  font-size: 20px;
  font-weight: 400;
  padding: 15px;
  text-align: center;
}

table#adds h3 {
  background: none repeat scroll 0 0 #202020;
  border-bottom: 2px solid #B22222;
  color: #F9F9F9;
  font-family: Georgia;
  font-weight: 400;
  padding: 4px;
  text-align: center;
}


.basic-links a {
  background: none repeat scroll 0 0 #050505;
  border-radius: 5px 5px 5px 5px;
  display: block;
  margin: 2px;
  padding: 2px 2px 2px 10px;
  text-align: center;
  text-transform: uppercase;
}

a:active, a:link, a:visited {
  border: medium none;
  color: #F5F5F5;
  font-family: georgia;
  font-size: 9px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

.AccordionTitle {
  background: none repeat scroll 0 0 #050505;
  border-bottom: 2px solid #B22222;
  color: #F9F9F9;
  cursor: pointer;
  display: inline;
  font-family: Georgia;
  font-size: 10px;
  font-weight: 400;
  height: 20px;
  margin-left: 2px;
  overflow: hidden;
  padding: 4px;
  text-align: center;
  text-transform: uppercase;
}

body {
  background-image: url("http://illiweb.com/fa/pbucket.gif");
  color: #707070;
  font-family: Tahoma;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-align: justify;
}

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #000000;
  border-right: 0 none #000000;
  border-style: solid none none;
  border-width: 1px 0 0;
  clear: both;
  display: block;
  height: 1px;
  margin: 5px 0;
}
#container, #content, #main-content, #wrapper, .clear, .header, .icon, .inner, .panel {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
}
#main {
  padding: 10px;
}
#content-container div#left {
  background: url("http://illiweb.com/fa/pbucket.gif") repeat scroll 0 0 #030303;
  border-radius: 5px 5px 5px 5px;
  margin-left: 3px;
  margin-top: -380px;
}
#site-title, #smiley-box {
  display: none;
  visibility: hidden;
}
#logo-desc, .headerbar {
  background: none repeat scroll 0 0 transparent;
  font-size: 0;
}
.module {
  background: none repeat scroll 0 0 transparent;
}
a:active, a:link, a:visited {
  border: medium none;
  color: #F5F5F5;
  font-family: georgia;
  font-size: 9px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}
a.topictitle:hover, a:hover {
  color: #CE0000;
  text-decoration: none;
}
a.forumtitle {
  border-bottom: 1px dotted #202020;
  color: #FAF0E6;
  display: block;
  font-family: Georgia;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 12px;
  margin: 0;
  opacity: 0.7;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
a.forumtitle:hover {
  color: orange;
  opacity: 1;
  text-decoration: none;
}
p em b a.gensmall {
  color: #000000;
  font-family: georgia;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}
p em {
  background: none repeat scroll 0 0 #080808;
  border-left: 1px dotted #8B1A1A;
  border-right: 1px dotted #8B1A1A;
  color: transparent;
  display: block;
  font-style: normal;
  margin-left: 100px;
  margin-right: 100px;
  padding: 10px;
  text-align: center;
}
.topicsposts {
  border: medium none;
  font-size: 10px !important;
  font-weight: 400;
  margin-bottom: 3px;
  text-align: left;
  vertical-align: middle;
}
li.header {
  background: url("http://illiweb.com/fa/pbucket.gif") repeat scroll 0 0 #050505;
  border-bottom: 2px solid #8B1A1A;
  border-radius: 10px 10px 0 0;
  color: #F5F5F5;
  display: block;
  text-align: center;
  vertical-align: middle;
}
.table-title {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  line-height: 20px;
}
.table-title h2 {
  color: #F0E68C;
  font-family: georgia;
  font-size: 20px;
  letter-spacing: 2px;
  margin: 0;
  text-align: right;
  text-shadow: 0 0 6px #F9F9F9;
  text-transform: uppercase;
}
.posts {
  border: medium none;
  font-size: 9px !important;
  font-weight: 400;
  vertical-align: middle;
}
.lastpost {
  border: medium none;
  font-size: 9px !important;
  font-weight: 400;
  vertical-align: middle;
}
.topics {
  border: medium none;
  font-size: 9px !important;
  font-weight: 400;
  vertical-align: middle;
}
.forabg {
  background-color: transparent;
  background-image: none;
  border: medium none;
}
.forumbg {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
}
ul.topiclis {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
}
.row1, .row2, .row3, li.row, li.row:hover {
  background: none repeat scroll 0 0 #050505;
  border: medium none;
}
table.table1 tbody tr.hover, table.table1 tbody tr:hover {
  background-color: #000000;
  border: medium none;
  color: #6B6B6B;
}
table.table1 tbody td {
  border-top: 1px dotted #202020;
  padding: 5px;
}
td.avatar-mini img {
  background-color: #FFFFFF;
  border: 1px solid #595959;
  height: 80px;
  vertical-align: middle;
  width: 45px;
}
ul.topiclist {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
}
ul.topiclist dd {
  border: medium none;
}
.post {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  color: #707070;
  opacity: 0.9;
  padding: 10px;
}
.postbody .content {
  background: none repeat scroll 0 0 #000000;
  border: 1px solid #101010;
  color: #707070;
  font-size: 12px;
  opacity: 0.9;
  padding: 10px;
}
.postprofile {
  border: medium none;
  border-radius: 10px 10px 10px 10px;
  text-align: center;
}
.postprofile img {
  border-radius: 20px 20px 20px 20px;
}
.topic-title a {
  margin: 0;
  text-align: left;
}
ul.profile-icons {
  margin-top: 20px;
}
.navbar {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  width: 850px;
}
ul.linklist, ul.linklist li {
  border: medium none;
}
a.mainmenu {
  background: url("http://illiweb.com/fa/pbucket.gif") repeat scroll 0 0 #010101;
  border: 1px dotted #040404;
  border-radius: 5px 5px 5px 5px;
  color: #F0E68C;
  font-family: Georgia;
  font-size: 10px !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -1px;
  margin: -2px;
  padding: 7px;
  text-transform: uppercase;
}
a.mainmenu:hover {
  background: url("http://illiweb.com/fa/pbucket.gif") repeat scroll 0 0 transparent;
}
.navbar a {
  color: #F5F5F5;
  font-style: normal;
}
#picture_legend {
  margin: 30px;
}
.h3 {
  font-size: 20px;
  font-style: italic;
  letter-spacing: 2px;
}
#i_icon_mini_calendar, #i_icon_mini_faq, #i_icon_mini_search, #search-box, .i_icon_ip {
  display: none;
  visibility: hidden;
}
.module .h3 {
  display: none;
  visibility: hidden;
}
dl.codebox {
  background: url("http://illiweb.com/fa/pbucket.gif") repeat scroll 0 0 #020202;
  border: 1px solid #080808;
  border-radius: 8px 8px 8px 8px;
}
dl.codebox:hover {
  border: 1px solid #080808;
}
dl.codebox dt {
  border-bottom: 1px dotted #080808;
  color: #F5F5F5;
  display: block;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.8em;
  font-weight: 700;
  margin-bottom: 3px;
  text-transform: uppercase;
}
dl.codebox code {
  color: #F5F5F5;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  text-shadow: 1px 1px 1px #909090;
}
blockquote {
border-bottom: 1px dotted #080808;
  color: #F5F5F5;
  display: block;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.8em;
  font-weight: 700;
  margin-bottom: 3px;
  text-transform: uppercase;
background: url("http://illiweb.com/fa/pbucket.gif") repeat scroll 0 0 #020202;
  border: 1px solid #080808;
  border-radius: 8px 8px 8px 8px;
}
blockquote:hover  {
 border: 1px solid #080808;
}

.content blockquote {
  border-bottom: 1px dotted #080808;
  color: #F5F5F5;
  display: block;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.8em;
  font-weight: 700;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.inputbox {
  background-image: url("http://illiweb.com/fa/pbucket.gif");
  border: 1px solid #202020;
  border-radius: 5px 5px 5px 5px;
  padding: 3px;
}
.inputbox:hover {
  border: 1px dotted #505050;
}
.inputbox:focus {
  border: 1px dotted #505050;
  color: #F5F5F5;
}
input, textarea {
  background: none repeat scroll 0 0 #000000;
  border: 1px solid #202020;
  color: #F5F5F5;
}
#desc1 {
  background-image: url("http://illiweb.com/fa/pbucket.gif");
  border-left: 5px solid #8B1A1A;
  border-radius: 15px 15px 50px 50px / 10px 10px 25px 25px;
  border-right: 5px solid #8B1A1A;
  color: #FFFFFF;
  font-size: 10px;
  margin-top: -9px;
  opacity: 0.7;
  padding: 15px;
  text-align: justify;
  vertical-align: middle;
}
#trama {
  background: none repeat scroll 0 0 #010101;
  border: 2px solid #090909;
  height: 350px;
  overflow: auto;
  padding: 7px;
  width: 460px;
}
span.trama-h1 {
  border-bottom: 1px solid #8B1A1A;
  display: block;
  font-family: georgia;
  font-size: 18px;
  letter-spacing: 2px;
  margin: 4px;
  text-align: center;
  text-transform: uppercase;
}
#desc1 img {
  border-radius: 2px 2px 2px 2px;
  float: left;
  margin: 1px 5px 1px 1px;
}


.scrollgeneric {
  font-size: 1px;
  left: 0;
  line-height: 1px;
  position: absolute;
  top: 0;
}
.vscrollerbase {
  background-image: url("http://illiweb.com/fa/pbucket.gif");
  width: 15px;
}
.vscrollerbar {
  background-color: #8B1A1A;
  border-radius: 5px 5px 5px 5px;
  width: 15px;
}
.hscrollerbase {
  background-color: #010101;
  height: 10px;
}
.hscrollerbar {
  background-color: #8B1A1A;
  height: 10px;
}
.scrollerjogbox {
  background-color: gray;
  bottom: 0;
  height: 10px;
  left: auto;
  right: 0;
  top: auto;
  width: 10px;
}
#quick_reply {
  display: none;
}
.fade {
  background: -moz-linear-gradient(left center , #000000 0%, transparent 100%) repeat scroll 0 0 transparent;
  display: inline-block;
}
.blur {
  color: #DDDDDD;
  display: inline-block;
  text-shadow: 0 0 6px #AAAAAA;
}


#desc1 {
  background-image: url("http://illiweb.com/fa/pbucket.gif");
  border-left: 5px solid #8B1A1A;
  border-radius: 15px 15px 50px 50px / 10px 10px 25px 25px;
  border-right: 5px solid #8B1A1A;
  color: #FFFFFF;
  font-size: 10px;
  margin-top: -9px;
  opacity: 0.7;
  padding: 15px;
  text-align: justify;
  vertical-align: middle;
}
      .module {
      border: 4px solid #c21515;
 border-radius: 4px 4px 4px;
      background: #000000;
      box-shadow: 1px 0px #4f4636;
      }
      .postbody .content.clearfix {
      color: white !important;
      }
      .postbody .content.clearfix {
        border: none !important;
      }
      .postprofile img{
      border-radius:0px 0px 0px 0px;
      -moz-border-radius:0px 0px 0px 0px;
      -webkit-border-radius:0px 0px 0px 0px;
      }
  form#quick_reply #textarea_content textarea#text_editor_textarea, #message-box textarea{
  font-family: Arial;
  }
.text-field label #message.post {
background-image: none !important;
background-color: white;
 border-radius: 4px 4px 4px;
}
      .table-title h2 {
      color: #bc5050 !important;
      }
.postbody .content {
      color: withe !important;
      }
.postbody .content {
      border: none !important;
      }
      .lastpost {
        text-align: left !important;
      }
        .h3 {
        font-size: 14px;
        font-style: normal;
        letter-spacing: 2px;
        font-family: Arial;
        }
.i_icon_ip, #i_icon_ip {
display: able;
}
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por MateusA em 28/06/13, 11:25 am

Olá!

Na sua CSS procure por:
Código:
#chatbox {
background-image: url(http://i29.servimg.com/u/f29/15/19/81/48/untitl12.png);
background-repeat: no-repeat;
background-position: bottom right;
}
Troque por:
Código:
#chatbox {
background-image: url(http://i29.servimg.com/u/f29/15/19/81/48/untitl12.png);
background-repeat: no-repeat;
background-position: right;
}

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: Edição no chatbox

Mensagem por Ioane em 28/06/13, 11:52 am

Bem, o centauro agora está mais acima, então posso ver seus pés, mas a parte debaixo do scroll continua oculta atrás de imagem de background do footer. Seria legal se a imagem realmente fosse backgroung, que ficasse bem no fundo e que pudéssemos ver toda a barra.

É possível?
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por MateusA em 28/06/13, 11:57 am

Olá!

Não compreendi a sua dúvida, pode tirar uma captura screen?
O seu tópico era para as patas do centauro aparecer certo? isso já esta resolvido.
A parte debaixo? como assim?
O scroll? não compreendi esse trecho.

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: Edição no chatbox

Mensagem por Ioane em 28/06/13, 12:27 pm

Aqui está o print:



Como pode ver, a barra não está completa. A sua parte inferior está sendo oculta pela imagem de plano de fundo do footer.

Tem como consertar isso?
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por Gmtp em 28/06/13, 02:03 pm

Olá,

Troque esse :
Código:
#chatbox {
background-image: url(http://i29.servimg.com/u/f29/15/19/81/48/untitl12.png);
background-repeat: no-repeat;
background-position: right;
}

Por este :
Código:
#chatbox {
background-image: url(http://i29.servimg.com/u/f29/15/19/81/48/untitl12.png);
background-repeat: no-repeat;
background-position: 10px right;
}

Até mais.
avatar

Gmtp
Membro do Fórum

Masculino
Inscrito dia : 03/01/2013
Mensagens : 1034
Pontos Ativos : 1451

Ver perfil do usuário http://makerforum.forumeiros.com/ https://www.facebook.com/gyovany.francini

Resolvido Re: Edição no chatbox

Mensagem por Ioane em 28/06/13, 02:08 pm

A única coisa que mudou foi a posição da imagem de fundo, o centauro, que passou a se localizar na parte superior esquerda.
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por Rigel em 28/06/13, 03:40 pm

Há uma coisa que você não notou.
A imagem em png do seu #chatbox_footer é muito alta, experimente diminuir a altura desta um pouco e depois de trocá-la por uma de altura (height) menor, veja se ficou bom.

Caso não queira mudar apenas a altura da imagem, vá até seu

Código:
#chatbox_footer {
background-image: url('http://illiweb.com/fa/pbucket.gif');}

E troque por:

Código:
#chatbox_footer {
background-image: url('http://illiweb.com/fa/pbucket.gif');
background-position: bottom center;
height: 30px;
}

Vê se da certo, a parte no height pode ser modificada para menos ou mais, caso deseje aumentar ou diminuir a altura. E qualquer coisa, se o centauro estiver ficado muito alto, na área do #chatbox, no campo background-position, você já pode voltá-lo para bottom right e ver se chega ao desejado.

Caso não, envie um print para ver como ficou.
avatar

Rigel
Nível 5

Masculino
Inscrito dia : 09/07/2012
Mensagens : 41
Pontos Ativos : 51

Ver perfil do usuário http://eragonrpgonline.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por Ioane em 28/06/13, 05:12 pm

Acho que entendi onde está o problema. O último código que usei, de Rigel, deu certo, entretanto, ao diminuir o tamanho do footer, comeu no box de mensagem. Há então um código para eu diminuir a altura do box de mensagens? Tenho certeza que isso resolverá.
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por Rigel em 28/06/13, 05:25 pm

O box de mensagem seria a parte onde se escreve as mensagens para enviar ou a parte onde se vê as mensagens dos players ?
Bem, seguindo o assunto, deve ser a parte de envio de mensagens. Mostrando a lingua

Tente o seguinte, acrescente esse code na sua folha de CSS:

Código:
#chatbox_footer #chatbox_messenger #message {
height: 15px !important;
}

ou esse:

Código:
#chatbox_footer #chatbox_messenger .post {
height: 15px !Important;
}

Agora vê se é o desejado.... hmmmm
Mas acho que testamos isso ae e não foi correto ? Então espera alguém aparecer com algum código para mudar este campo de mensagem do chatbox, deve ser algo relacionado ao seu .post no css.... Sei la, espera alguém mais experiente aparecer.


Última edição por Rigel em 28/06/13, 05:53 pm, editado 1 vez(es)
avatar

Rigel
Nível 5

Masculino
Inscrito dia : 09/07/2012
Mensagens : 41
Pontos Ativos : 51

Ver perfil do usuário http://eragonrpgonline.forumeiro.com/

Resolvido Re: Edição no chatbox

Mensagem por Ioane em 28/06/13, 05:39 pm

O código não funcionou, mas continuo achando que esse é o problema. Alguém mais pode me ajudar?
avatar

Ioane
Usuário avançado

Masculino
Inscrito dia : 17/06/2009
Mensagens : 386
Pontos Ativos : 638

Ver perfil do usuário http://jovensescritores.forumeiro.com/

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