Personaliser sa LibraryBox, tous le monde en a envie. On va commencer par la couleur de la barre des menus !
Observez-bien cette dernière, elle est composée d'un dégradé de couleur, clair en haut puis la couleur fonce vers le bas.
MES OUTILS
Commençons par choisir les couleurs. Je ne suis pas artiste, je repique voilà tout !
Pour faire mon choix de dégradés, j'utilise ce site http://colorschemedesigner.com/
et si j'ai besoin de repiquer des couleurs, j'utilise la boîte à couleur, un petit logiciel gratuit bien pratique.
Quoi modifier dans la LibraryBox ?
Une feuille de style, il s'agit de LibraryBox\Content\css\structure.css
Comme d'habitude, faite une copie du fichier avant toute modification.
Puis ouvrez ce fichier avec le bloc-note ou Notepad++
Rendez-vous à la ligne 23
Nous allons conserver mais masquer l'ancienne couleur par défaut.
Pour ce faire, dans une feuille de style, on met en commentaire de cette façon /* texte à masquer */
Comme ci-dessous, j'ai ajouté /* barre de navigation orange de la LibraryBox*/ pour me rappeler ce que j'ai changé.
et /*...*/ sur la dernière ligne, puis j'ai copié-collé ces 2 lignes en dessous.
Ci-dessous en vert mes ajouts, en jaune les deux couleurs à modifier : la 1ère correspond à la couleur du haut (claire), la seconde à la couleur du bas (foncée)
/* navbar */
.navbar-inverse {
background-color: #F8F8F8;
border-color: #E7E7E7;
/* barre de navigation orange de la LibraryBox*/
/* background-image: linear-gradient(to bottom, #FF7203 0%, #D55E1B 100%); */
/* barre de navigation rouge */
background-image: linear-gradient(to bottom, #FF0000 0%, #A60000 100%);
Avant :
Après :
Reste maintenant à modifier le fonds des liens de la barre de navigation, pour l'instant, ils sont marrons.
Petite remarque, ici on n'utilise une technique de couleur nouvelle, qui en plus des 3 couleurs RVB, s'ajoute l'opacité, il s'agit de RGBA.
De ce fait on va reprendre la couleur RVB la plus foncée créé précédemment et on va lui ajouter une opacité.
Rien n'est magique, j'utilise l'outil suivant http://hex2rgba.devoth.com/
Je rentre ma couleur RVB # et je copie la couleur RGBA.
Cette couleur RGBA, je vais la recopier dans la feuille de style comme ceci :
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
/* Couleur de fonds des liens de la barre de navigation */
/* background-color: rgba(218, 55, 55, 0.6); */
background-color: rgba(162, 159, 25, 0.6);
Avant :
Après :
Pour le Pied de Page rendez-vous un peu plus bas dans la page (ligne 140 environ), cette fois-ci pas de dégradé, juste 1 couleur (j'ai choisi le couleur foncée).
#footer {
/* background: #c03d14; */
background: #a29f19;
border-top: 1px solid #922e0f;
margin: 2em 0 0 0;
padding: 0 0 1em;