Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
Barra Ribbon con CSS3
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:
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:
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.

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.
  
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.