Efeito no Avatar

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Moderador
Navegador usado : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Outro
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://hogwartsisalive.forumeiros.com/t337-duvidas-e-criticas

Descrição do problema

Gostaria de que ocorresse este efeito no avatar dos usuários na postagem >> http://coven.forumeiros.com/t3-who-got-the-power <<

Saudações!

Adicione no inicio da tua CSS este código(CPainel >> Visualização >> Imagens e Cores > Cores >>> Folha de estilo CSS):

Código:

.post .postprofile dl:hover dt a img {
left: -350px;
}
.postprofile dl dt a img {
-moz-transition: ease-in-out .8s;
-ms-transition: ease-in-out .8s;
-webkit-transition: ease-in-out .8s;
height: 320px!important;
left: 0;
position: absolute;
top: 5px;
transition-duration: 1s;
width: 200px!important;
}
.postprofile dt a img {
margin-left: 0;
margin-top: -5px;
max-width: 200px;
}
.postprofile {
background-color: #000;
border: 3px double #f5f5f5;
color: #fff;
display: block;
font-family: calibri;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 320px;
margin-top: -1px;
overflow: hidden;
position: relative;
text-align: center;
text-transform: uppercase;
width: 200px;
}

Salve!

Até!

Funcionou, agradeço bastante. Entretanto, algumas coisas como o nome do personagem ficaram sobre o avatar, além da borda meio estranha.

Amigo, qual o endereço real do teu fórum? Este que colocou como endereço, além de não ser o fórum que adicionou, tem imagens um tanto obscenas.
Me passe o endereço real para que eu possa concertar estes erros e se não quiser a borda, posso retirar, sem problema algum.

Este é o endereço real sem nenhuma pessoa com impurezas eu acho >> http://hogwartsisalive.forumeiros.com/

Mande-me a tua CSS por gentileza!

Mandei por MP ^^

Amigo, é necessário mandar a CSS no próprio tópico, pois na MP fica meio sem sentido, pois já estamos lidando da situação aqui no tópico.

Eu tentei porém apareceu isto "A largura da sua mensagem ultrapassa o limite autorizado."

Certo! Peço que substitua o seguinte código pela tua CSS inteira:

Código:

#tablon{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;height:404px;left:210px;margin-bottom:400px;opacity:0;overflow:hidden;position:absolute;top:6px;transition:all 1s ease;width:960px}#tablon:hover{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;opacity:1;transition:all 1s ease}#tabl{left:-10px;position:relative;top:8px}#comments_scroll_div{background-color:#19151c;font-family:"open sans condensed";font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;left:33px;letter-spacing:2px;padding:10px;position:relative;text-transform:uppercase;width:125px}#left .h3{visibility:hidden}.inficha{background-color:#69595d;color:#fff;font-family:calibri;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;line-height:100%;overflow:hidden;padding:20px;text-align:justify;width:410px}.infnome{background:#19151c;color:#fff;font-family:"open sans condensed";font-size:25px;font-style:normal;font-variant:normal;font-weight:normal;padding:20px 0;text-align:center;text-transform:uppercase;width:450px}.infoto{border:20px solid #19151c;border-radius:100%;height:155px;overflow:hidden;width:155px}.infooc{background:#69595d;color:#fff;font-family:arial;font-size:8px;font-style:normal;font-variant:normal;font-weight:normal;height:105px;letter-spacing:1px;line-height:100%;margin-left:15px;margin-top:5px;opacity:.8;overflow:hidden;padding:35px 30px 15px;text-align:justify;text-transform:lowercase;width:185px}.infoocttl{color:#19151c;font-family:"lucida console";font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;text-align:center;text-transform:uppercase}
#silver {width: 250px; height: 350px; position: relative; overflow: hidden; }

#silver .bitter { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; top: 0px; bottom: 0px; width: 250px; height: 280px;}

#silver:hover .bitter {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; top: -280px;}

