De Wiki Bepe.ar
Lo que haremos ahora es modificar la barra superior de DigiBepé:
y cambiar el logo predeterminado y el color original de esta barra, para ello utilizaremos la opción OPACUserCSS y el código que se ve a continuación:
.navbar-inverse .divider-vertical {border-left-color: #000000; border-right-color: #000000; }
.navbar-inverse .navbar-inner { background-image: linear-gradient(to bottom, #000000, #000000); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); }
#logo { background: transparent url("http://i68.tinypic.com/205zcye.png") no-repeat scroll 0; border: 0; float: left !important; margin: 0; padding: 80; width: 445px; }
En lugar de codificar con HTML se está usando la codificación correspondiente a hojas de estilo en casaca (Cascading Style Sheets), que permite modificar elementos gráficos, tales como colores, espacios, alineación, y otros elementos similares en el navegador.
En la primer parte del código establecemos el cambio de color de la barra, si no queremos modificar el negro original se deja como está, si por el contrario queremos modificar el color tendremos que conseguir la codificación hexadecimal del color a colocar, en la sección Herramientas web para diseño hay un enlace a Color Hex Color Codes, página web que nos facilita la codificación de cualquier color.
Una vez conseguido el color elegido con el formato "#ffde6b" necesario cambiaremos el sector de código en cuestión:
.navbar-inverse .divider-vertical {border-left-color: #000000; border-right-color: #000000; }
.navbar-inverse .navbar-inner { background-image: linear-gradient(to bottom, #000000, #000000); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); }
Ahora con el cambio quedaría:
.navbar-inverse .divider-vertical {border-left-color: #ffde6b; border-right-color: #ffde6b; }
.navbar-inverse .navbar-inner { background-image: linear-gradient(to bottom, #ffde6b, #ffde6b); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); }
El cambio se realiza, sustituyendo #000000 por #ffde6b.
Si quisieramos lograr un gradiente de color (degradado) en la sección:
.navbar-inverse .navbar-inner { background-image: linear-gradient(to bottom, #ffde6b, #ffde6b)
colocamos los dos colores a mezclar. Por ejemplo:
.navbar-inverse .navbar-inner { background-image: linear-gradient(to bottom, #383a35, #ffde6b)
Logo con barra de un solo color:
Logo con barra con gradiente de color:
Para subir el logo nuevo y reemplazar el predeterminado de DigiBepé modificamos la segunda parte del código antes mostrado:
#logo { background: transparent url("http://i68.tinypic.com/205zcye.png") no-repeat scroll 0; border: 0; float: left !important; margin: 0; padding: 0; width: 445px; }
aquí debemos colocar el enlace directo conseguido desde el servidor público (ver Servidores públicos de imágenes) la url se coloca entre las comillas dobles
url("http://i68.tinypic.com/205zcye.png")
en la sección
width: 445px;
colocamos el ancho de la barra que contendrá el logo, por ejemplo 445px, el logo tiene en este ejemplo 440x50px.
Ya modificado el código, solo resta guardar las preferencias
Vamos al OPAC, actualizamos la página oprimiendo la tecla F5, y vemos el resultado de la modificación: