Este tutorial es para usuarios avanzados que sepan como editar html y mas aun css y todavia mas css3.
Empezamos.
Vamos a
ACP -> Plantillas y Estilos -> Plantillas -> TU TEMA Plantillas -> Header Plantilla -> header
Coloca esto asta el final de la plantilla:
Código:
<style type="text/css">
.bubble {
clear: both;
margin: 0px auto;
width: auto;
position: relative;
z-index: 90;
}
.rectangle {
background: #d00;
height: 30px;
width: 500px;
position: relative;
left:-35px;
top: 0px;
float: left;
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.40);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
}
.rectangle h2 {
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
font-style: italic;
font-weight: normal;
font-size: 25px;
color: #fff;
margin: 0;
margin-top: 0;
padding: 0;
outline: 0;
vertical-align: middle;
font-family: Georgia, Verdana, Lucida Sans Unicode, sans-serif;
}
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -50px;
top: 15px;
z-index: -1;
}
</style>
<div class="bubble">
<div class="rectangle"><h2>CSS3 Ribbon</h2></div>
<div class="triangle-l"></div>
</div>
<br/>
Bueno la razon por la que este tuto es para avanzados, a mi parecer, es por que el codigo no cuadra en todos los temas, este que les pase esta listo para el tema default de mybb pero tube que cambia el width de 85% a 90%.
Para temas con anchura definida creo que seria mas fácil colocarlo de manera que cruce toda la pagina como en vbulletin, pero para temas felxibles seria mas complicado.
Bueno el ejemplo:
[attachment=931]
Cualquier comentario bienvenido sea :thumbsup: