Novas Boxes 02.07.13 9:51
Bom galera, eu visitei o site da Web Gallery e vi essas boxes divas e vim edita-las pra vocs, pq eles lá usam o títlo como uma imagem única, então tive um trabalho pra passar tudo pro css. '-'
Demonstração: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Como utilizar
Vá no CSS principal do seu layout CMS (se for cms habbo convencional é em web-gallery/v2/styles/style.css) e cole o seguinte código lá em último:
Feito isso vai na sua página html/php onde queira utilizar a box e coloque o código onde quer que apareça:
E edite o "corempt" para cor em português.
Exemplo: amarelo,vermelho,roxo,rosa,verde,cinza,laranja.
Créditos: Web Gallery e WictorP
Se gostaram da um + :D
Demonstração: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Como utilizar
Vá no CSS principal do seu layout CMS (se for cms habbo convencional é em web-gallery/v2/styles/style.css) e cole o seguinte código lá em último:
- Código:
.corpo {
width: 291px;
background: #fff;
height: auto;
min-height: 47px;
border-bottom: 2px rgb(170, 170, 170) solid;
border-radius: 4px;
border-top: 1px rgb(170, 170, 170) solid;
border-left: 1px rgb(170, 170, 170) solid;
border-right: 1px rgb(170, 170, 170) solid;
padding-top: 7px;
}
.corpotexto {
font-family: Verdana;
font-size: 10px;
color: #999;
padding-left: 8px;
padding-top: 5px;
width: 279px;
height: auto;
padding-bottom: 11px;
}
.topo-header {
height: 36px;
margin: auto;
width: 279px;
}
.topo-header .azul {
background-image: url(http://i.imgur.com/lwnJGcm.png);
color: #fff;
text-shadow: 2px 0px 0px #2387a8,0px 1px 0px #2387a8,-1px 0px 0px #2387a8,0px -1px 0px #2387a8;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .laranja {
background-image: url(http://i.imgur.com/kZdYSo3.png);
color: #fff;
text-shadow: 2px 0px 0px #f97609,0px 1px 0px #f97609,-1px 0px 0px #f97609,0px -1px 0px #f97609;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .amarelo {
background-image: url(http://i.imgur.com/Y3uAFsO.png);
color: #fff;
text-shadow: 2px 0px 0px #d1a710,0px 1px 0px #d1a710,-1px 0px 0px #d1a710,0px -1px 0px #d1a710;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .verde {
background-image: url(http://i.imgur.com/6dKm44q.png);
color: #fff;
text-shadow: 2px 0px 0px #629d27,0px 1px 0px #629d27,-1px 0px 0px #629d27,0px -1px 0px #629d27;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .roxo {
background-image: url(http://i.imgur.com/b2yauD7.png);
color: #fff;
text-shadow: 2px 0px 0px #8d2ecd,0px 1px 0px #8d2ecd,-1px 0px 0px #8d2ecd,0px -1px 0px #8d2ecd;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .vermelho {
background-image: url(http://i.imgur.com/SNGNhu7.png);
color: #fff;
text-shadow: 2px 0px 0px #a82c1b,0px 1px 0px #a82c1b,-1px 0px 0px #a82c1b,0px -1px 0px #a82c1b;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .rosa {
background-image: url(http://i.imgur.com/fPP5hzt.png);
color: #fff;
text-shadow: 2px 0px 0px #c437ad,0px 1px 0px #c437ad,-1px 0px 0px #c437ad,0px -1px 0px #c437ad;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .cinza {
background-image: url(http://i.imgur.com/rgJGZid.png);
color: #fff;
text-shadow: 2px 0px 0px #7d7d7d,0px 1px 0px #7d7d7d,-1px 0px 0px #7d7d7d,0px -1px 0px #7d7d7d;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
}
.topo-header .left {
background-position: top left;
width: 4px;
height: 34px;
float: left;
margin-top: 2px;
}
.topo-header .mid {
background-position: center right;
height: 26px;
width: auto;
margin: 0px 4px;
padding: 11px 5px 0px 5px;
}
.topo-header .right {
background-position: bottom left;
width: 6px;
height: 36px;
float: right;
margin-top: -3px;
}
Feito isso vai na sua página html/php onde queira utilizar a box e coloque o código onde quer que apareça:
- Código:
<div class="corpo">
<div class="topo-header">
<div class="left corempt"></div>
<div class="right corempt"></div>
<div class="mid corempt">
Nova Box amarelo
</div>
</div>
<div class="corpotexto">
Aqui seu conteúdo.
<br>
Tudo editável.
</div>
</div>
E edite o "corempt" para cor em português.
Exemplo: amarelo,vermelho,roxo,rosa,verde,cinza,laranja.
Créditos: Web Gallery e WictorP
Se gostaram da um + :D
Se tiverem sugestão de cores, mande o código hexadecimal da cor em seu comentário.
Exemplo: #ff0000
Exemplo: #ff0000
Keant • 02.07.13 10:15
Leonardo • 02.07.13 13:49
bielgtinho • 02.07.13 13:56