#silver .sweet { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; right: 0px; bottom: 0px; width: 250px; height: 70px;}

#silver:hover .sweet {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; bottom: -70px;}

.silverscroll::-webkit-scrollbar { height: 5px; width:2px; backgrounAd: #797083;}  
.silverscroll::-webkit-scrollbar-thumb { background: #797083; width:2px; height:5px; }
/*Code, Spoiler y Quote*/
 .headerbar {
  background-image:url('http://i.imgur.com/ZzEhBBJ.png');
  background-repeat: no-repeat;
  width: 1000px;
  height: 450px;
  margin-top: -15px;
  margin-left: -5px;
}

dl.codebox {
background-color: transparent;
border-left: 10px solid transparent;
border-top:none;
border-right: none;
border-bottom: none;
padding:5px;
}


dl.codebox dt {
display:block;
font-size:0.8em;
font-weight:700;
color:#8F8C8C;
text-align: center;
margin-bottom:3px;
text-transform:uppercase;
border-bottom:none;}

dl.codebox code {
color:#8F8C8C;
text-shadow:1px 1px 1px 141414;
font-size:11px;
border-bottom:none;
}


blockquote {
background-color: transparent;
background: url("url de la imagen")
border-left: 10px solid #ffffff;
border-top:none;
border-right: none;
border-bottom: none;
padding:5px;
}

blockquote blockquote {
background-color: transparent;
background: url("url de la imagen")
border-left: 10px solid transparent;
border-top:none;
border-right: none;
border-bottom: none;
padding: 5px;
}

.content blockquote {
color:transparent;
text-shadow:1px 1px 1px 141414;
font-size:11px;
border-bottom: none;
}
#page-body p.page-bottom {
background: none repeat scroll center center #000000;
border-bottom: medium none;
display: inline-block;
font-size: 8px;
margin-left: 4px;
padding: 5px;
padding-top: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0px;
max-height: 30px;
min-height: 30px;
width: 260px;
float: left;
}

p.right {
  padding-right: 25px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
}
#page-body ul.linklist {
  padding-right: 25px;
}
#page-body ul.linklist a {
  padding-left: 10px;
  padding-right: 10px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
}

a.nav {
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
}

.pagination {
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  padding-right: 25px;
}

.module .h3 {
visibility:hidden;
}

#logo {
margin-left: -25px;
margin-top: -30px;
  
}

#wrap {
max-width: 1000px;
min-width: 1000px;
padding-left: 8px;
padding-right: 8px;
margin-bottom: -25px;
box-shadow: 2px 3px 4px #000000;
}

.button, .button1, .button2, input.button, input.button1, input.button2, button.bbcode, #submit_button, #profile-advanced-button, #login_popup_buttons, #login_popup_buttons input, .liteoption {
background:#000000;
  color: #787878;
  display: inline-block;
  outline: medium none;
  padding:5px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  border: 1px outset #787878;
}

.button:hover, .button1:hover, .button2:hover, input.button:hover, input.button1:hover, input.button2:hover, button.bbcode:hover, #submit_button:hover, #profile-advanced-button:hover, #login_popup_buttons:hover, #login_popup_buttons input:hover, .liteoption:hover {
background: #000000;
  color: #787878;
  display: inline-block;
  outline: medium none;
  padding:5px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  border: 1px outset #787878;
}

/****BARRA MENU****/

ul.navlinks {
border-bottom: none;
background-image:url("http://i.imgur.com/MBhMBmR.png?1");
display: block;
width: 1239px;
height: 58px;
padding-top: 20px;
margin-left: -130px;
margin-top: -19px;
}

/****LINKS MENU****/

a.mainmenu {
color: #ababab;
font-family: Economica;
text-transform: uppercase;
font-size: 15px;
font-weight: lighter;
margin: -5px;
margin-left: 0px;
margin-right: 0px;
padding: 1px;
}

a.mainmenu:hover {
color: #ababab;
-moz-transition: all 0.8s linear 0s;
-webkit-transition: all 0.8s linear 0s;
}

/****BOTONES REMOVIDOS DE LA BARRA MENU****/

#search-box {
  display: none;
}


#page-footer .navbar {
font-size: 0px;
}

.user_login_form {
  display: none;
}

.signature_div img {
  max-height: 500px;
  max-width: 300px;
}
#cp-main .panel.sig {
  background: transparent;
}
.inputbox{
  border-color: transparent !important;
}

#page-footer a[href="/statistics"] {
display: none;
}
/****ICONOS LEYENDA****/

ul.forums .icon {
background-position: 25px 55% !important;
}

.basetexto {
  background: #000000;
  width: 380px;
  height: 90px;
  padding: 20px;
  margin-top: -10px;
  margin-left: 35px;
  font-size: 13px;
  text-align: justify;
  line-height: 100%;
}

.posimenu {
  margin-left: 4px;
  height: 120px;
  margin-top: -16px;
}

.menu5 a {
  display: block;
  width: 140px;
  background: #363636;
  text-align: center;
  line-height: 100%;
  color: #ababab;
  font-size: 8px;
  margin-bottom: 2px;
  text-transform: uppercase;
  padding-top: 3px;
  padding-bottom: 3px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.5s ease-in-out;
}

.menu5 a:hover {
  box-shadow: inset 140px 0 0 #687D8E;
}
/****TITULO CABECERA CATEGORIA****/

.table-title h2 {
font-weight: bold;
color: #fefefe;
letter-spacing: 3px;
font-size: 12px;
text-transform: uppercase;
font-family: calibri;
}

#main-content {
margin-left: 30px;
}


/****FONDO CABECERA CATEGORIA****/

.forabg li.header {
width: 854px;
height: 60px;
padding-top: 15px;
padding-bottom: 10px;
background-color: #000000;
font-size: 0px;
}

.forabg li.header dd.dterm {
text-align: center;
width: 100%;
height: 10px;
padding-top: 35px;
padding-bottom: 35px;
margin-top: -10px;
}

.forabg ul.topiclist.forums li.row dd.dterm {
  width: 500px;
  height: 192px;
}

.forabg {
padding: 0px;
}

ul.forums {
width: 97%;
background-color: #0a0a0a;
padding-bottom: 20px;
padding-top: 20px;
}

ul.topiclist.topics.bg_none {
 background: #0a0a0a;
  width: 97%;
  padding-bottom: 20px;
}

ul.topiclist.pmlist.bg_none {
  background: #0a0a0a;
  width: 97%;
  padding-bottom: 20px;
}  
/****POST, MENSAJES Y ULTIMOS TEMAS****/

.forabg dd.posts {
background-color: #000;
position:relative;
margin-left:10px;
margin-top: 23px;
width:82px;
height:14px;
font-size:9px;
text-transform: uppercase;
padding-top: -3px;
padding-bottom:2px;
 padding: 3px;
}

.forabg dd.topics {
background-color: #000;
position:relative;
margin-left:110px;
margin-top: 23px;
width:82px;
height:14px;
font-size:9px;
text-transform: uppercase;
padding-top: -3px;
padding-bottom: 2px;
 padding: 3px;
}

.forabg li.header dd.lastpost {
background-color: transparent;
color: transparent;
height:0px;
padding-top: 0px;
display:none;
}

.forabg li.header dd.posts {
display:none;}

.forabg li.header dd.topics {
display:none;
}

.forabg li.row dd.posts:after {
content: "posts";
}

.forabg li.row dd.topics:after {
content: "topics";
}

dd.lastpost {
 background: #141414;
  width:193px;
height:70px;
 border: 10px solid #171717;
 text-align: center!important;
 margin-left: 110px;
 font-family:"open sans condensed";!important;
 font-size:12px;
}


dd.lastpost span.color-groups {/*marca el autor del post*/
 background-color: transparent;
 width: 200px;
float: center;
padding-left: 0px;
       padding-top:0px;
 font-size: 15px;
font-family:"open sans condensed";
  text-transform: uppercase;
 text-align: center;
}

