Barra Ribbon con CSS3
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 Estilo...

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:
<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:
{SIGNATURE_IMAGE}
Archivos Adjuntos

Me haz dado una idea
Eso lo haría para los thead Smile, veré que puedo hacer y pondré el tutorial si lo consigo también ps 77.
Muy bueno se parece mucho al menu de comuvir si lo agrandas n.n
no sirve para el theme mio >&
(24 Apr, 2011, 4:41 pm)steb94 escribió: no sirve para el theme mio >&
Buen, como dije cada foro es diferente y se tiene que modificar para que ajuste, básicamente era una ida que compartí, si de verdad te interesa pasa tu web haber si le encuentro la forma.

{SIGNATURE_IMAGE}
Una pregunta alarge la baraa, y ahora como puedo hacer para que sep onga ese efecto "3D" que tiene cuando empieza la barra?
Que tema usas? Deja tu foro por favor.
{SIGNATURE_IMAGE}
Colaboradores
wasmake TheZeuS steb94 Ignnacio Gypaete
This forum uses Lukasz Tkacz MyBB addons.