'Daisuke
sou nível 7Qui 03 Jan 2013, 9:22 pm | |
Qual é minha questão:
Olá novamente,segui esse tutorial https://spdesign.forumeiros.com/t2290-chat-box-personalizado e deu bastante certo!E gostei do resultado,porém se vocês podem perceber há um quadrado branco atrás do chat,diferente dos resultados expostos no tópico do tutorial,será que há algum jeito de removê-lo?
Minha Folha Estilo CSS:
Imagem do meu problema:
Endereço do meu fórum:
http://digimonxrosgamerpg.forumeiros.com
Versão do meu fórum:
PUNBB
Olá novamente,segui esse tutorial https://spdesign.forumeiros.com/t2290-chat-box-personalizado e deu bastante certo!E gostei do resultado,porém se vocês podem perceber há um quadrado branco atrás do chat,diferente dos resultados expostos no tópico do tutorial,será que há algum jeito de removê-lo?
Minha Folha Estilo CSS:
- Código:
/* ---------------- Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
width: 15px;
height: 5px; }
::-webkit-scrollbar-track-piece {
background: #ffffff;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background: #038a28;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #038a28;
}
.pun .post .user {
-moz-border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #a8a180;
-webkit-border-radius: 6px;
-webkit-box-shadow: 2px 2px 2px #a8a180;
background: transparent url(http://i1099.photobucket.com/albums/g393/Daisuke_131/Tagiru2_zpsbb8f9f8d88888.png);
background-color: white;
border: 1px solid red;
border-radius: 6px;
box-shadow: 2px 2px 2px #a8a180;
max-height: 1024px;
max-width: 210px;
overflow: auto;
overflow-x: hidden;
padding-right: 10px;
padding-top: 15px;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #f47b21;
scrollbar-darkshadow-color: #fff;
scrollbar-face-color: #FFF;
scrollbar-highlight-color: #c6c6c6;
scrollbar-shadow-color: #f47b21;
scrollbar-track-color: #fff;
width: 200px;
}
.pun .post .user {
border-color: #D9D9D9;
border-right-style: solid;
border-right-width: 1px;
color: #1A0000;
display: inline;
float: left;
min-height: 80px;
position: relative;
width: 31%;
}
/*SPOILER&CODE*/.spoiler{border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px}
dl.codebox{border:1px solid #c9d2d8;margin:0;padding:3px;width:90%;background:none;
background-image:url('IMAGEM')}
dl.codebox dd{padding:0px;padding-top:3px;margin:0}
/*pm*/.postmain .postbody .post-entry dl.codebox{width:550px !important}
/*conteudo*/.codebox .spoiler_content,.cont_code{margin-left:0px;
padding-left:10px;padding-right:10px;padding-bottom:10px;padding-top:5px;
border:1px solid #d3d4d5;font-size:11px;
border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;
background-color:#ffffff;
background-image:linear-gradient(#ffffff,#f2f2f2);
background:-moz-linear-gradient(#ffffff,#f2f2f2);
background-image:-webkit-linear-gradient(#ffffff,#f2f2f2)}
.codebox .spoiler_content img{max-width:100% !important}
dl.codebox dt{color:#0cb358;padding:0 0 0 15px}
#pun-about, #pun-visit {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/transp10.png);
border: 1px solid #D4D4D4;
border-radius: ;
}
td .genmed b{display: none;}
.dd-textarea #text_editor_textarea{background:url(http://i1099.photobucket.com/albums/g393/Daisuke_131/DigiQuartznormal.png) no-repeat 0px -69px;}
.dd-textarea #text_editor_textarea{width:500px !important;}
.dd-textarea #text_editor_textarea:focus{
background:url(http://i1099.photobucket.com/albums/g393/Daisuke_131/DigiQuartznormaltranspa.png) no-repeat 0px -69px;
box-shadow:1px 1px 8px 4px #353535;
-moz-box-shadow:1px 1px 8px 4px #353535;
-webkit-box-shadow:0px 0px 8px 0px #a1a1a1}
.dd-textarea #text_editor_textarea:hover{
background:url(http://i1099.photobucket.com/albums/g393/Daisuke_131/DigiQuartznormaltranspa.png) no-repeat 0px -69px;
box-shadow:1px 1px 8px 4px #353535;
-moz-box-shadow:1px 1px 8px 4px #353535;
-webkit-box-shadow:0px 0px 8px 0px #a1a1a1}
a:hover{text-shadow:0px 0px 5px #0b9700;color:#0b9700}
#chatbox {background-color:#ffffff;}
#chatbox_members {background-color:#ffffff;}
#chatbox_footer {background-color:#ffffff;}
.postmain blockquote{background-color:#fff;border:1px solid #ccc;padding:.5em 1em}
blockquote,blockquote blockquote,blockquote blockquote blockquote{background-image:-webkit-linear-gradient(#f2f2f2,#ffffff)}blockquote,blockquote blockquote,blockquote blockquote blockquote{-moz-border-radius:6px;-moz-box-shadow:2px 2px 2px #a8a180;-webkit-border-radius:6px;-webkit-box-shadow:2px 2px 2px #a8a180;background:-moz-linear-gradient(#f2f2f2,#ffffff);background-color:#fff;background-image:-webkit-linear-gradient(#f2f2f2,#ffffff);border:1px solid #a8a180;border-radius:6px;box-shadow:2px 2px 2px #a8a180;font-size:11px;margin:0;padding:10px;width:90%}blockquote img{max-width:100%!important}
a span[style="color:#ADADAD"] strong, a[style="color:#ADADAD"] {
background: url(http://2img.net/i/fa/admin/couronne.png) 0% 0% no-repeat !important;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
a span[style="color:#FF0000"] strong, a[style="color:#FF0000"] {
background: url(http://i1099.photobucket.com/albums/g393/Daisuke_131/XrosHSymbol.png) 0% 0% no-repeat !important;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
a span[style="color:#0857F7"] strong, a[style="color:#0857F7"] {
background: url(http://i1099.photobucket.com/albums/g393/Daisuke_131/BlueFSymbol.png) 0% 0% no-repeat !important;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
a span[style="color:#571857"] strong, a[style="color:#571857"] {
background: url(http://i1099.photobucket.com/albums/g393/Daisuke_131/TwilighTSymbol.png) 0% 0% no-repeat !important;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
a span[style="color:#636E6D"] strong, a[style="color:#636E6D"] {
background: url(http://i1099.photobucket.com/albums/g393/Daisuke_131/BagraASymbol.png) 0% 0% no-repeat !important;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
.page-title h2{
text-align:center!Important;
}
.post_avatar
{
-webkit-filter: grayscale(0);
display: inline-block;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.post_avatar:hover {
-webkit-filter: grayscale(1);
}
.main-box.clearfix {
background: rgba(255, 255, 255, 0.5);
}
table.portal tbody tr td[width="20%"] .module {
background: none !important;
}
.module {border-radius: 8px !important;}
.perfilInfo {
background: url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0%;
float: left;
height: 14em;
left: -38em;
padding: 16px 0px 38px 5px;
top: 13px;
width: 510px;
z-index: 999;
}
.linkPrf {
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
background: #F6F6F6;
border: 1px solid #DBDBDB;
border-radius: 0 0 4px 4px;
bottom: -14px;
border-top:none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 1px 0 rgba(0, 0, 0, 0.3);
color: #616161;
float: left;
height: 14px;
left: 13.8em;
margin: 2px;
padding: 5px;
text-align: center;
text-decoration: none!important;
transition: all .2s ease-in-out;
width: 8em;
}
.linkPrf:hover{color: #4C4C4C;
border-color: #9A9A9A;}
.linkPrf:hover a{color: #4C4C4C;}
.linkPrf a{color:#616161 !important; font:normal 12px; text-decoration:none;}
.setPerfil {
background: rgba(0, 0, 0, 0.3);
display: block;
height: 100%;
padding: 5px;
padding-bottom: 10px;
border-radius: 3px;
}
.setPerfil > span {
background: #f9f9f9;
border-radius: 3px;
display: block;
height: 100%;
padding: 3px;
border: 1px solid #999;
}
.setPerfil .PerfilInfoImg {
width: 94px;
height: 160px;
float: left;
display: table;
background: #E1E1E1;
padding: 3px;
box-shadow: 1px 1px 0 #CCC;
}
.setPerfil p div{
display: inline;
}
.setPerfil h2 {
float: left;
font: bold 19px "Trebuchet MS";
display: block;
background: #E1E1E1;
width: 382px;
padding: 5px;
text-shadow: 1px 1px 0 white;
border-radius: 0 10px 0px 0;
box-shadow: 1px 1px 0 #CCC;
margin-bottom:10px;
}
/*QUEM ESTÁ ONLINE? -PERSONALIZAÇÃO*/
.letras{
border-bottom:2px solid white;
color:#8C8C8C;
text-shadow:1px 0px 1px #CFCFCF;
background: none repeat scroll 0 0 #FCFCFC;
position:relative;
bottom:-1px;
border:2px solid #787878;
border-radius: 5px 5px 0px 0px;
padding:5px;
padding-bottom:0px!Important;
}
#onlinelist2, #onlinelist3{
min-height:100px!Important;
}
#stats2{
margin-bottom:10px!Important;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
max-width:100%;
width:auto;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist2{
margin-bottom:10px!Important;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
min-height:80px;
margin-left:-2px;
height:auto;
width:97.6%/*350px*/!Important;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist3{ margin-bottom:10px!Important;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
min-height:80px;
margin-right:-2px;
height:autopx;
margin-left:3px;
width:97.6%/*350px*/!Important;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist4{
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
max-width:100%;
width:98.9%;
max-height:50%;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#stats2, #onlinelist2, #onlinelist3, #onlinelist4, .letras{
height:auto;
background: #F7F7F7 url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif);
background-repeat: repeat-x repeat-y;
}
.fundo{
margin-bottom:5px;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-top: 10px;
padding:10px;
}
.fundo2{
margin-top:5px;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-top: 10px;
padding:10px;
}/*www.rmbr.forumeiros.com*/
-------------------------------------------------------------
#main-content .main .main-content.chatbox.clearfix {border-radius: 11px;}
object[data="/chatbox/index.forum?page=front&"] {border-radius: 11px;}
#chatbox_header {border-top-left-radius: 11px;border-top-right-radius: 11px;}
.main .main-head {background: url(http://fotobg.ru/upload/img1350206713.jpg) 46% !important;}
#main-content .main .main-head {border: 1px solid;border-top-right-radius: 11px;border-top-left-radius: 11px;}
.main .main-head{margin-top:16px;}
.module.main .main-head{border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;}
#pun-announcement {border-radius:8px}
.module .main-content {
padding: 1em;
background-image: url(http://i1099.photobucket.com/albums/g393/Daisuke_131/DigiQuartznormaltranspa.png);
border-radius: 0px 0px 20px 20px;
border: 2px solid #008015;
}
#chatbox_header.main-head {background: url(http://fotobg.ru/upload/img1350206713.jpg) 46%;}
#main-content .main .main-content.chatbox.clearfix {border-radius: 11px;}
object[data="/chatbox/index.forum?page=front&"] {border-radius: 11px;}
#chatbox_header {border-top-left-radius: 11px;border-top-right-radius: 11px;}
.chatbox {border-radius: 11px;}
--------------CHAT---------------------
#chatbox_header {
background: url(http://i45.tinypic.com/zocg7a.png);
}
#chatbox_footer {
background: url(http://i1099.photobucket.com/albums/g393/Daisuke_131/333333_zps628d065e.png);
}
#chatbox_members {
background: #62c581;
}
#chatbox_members .member-title {
background-color: #05a663;
background-image: none;
box-shadow: white 1px 0 20px 1px;
color: #704A4A;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
padding: .5em .25em;
text-align: center;
}
.chatbox_row_2 {
background-color: white;
padding: 4px;
}
.chatbox_row_1 {
background-color: white;
padding: 4px;
}
#chatbox {
bottom: 30px;
left: 181px;
line-height: 10px;
overflow: auto;
position: absolute;
right: 0;
top: 30px;
box-shadow: 1px 1px 30px 1px;
}
#frame_chatbox {
border-radius: 30px;
box-shadow: black 0 0 30px 3px black;
}
#chatbox {
background: #fff;
}
.date-and-time {
display: none;
}
#chatbox_main_options {
z-index: 50;
position: relative;
}
---------------------CHAT-----------------
Imagem do meu problema:
Endereço do meu fórum:
http://digimonxrosgamerpg.forumeiros.com
Versão do meu fórum:
PUNBB