Omar G.   17 Apr, 2011, 7:23 am
#1
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:

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

[Imagen: signature.png]

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;
Gypaete   17 Apr, 2011, 7:53 am
#2
Me haz dado una idea
Ignnacio Ausente   17 Apr, 2011, 7:59 am
#3
Eso lo haría para los thead Smile, veré que puedo hacer y pondré el tutorial si lo consigo también ps 77.
wasmake   18 Apr, 2011, 10:26 am
#4
Muy bueno se parece mucho al menu de comuvir si lo agrandas n.n
steb94   24 Apr, 2011, 4:41 pm
#5
no sirve para el theme mio >&
Omar G.   24 Apr, 2011, 5:06 pm
#6
(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.


Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

[Imagen: signature.png]

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;
TheZeuS   22 Jul, 2011, 5:18 am
#7
Una pregunta alarge la baraa, y ahora como puedo hacer para que sep onga ese efecto "3D" que tiene cuando empieza la barra?
Omar G.   22 Jul, 2011, 6:05 am
#8
Que tema usas? Deja tu foro por favor.

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

[Imagen: signature.png]

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;
  
Powered By MyBB, © 2002-2025 MyBB Group.
Made with by Curves UI.