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]](http://img20.imageshack.us/img20/1632/barranaranja.jpg)
Verde
![[Imagen: barraverde.jpg]](http://img854.imageshack.us/img854/7803/barraverde.jpg)
Azul
![[Imagen: barraazul.jpg]](http://img217.imageshack.us/img217/9431/barraazul.jpg)
Para colocar el estilo, hay que editar el fichero global.css de tu tema por defecto y añadir el siguiente código...
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
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
lo puedes cambiar por
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;
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
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;
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
(y dudas¿?)
En lo personal las barras no son mucho de mi agrado ya que siempre están visibles, pero son muy buenas
+Rep
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
(y dudas¿?)En lo personal las barras no son mucho de mi agrado ya que siempre están visibles, pero son muy buenas
+Rep
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.
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.