Opción dos

De Wiki Bepe.ar

Saltar a: navegación, buscar

Lo que haremos ahora es modificar la barra superior de DigiBepé:


Barra superior digi.png


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.


Color hex.png


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 uncolor.png


Logo con barra con gradiente de color:


Logo grad color.png


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

Guardar preferencias.png


Vamos al OPAC, actualizamos la página oprimiendo la tecla F5, y vemos el resultado de la modificación:


Opac con logo y color.png



Flecha izq.png Inicio.png Flecha der.png