Início
phpBB3 
PunBB
Invision
Preview:
CSS:
Development version:
Minified version:
HTML:
Você pode usar as mini boxes da seguinte maneira:
São várias cores disponíveis e todas podem ser vistas na imagem no inicio do tópico.
Aqui tem alguns exemplos ja prontos para uso:
Caso você queira que a box ocupe todo o espaço da linha em que ela está, basta adicionar a class "block"
Assim:
Qualquer dúvida deixe um comentário no tópico.
CSS:
Development version:
- Código:
/*
//Mini boxes CSS
//Author: Wagner Souza - waghcwb
//URL: http://jscript.forumeiros.com
//This work is free and you can modify or distribute it, just keep the original credits.
//Last update: 06/04/2014
//Version: Development
*/
.mini-box{
background: #9d9d9d;
border-left: 7px solid #6e6e6e;
color: #fff;
display: inline-block;
font-family: Verdana,sans-serif;
font-size: 13px;
margin: 2px;
padding: 7px 30px;
}
.box-green-light{
background: #71c73e;
border-color: #4f8b2b;
}
.box-classic-blue{
background: #618b9d;
border-color: #44616e;
}
.box-brown{
background: #b68b68;
border-color: #7f6149;
}
.box-red{
background: #d54848;
border-color: #953232;
}
.box-green{
background: #36a766;
border-color: #267547;
}
.box-dark-purple{
background: #6c42e5;
border-color: #4b2ea0;
}
.box-purple{
background: #a946e8;
border-color: #7631a2;
}
.box-blue{
background: #3156be;
border-color: #223c85;
}
.box-yellow{
background: #e8e64e;
border-color: #a2a136;
}
.box-light-blue{
background: #00b3ff;
border-color: #007db2;
}
.box-pink{
background: #dd56e6;
border-color: #9a3ca1;
}
.box-orange{
background: #ecad3f;
border-color: #a5792c;
}
.box-dark{
background: #646464;
border-color: #464646;
}
.block{
display: block;
}
Minified version:
- Código:
/*
//Mini boxes CSS
//Author: Wagner Souza - waghcwb
//URL: http://jscript.forumeiros.com
//This work is free and you can modify or distribute it, just keep the original credits.
//Last update: 06/04/2014
//Version: Minified
*/
.mini-box{background:#9d9d9d;border-left:7px solid #6e6e6e;color:#fff;display:inline-block;font-family:Verdana,sans-serif;font-size:13px;margin:2px;padding:7px 30px}.box-green-light{background:#71c73e;border-color:#4f8b2b}.box-classic-blue{background:#618b9d;border-color:#44616e}.box-brown{background:#b68b68;border-color:#7f6149}.box-red{background:#d54848;border-color:#953232}.box-green{background:#36a766;border-color:#267547}.box-dark-purple{background:#6c42e5;border-color:#4b2ea0}.box-purple{background:#a946e8;border-color:#7631a2}.box-blue{background:#3156be;border-color:#223c85}.box-yellow{background:#e8e64e;border-color:#a2a136}.box-light-blue{background:#00b3ff;border-color:#007db2}.box-pink{background:#dd56e6;border-color:#9a3ca1}.box-orange{background:#ecad3f;border-color:#a5792c}.box-dark{background:#646464;border-color:#464646}.block{display:block}
HTML:
Você pode usar as mini boxes da seguinte maneira:
- Código:
<div class="mini-box">Apenas uma mensagem..</div>
São várias cores disponíveis e todas podem ser vistas na imagem no inicio do tópico.
Aqui tem alguns exemplos ja prontos para uso:
- Código:
<div class="mini-box">Apenas uma mensagem..</div>
<div class="mini-box box-green-light">Apenas uma mensagem..</div>
<div class="mini-box box-classic-blue">Apenas uma mensagem..</div>
<div class="mini-box box-brown">Apenas uma mensagem..</div>
<div class="mini-box box-red">Apenas uma mensagem..</div>
<div class="mini-box box-green">Apenas uma mensagem..</div>
<div class="mini-box box-dark-purple">Apenas uma mensagem..</div>
<div class="mini-box box-purple">Apenas uma mensagem..</div>
<div class="mini-box box-blue">Apenas uma mensagem..</div>
<div class="mini-box box-yellow">Apenas uma mensagem..</div>
<div class="mini-box box-light-blue">Apenas uma mensagem..</div>
<div class="mini-box box-pink">Apenas uma mensagem..</div>
<div class="mini-box box-orange">Apenas uma mensagem..</div>
<div class="mini-box box-dark">Apenas uma mensagem..</div>
Caso você queira que a box ocupe todo o espaço da linha em que ela está, basta adicionar a class "block"
Assim:
- Código:
<div class="mini-box block">Apenas uma mensagem..</div>
Qualquer dúvida deixe um comentário no tópico.