/****SUB CATEGORIAS****/

.forumbg .header .icon {
width: 85%;
height: 50px;
text-align: right;
font-size: 10px;
text-transform: uppercase;
padding-top: 30px;
color: #504F52;
background-color: #000000;
border-right: 102px solid #000000;
}

ul.topiclist li.header dd.views, ul.topiclist li.header dd.posts, ul.topiclist li.header dd.lastpost {
font-size: 0px;
}

/****LINKS DEL FORO****/

a.forumtitle {
display: block;
width: 545px;
padding-top: 10px;
padding-left: 20px;
font-size: 20px;
color: #504F52;
position: relative;
margin-left: 35px;
text-align: left;
font-weight: 700;
text-transform: uppercase;
font-family: Voltaire;
text-align: center;
}

a.forumtitle:hover {
text-decoration: none;
-moz-transition: all 0.6s linear 0s;
-webkit-transition: all 0.6s linear 0s;
}

/****LINKS SUBFOROS****/

a.topictitle:hover{
text-decoration: none;
color: #9D99A3;
text-shadow: 1px 2px 1px #000000;
letter-spacing: 1px;
-moz-transition: all 0.6s linear 0s;
-webkit-transition: all 0.6s linear 0s;
}

/****TITULOS, LINKS SUBFOROS Y BUSCAR****/

h1.page-title {
width: 842px;
height: 10px;
padding-top: 35px;
padding-bottom: 45px;
font-family: calibri;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #353535;
text-align: center;
background-color: #000000;
}

#cp-main h1 {
  padding-top: 15px;
}

.topic-actions {
color: #343434;
font-size: 12px;
text-align: center;
font-family: calibri;
}

.search-box {
visibility: hidden;
}
  
/****CAJA DEL MENSAJE****/

div.post {
width: 94%;
background-color: #0a0a0a;
padding-top: 15px;
}

.post {
  font-size: 11px;
}
.postbody .content {
  width: 560px;
  padding: 5px;
  text-align: justify;
  right: -39px;
  position: relative;
}
/****TITULO, AUTOR E ICONOS****/
.postbody .topic-title {
font-size: 13px;
font-family: calibri;
margin-left: 60px;
right: -39px;
position: relative;
}

p.author {
border-bottom: 4px solid transparent;
width: 560px;
height: 15px;
margin-top: -1px;
right: -39px;
position: relative;
}

ul.profile-icons {
margin-top: 9px;
right: -39px;
position: relative;
}

/****PERFIL****/

.postprofile {
width: 196px;
margin-top: -0px;
margin-left: 0px;
text-align: center;
padding: 0px;
background-color: #000000;
}
span.content {
  background: #ffffff;
}
.postprofile dt a img {
  max-width: 200px;
  max-height: 400px;
  margin-left: -10px;
  margin-top: -15px;
}


.postprofile dt strong a {
text-transform: uppercase;
font-family: Economica;
font-size: 15px;
font-weight: lighter;
position: relative;
bottom: 0px;
}

.postprofile dd {
color: #ababab;
font-size: 10px;
font-family: calibri;
text-transform: uppercase;
text-align: justify;
padding-left: -17px;
}

.postprofile dd a:hover img {
opacity: 1;
}
.postprofile dd a img {
opacity: 0.5;
}

/****MODULOS/WIDGETS****/

.module .h3 {
visibility: hidden;
}

.module {
background-color: #0a0a0a;
}

#left {
display:none;
}

#comments_scroll_container {
width: 200px;
padding: 2px;
font-family: calibri;
background-color: #252525;
border-top: 4px solid #818181;
margin-top: -35px;
}

/****ONLINE****/

.#stats {
width: 100%;
margin: 0 auto;
height: 350px;
}

#stats .estadisc {
  margin-top: 20px;
  margin-left: 10px;
}

#stats .enlinea {
  overflow-y: auto;
  text-align: left;
  display: inline-block;
  width: 300px;
  height: 220px;
  background: #0a0a0a;
  border-top: 20px solid #000000;
  border-bottom: 20px solid #000000;
  padding: 10px;
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 13px;
  font-size: 10px;
  float: left;
}

#stats .grupos {
  overflow-y: auto;
  text-align: left;
  display: inline-block;
  width: 160px;
  height: 220px;
  background: #0a0a0a;
  border-top: 20px solid #000000;
  border-bottom: 20px solid #000000;
  padding: 10px;
  margin-top: 40px;
  margin-left: -10px;
  margin-right: 13px;
  font-size: 10px;
  float: left;
}

#stats .afiliados {
  overflow-y: auto;
  display: inline-block;
  width: 300px;
  height: 220px;
  background:url("http://i.imgur.com/xTlr9ge.png");
  border-top: 20px solid #000000;
  border-bottom: 20px solid #000000;
  padding: 10px;
  margin-top: 40px;
  margin-left: -10px;
  margin-right: 13px;
}

.enlinea #i_whosonline {
width: 0px;
}
p em {
  display: none;
}

.enlinea .h3 {
display: none;
}


.estadisc .h3 {
  font-size: 0px;
}

/****CABECERA CHATBOX****/

div.page-bottom, #chatbox_popup, .h3 a[target="ChatBox"]{
display: none;
}

p.page-bottom + div.h3{
border: none;
}

/****LEYENDA****/

ul#picture_legend {
display: none;
}


/****SCROLL****/

::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
display: none;
}

::-webkit-scrollbar{
width: 3px;
height: 5px;
}

::-webkit-scrollbar-track-piece {
background-color: #504F52;
}

::-webkit-scrollbar-thumb:vertical {
width: 3px;
height: 5px;
background-color: #000000;
}

/****FONTS SKIN****/

@font-face {
font-family: 'Trade Winds';
font-style: normal;
font-weight: 400;
src: local('Trade Winds'), local('TradeWinds'), url(http://themes.googleusercontent.com/static/fonts/tradewinds/v2/P7L1H4TWVDNJivDGg_--QIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
font-family: 'Andika';
font-style: normal;
font-weight: 400;
src: local('Andika'), url(http://themes.googleusercontent.com/static/fonts/andika/v3/7oCWhqd1EPSqB7_cG3_eAA.woff) format('woff');
}

@font-face {
font-family: 'Denk One';
font-style: normal;
font-weight: 400;
src: local('Denk One'), local('DenkOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/denkone/v1/ahLepySZXU_KFQaVZ6XDvPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

@font-face {
font-family: 'Neucha';
font-style: normal;
font-weight: 400;
src: local('Neucha'), url(http://themes.googleusercontent.com/static/fonts/neucha/v4/Z14xx5NkAnXABtaPytVZVA.woff) format('woff');
}

@font-face {
  font-family: 'Economica';
  font-style: normal;
  font-weight: 400;
  src: local('Economica'), local('Economica-Regular'), url(http://themes.googleusercontent.com/static/fonts/economica/v1/jObgDQiPUtmACAaaK3pMGz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Economica';
  font-style: normal;
  font-weight: 700;
  src: local('Economica Bold'), local('Economica-Bold'), url(http://themes.googleusercontent.com/static/fonts/economica/v1/UK4l2VEpwjv3gdcwbwXE9HhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

#login_popup_background{
background-color:transparent;border: 0px;border-style: none;
}

#login_popup_background .box-content {
background-color:transparent;border: 0px;border-style: none;
}

#login_popup_title{
visibility:hidden;background-color:transparent;border: 0px;border-style: none;
}

#login_popup_content{
background-color:transparent;border: 0px;border-style: none;
}
#login_popup{
background-color:transparent;border: 0px;border-style: none;
}

#login_popup_buttons{
visibility:hidden;
}


/*Efecto para los afiliados*/

#directorio img {
  width: 100px;
  height: 50px;
  margin: 2px;
  opacity: 0.8;
}

#elite img {
  width: 150px;
  height: 60px;
  margin: 2px;
  opacity: 0.8;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}


.colorpicker {
   width: 356px;
   height: 176px;
   overflow: hidden;
   position: absolute;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/light11.png) !important;
   font-family: Arial, Helvetica;
   display: none;
   padding: 0 !important;    
}
.colorpicker.dark{
 background: url(http://i83.servimg.com/u/f83/17/45/19/77/dark11.png) !important;
}
.colorpicker_color {
   width: 150px;
   height: 150px;
   left: 14px;
   top: 13px;
   position: absolute;
   background: #f00;
   overflow: hidden;
   cursor: crosshair;
}
.colorpicker_color div {
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   height: 150px;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.png);
}
.colorpicker_color div div {
   position: absolute;
   top: 0;
   left: 0;
   width: 11px;
   height: 11px;
   overflow: hidden;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.gif);
   margin: -5px 0 0 -5px;
}
.colorpicker_hue {
   position: absolute;
   top: 13px;
   left: 171px;
   width: 35px;
   height: 150px;
   cursor: n-resize;
}
.colorpicker_hue div {
   position: absolute;
   width: 35px;
   height: 9px;
   overflow: hidden;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.gif) left top;
   margin: -4px 0 0 0;
   left: 0px;
}
.colorpicker_new_color {
   position: absolute;
   width: 60px;
   height: 30px;
   left: 213px;
   top: 13px;
   background: #f00;
}
.colorpicker_current_color {
   position: absolute;
   width: 60px;
   height: 30px;
   left: 283px;
   top: 13px;
   background: #f00;
}
.colorpicker input {
   background-color: transparent;
   border: 1px solid transparent;
   position: absolute;
   font-size: 10px;
   font-family: Arial, Helvetica;
   color: #898989;
   top: 4px;
   right: 11px;
   text-align: right;
   margin: 0;
   padding: 0 !important;
   height: 11px;
}
.colorpicker_hex {
   position: absolute;
   width: 72px;
   height: 22px;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/custom11.png) top;
   left: 212px;
   top: 142px;
}
.colorpicker.dark .colorpicker_hex {
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.png) top;
}
.colorpicker_hex input {
   right: 6px;
}
.colorpicker_field {
   height: 22px;
   width: 62px;
   background-position: top;
   position: absolute;
}
.colorpicker_field span {
   position: absolute;
   width: 12px;
   height: 22px;
   overflow: hidden;
   top: 0;
   right: 0;
   cursor: n-resize;
}
.colorpicker_rgb_r {
   background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom12.png);
   top: 52px;
   left: 212px;
}
.colorpicker.dark .colorpicker_rgb_r{
 background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp12.png);
}
.colorpicker_rgb_g {
   background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom13.png);
   top: 82px;
   left: 212px;
}
.colorpicker.dark .colorpicker_rgb_g {
 background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp13.png);
}
.colorpicker_rgb_b {
   background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom14.png);
   top: 112px;
   left: 212px;
}
.colorpicker.dark .colorpicker_rgb_b {
 background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp14.png);
}
.colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b {
 display: none;
}
.colorpicker_submit {
 position: absolute;
    background: url("http://i83.servimg.com/u/f83/17/45/19/77/accept10.png") no-repeat;
    cursor: pointer;
    right: 10px;
 width: 48px;
 height: 50px;
    top: 118px;  
 overflow: hidden;
}
.colorpicker_focus {
   background-position: center;
}
.colorpicker_hex.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_slider {
   background-position: bottom;
}
.colorpicker { z-index: 3; }
#chatbox_ret_cont{
 z-index: 999;
 background-color: transparent;
 position: fixed;
 bottom: 0;
}
#chatbox_ret_cont.chatbox_derecha{
 right: 0;
}
#chatbox_ret_cont.chatbox_izquierda{
 left: 0;
}
#chatbox_ret_cont div{
 cursor: pointer;
}
#chatbox_ret_cont iframe#chatbox_ret{
 background-color: white;
 display: none;
 height: 350px;
 margin-bottom: 0;
 width: 800px;
}
.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: #9D99A3;
}
#chatbox_header{background-color: #000000;}
#chatbox_footer{background-color: #000000;}
.chatbox-title, .chatbox-title a.chat-title {font-size: 0px;}
  
.grupo1 {text-align: center; background: #692DAD; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo2 {text-align: center; background: #3A527A; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo3 {text-align: center; background: #7A0616; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo4 {text-align: center; background: #5200B0; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo5 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo6 {text-align: center; background: #FF5100; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo7 {text-align: center; background: #F7840A; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo8 {text-align: center; background: #800006; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo9 {text-align: center; background: #1E7800; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo10 {text-align: center; background: #FFB700; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo11 {text-align: center; background: #003591; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo12 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo13 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo14 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo15 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo16 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo17 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo18 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo19 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo20 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo21 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo22 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo23 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo24 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo25 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo26 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo27 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo28 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo29 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo30 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo31 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo32 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo33 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
.grupo34 {text-align: center; background: #5e1639; width: 160px; margin-bottom: 3px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}

.grupo6 {text-align: center; background: #9c911d; width: 160px; line-height: 100%; color: #000000; padding-top: 20px; padding-bottom: 20px; font-size: 9px; text-transform: uppercase; font-weight: 700;}
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin Regular'), local('Cabin-Regular'), url(http://fonts.gstatic.com/s/cabin/v7/YW3SmFCeLOkefBVkMNxbtw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 500;
  src: local('Cabin Medium'), local('Cabin-Medium'), url(http://fonts.gstatic.com/s/cabin/v7/XHvvZj_uvRvYentxl9M1VhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 600;
  src: local('Cabin SemiBold'), local('Cabin-SemiBold'), url(http://fonts.gstatic.com/s/cabin/v7/pOvYyCQeTTtw6RxdlpulShTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 700;
  src: local('Cabin Bold'), local('Cabin-Bold'), url(http://fonts.gstatic.com/s/cabin/v7/82B-3YlzWJm8zbCrVEmc_hTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: italic;
  font-weight: 400;
  src: local('Cabin Italic'), local('Cabin-Italic'), url(http://fonts.gstatic.com/s/cabin/v7/6rRVd2AaRJ0MqBftQKms6vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.bons { width:200px; height: 100px; background-color: white; border: 1px solid #D3D4C4; font: 11px arial; font-style: italic; letter-spacing: 1px; line-height: 100%; text-align: center; text-transform: lowercase; position:relative; top: 25px; }
.ivers { width: 200px; height: 100px; background-color: white; color: #222; font: 10px arial; line-height: 120%; overflow:auto; position: relative; top: -76px; opacity: 0; text-transform: lowercase; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all.8s ease-in-out; }
.ivers:hover { position: relative; top: -76px; opacity: 1; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all.8s ease-in-out; }
xo { color: #5c9ab4; font-style: italic; font-weight: bold; }
.btitle { width: 300px; font-family: 'Roboto Condensed'; font-size: 40px; text-transform: uppercase; line-height: 100%; letter-spacing: 1px; font-weight: lighter; text-align: center; border-bottom: 2px solid #222; color: #222 }
.bsite { width: 300px; font-family: arial; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; letter-spacing: 6px; color: #222; padding-top: 5px; }
.bgender { width: 230px; font-family: 'Roboto Condensed'; font-size: 20px; text-transform: uppercase; line-height: 100%; letter-spacing: 1px; font-weight: lighter; text-align: center; border-bottom: 1px solid #222; color: #222; padding-bottom: 2px; }
.btext1 a { width: 255px; font-family: arial; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; letter-spacing: 3px; color: #222; }
.btext1 { width: 260px; padding: 20px; background-color: #fcfcfc; color: #333; line-height: 100%; text-align: justify; font-family: arial; font-size: 9px; height: 100px; }
.btext2 { width: 260px; padding: 20px; background-color: #fcfcfc; color: #333; line-height: 100%; text-align: justify; font-family: arial; font-size: 9px; }
.bapps::-webkit-scrollbar { width: 5px; background-color: transparent; }
.bapps::-webkit-scrollbar-track { background-color: transparent; }
.bapps::-webkit-scrollbar-thumb { background-color: #f1f1f1 }
/* you can change the colour of the lyrics background, bold, and scrollbar -- they should all match so it doesn't look weird, though. */
.Shirtsleeves2 {
background: #8008c5;
}
.UnderYourEyes b, .UnderYourEyes i {
color: #CF303C;
}
.custom::-webkit-scrollbar {
background: #8008c5;
}
.custom::-webkit-scrollbar-thumb {
background: #8008c5;
}

#herald { background-image: url(http://i.imgur.com/toa8t9n.png); width: 550px; height: 430px; overflow: auto; }
.heraldbig { text-align: center; width: 500px; padding-top: 10px; padding-bottom: 10px; font-size: 40px; line-height: 25px; letter-spacing: 2px; font-family: josefin slab; color: #000; border-bottom: 3px solid #000; }
.heraldtitle { font-family: economica; font-size: 35px; text-align: left; width: 500%; color: #000; border-bottom: 1px solid #000; letter-spacing: -1px; line-height: 35px; }
.heraldsub { font-family: vidaloka; font-size: 13px; line-height: 12px; font-style: italic; letter-spacing: 2px; text-align: left; padding-top: 2px; }
.heraldmain { text-align: justify; -moz-column-count:3; -webkit-column-count:3; column-count:3; color: #000; -moz-column-gap:8px; -webkit-column-gap:8px; column-gap:8px;  -moz-column-rule:1px outset #fff; -webkit-column-rule:1px outset #fff; column-rule:1px outset #fff; font-family: tahoma; font-size: 9px; line-height: 10px; width: 500px; height: 200px; overflow: auto; letter-spacing:0px; padding: 0px; }
.heraldmain::-webkit-scrollbar { background: #DBD7EF; width: 3px; height: 4px; }
.heraldmain::-webkit-scrollbar-thumb { background: #777777; width: 3px; height: 4px; }
.heraldmain::-webkit-scrollbar-corner { background: #DBD7EF; }

/* this is for the credit, pls don't remove it xo */
.wyattmustcred a:link, .wyattmustcred a:active, .wyattmustcred a:visited, .wyattmustcred a:hover { border-bottom: 1px solid #404040; border-top: 1px solid #404040; color: #404040; display: block; font: bold italic 10px/100% georgia; letter-spacing: 1px; margin-top: 8px; padding: 5px; text-align: center; text-transform: lowercase; width: 75px; }

/**** EFEITO NO AVATAR****/
.post .postprofile dl:hover dt a img {
right: -350px;
}
.postprofile dl dt a img {
-moz-transition: ease-in-out .8s;
-ms-transition: ease-in-out .8s;
-webkit-transition: ease-in-out .8s;
max-height: 400px!important;
right: 0;
position: absolute;
top: 5px;
transition-duration: 1s;
width: 200px!important;
z-index: 1;
}
.postprofile dt a img {
margin-left: 0;
margin-top: -5px;
max-width: 200px;
}
.postprofile {
background-color: #000;
border: 3px double #f5f5f5;
color: #fff;
display: block;
font-family: calibri;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 320px;
margin-top: -1px;
overflow: hidden;
position: relative;
text-align: center;
text-transform: uppercase;
width: 200px;
}

Esse pequeno erro ocorreu pelo fato de você não ter colocado o código entre as tag:

Código:

[code][/code]

Até!

Obrigado, agora esta funcionando ^^