Edição no chatbox

[Ioane]

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

[MateusA]

Olá!

Aceda à "Folha de Estilos CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilos CSS

Código:

Código:

#chatbox_footer {
background: transparent !important;
}

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

Vai aumentando/diminuindo o numero 50.

Valide.

Até mais.

[Ioane]

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"?

[MateusA]

Olá!

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

Até mais.

[Ioane]

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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png');
}

#chatbox_footer {
background-image: url('http://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png');}



#adds {
  background: url("http://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png") 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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png");
  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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png") 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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png") 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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png") 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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg.png") 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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png") 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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png") 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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png");
  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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png");
  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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png");
  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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png");
  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;
}

[MateusA]

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.

[Ioane]

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?

[MateusA]

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.

[Ioane]

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?

[Gmtp]

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.

[Ioane]

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

[Rigel]

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://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png');}

E troque por:

Código:

#chatbox_footer {
background-image: url('http://i1197.photobucket.com/albums/aa438/RacheliaOrg/Imperius/bg-1.png');
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.

[Ioane]

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

[Rigel]

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.

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.

[Ioane]

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