Barra fija flotante top CSS

Hola, he leido varios post sobre el tema de las barras pero no encontraba las barras que yo quería, por lo que las he hecho yo y ahora las comparto.

Las barras son flotantes y fijas en el top de modo que aunque se haga scroll, siempre estará visible. Estas barras son útiles para mostrar información en todo momento. Tambien tienen un poco de transparencia y el fondo en color degradado.

Unas muestras.
Naranja
[Imagen: barranaranja.jpg]

Verde

Azul

Para colocar el estilo, hay que editar el fichero global.css de tu tema por defecto y añadir el siguiente código...

Código:
.barracentro {

    position:fixed;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 1.5ex;

    float: left;

    z-index: 10000;

    width:100%;

    height:auto;

    top: -11px;

        left:0px;

    text-align: center;

        vertical-align: middle;

        padding:3px;

    opacity:0.90;

}

.naranja{

    border:1px solid #b95f08;

    background-color:#DF6E00;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF6E00', endColorstr='#b95f08');

    background: -webkit-gradient(linear, left top, left bottom, from(#DF6E00), to(#b95f08));

    background: -moz-linear-gradient(top, #DF6E00, #b95f08);

    color: #fff;

}

.azul{

    border:1px solid #02306a;

    background-color:#23528c;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23528c', endColorstr='#02306a');

    background: -webkit-gradient(linear, left top, left bottom, from(#23528c), to(#02306a));

    background: -moz-linear-gradient(top, #23528c, #02306a);

    color: #fff;

}

.verde{

    border:1px solid #165e1d;

    background-color:#2b8433;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b8433', endColorstr='#165e1d');

    background: -webkit-gradient(linear, left top, left bottom, from(#2b8433), to(#165e1d));

    background: -moz-linear-gradient(top, #2b8433, #165e1d);

    color: #fff;

}

Una vez editada (y guardada) la hoja de estilos global.css hay que ir a las plantillas, seleccionar la plantilla que estés usando, expandir la sección cabecera - plantillas y seleccionar la plantilla header.

Una vez dentro del editor de la plantilla, escribe

Código:
<p class="barracentro azul">texto para mostrar</p>

Lo puedes colocar donde quieras, ya que el estilo CSS se encarga de ponerlo siempre arriba del todo.

Si quieres cambiar el color, donde pone

Código:
<p class="barracentro azul">texto para mostrar</p>

lo puedes cambiar por

Código:
<p class="barracentro naranja">texto para mostrar</p>

Código:
<p class="barracentro verde">texto para mostrar</p>

Creo que es todo. Si las queréis ver funcionando, puedes visitar mi foro www.bankiarroba.com
Un saludo.

ACTUALIZADO
He actualizado el código para que la anchura se adapte para contener todo el texto. Es decir, si el texto que pones ocupa varias líneas, la barra se adaptará para cubrir todas las líneas.

He cambiado height:auto; y padding: 3px;

Nada mal

, es básico pero funcional.

Gracias Ignnacio,

Si alguien quiere la barra en otro color y no sabe como añadirlo que lo diga y lo preparamos.

Primero, no entiendo por que tienes que usar top: -11px; usando position:fixed;

Segundo, deberías agregar soporte para el degradado con imágenes, recuerda que no todos los navegadores aceptan el css3 degradado.

Estos son solo consejos claro Big Grin

(y dudas¿?)

En lo personal las barras no son mucho de mi agrado ya que siempre están visibles, pero son muy buenas Smile

+Rep

{SIGNATURE_IMAGE}

Hola de nuevo,

He puesto Top:-11px porque en el tema por defecto, no ajustaba la barra al tope, y con este parámetro, lo deja justo en su sitio.

No he puesto una imagen de fondo para el degradado porque ya he puesto un color de fondo, si el navegador no soporta el degradado, mostrará el color base que coincide con el color inicial del degradado.

Estoy seguro que se puede optimizar, pero como dije al principio, es una barra que necesitaba para mi foro y digamos que la he "tuneado" a mis necesidades y la he compartido para quién la pueda aprovechar.

Un saludo.