AFI-OPAC2.0 - Exemples CSS

De Bibliopedia
Sauter à la navigation Sauter à la recherche

Edition d'un fichier CSS[modifier | modifier le wikicode]

Petit pense bête pour mettre un CSS qui change la couleur du menu horizontal:

#menu_horizontal {
    background-color: #9CB12C;
}

sur la ligne background-color : la couleur est intégrée suite à un # voici un lien qui renvoi sur un nuancier des couleurs hexadécimales : http://www.aly-abbara.com/utilitaires/autres/table_couleurs.html


Bords des boites ronds (sauf IE)[modifier | modifier le wikicode]

.auteur_critique span {
display: none;
}
.boiteGauche,
.boiteMilieu,
.boiteDroite {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}


Couleur de fond des titres des boîtes[modifier | modifier le wikicode]

.boiteGauche .titre,
.boiteMilieu .titre,
.boiteDroite .titre{
  background-color: #DDDDFF;
}

Couleur des titres des boîtes[modifier | modifier le wikicode]

.boiteMilieu h1 {
    color: #2E8B57;
    font-size: 1.6em;
}

Couleur de fond des boîtes en dégradé (Chrome + Firefox)[modifier | modifier le wikicode]

.boiteGauche .contenu,
.boiteMilieu .contenu,
.boiteDroite .contenu {
  background: -moz-linear-gradient(
        center bottom,
        rgb(220,220,255) 2%,
        rgb(255,255,255) 40%);
	
  background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.02, rgb(220,220,255)),
        color-stop(0.4, rgb(255,255,255)))
}


Couleur de fond du site en dégradé[modifier | modifier le wikicode]

body {
  background: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0.37, rgb(230,235,233)),
    color-stop(0.69, rgb(172,179,177)));

  background: -moz-linear-gradient(
    left top,
    rgb(230,235,233) 37%,
    rgb(172,179,177) 69%);
}


Couleur de fond du contenu du site[modifier | modifier le wikicode]

#site_web_content {
  background-color: #F0F0F0;
}


Couleur de fond du menu horizontal avec ombrage[modifier | modifier le wikicode]

#menu_horizontal {
  background: #89BEFF;
  box-shadow: inset 5px 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 5px 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 5px 5px rgba(0, 0, 0, 0.4);
}

Mise en relief des sous-menus du menu horizontal[modifier | modifier le wikicode]

#menu ul il ul {
  background: #EEEEEE;
  box-shadow: inset 5px 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 5px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 5px 5px rgba(0, 0, 0, 0.4);
}

Couleur de fond des sous-menus du menu horizontal[modifier | modifier le wikicode]

#menu_horizontal ul li ul {
	background-color : #ffffff;
}


Liens / outils[modifier | modifier le wikicode]

Générateur de gradients

Générateur de règles CSS3

Cacher le code embed des kiosques[modifier | modifier le wikicode]

 .embedcode { display: none}

Cacher les prolongations[modifier | modifier le wikicode]

 .abonneTitre + table td.date_retour a {
   display: none;
 }

Retirer la fonction "modifier mon compte"[modifier | modifier le wikicode]

Une fois le lecteur connecté, pour bloquer le bouton "modifier ma fiche"

 .abonneTitre>span>a {
   display:none;
 }

Déplacement horizontal et vertical de l'oeil d'accessibilité[modifier | modifier le wikicode]

 div#open_accessibility {
   margin-right: -20px;
 }

déplacement horizontal (margin-right): si valeur négative, déplacement vers la droite, si valeur positive, déplacement vers la gauche. Exemple sur site de Mortagne déplacement de l'oeil sur la gauche du bandeau

Pour un déplacement vertical, remplacer margin-right par margin-top (valeur négative : déplacement vers le haut / valeur positive : déplacement vers le bas)

Mettre en commun des définitions CSS[modifier | modifier le wikicode]

Exemple: CSS spéficifque mais on veut changer les couleurs selon les espaces.

Pour éviter de faire un copier-coller, utiliser l'instruction CSS @import.

mabib.css:

@import url("commun.css");

body{
    background-color:#92a8d7;
}

#menu_horizontal {
    background-color: #52b9fd;
}


bd.css:

@import url("commun.css");

body{
    background-color:#990066;
}

#menu_horizontal {
    background-color: #990066;
}


commun.css

body{
    background:none;
}

#site_web_wrapper{
    background-color:white;
}

.calendar{
    background-color:white;
}

#menu_horizontal {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #990066;
    background-image: url("../userfiles/bannieres/fond_titre.gif");
    background-position: 0 0;
    background-repeat: repeat-x;
    color: white;
    cursor: pointer;
    float: left;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
    height: 30px;
    padding-top: 10px;
    text-align: center;
    width: 100%;
}

.boiteGauche,
.boiteMilieu,
.boiteDroite {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.siteWeb {
		border: 0px;
}

.site_web_wrapper {
		border: 1px solid #A0A0A0;
}

.footer {
		border-top: 1px solid #A0A0A0;
}

.siteWeb div#colGaucheInner {
  padding-bottom: 4px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;	
}


Règles CSS pour une page seulement (depuis la version 5.23)[modifier | modifier le wikicode]

Pour faciliter la personnalisation CSS des pages, la classe de la balise body contient maintenant les noms du controller et de l'action courante.

Par exemple, lorsqu'on est sur la page http://mon_opac.net/recherche/avancee, la balise body est définie comme ceci:

    <body class="recherche_avancee">

Sur la page http://mon_opac.net/abonne/reservations: <body class="abonne_reservations">

Et sur la page d'accueil: <body class="index_index">

Cela permet de définir des règles CSS pour une page donnée seulement. Par exemple, si on veut que le texte des balises "h1" soit rouge uniquement sur la page des paniers de notice (http://mon_opac.net/panier/index), on définit la règle CSS:

    body.panier_index h1 {
      color: red;
    }


Cacher les dates des articles[modifier | modifier le wikicode]

 span.calendar_event_date {display : none}


Changer la couleur du titre du lien dans le menu horizontal selon le profil courant[modifier | modifier le wikicode]

Pour passer le 3ème lien du menu en fond rouge quand on est dans le profil/page 100 Version qui ne fonctionne pas pour IE < 9

 .profil_100 #menu_horizontal li.menu:nth-child(3) {background-color: red}


Version qui fonctionne partout

 .profil_100 #menu_horizontal li.menu:first-child + li.menu + li.menu {background-color: red}


Cacher la date des avis[modifier | modifier le wikicode]

 .auteur_critique span {
   display: none;
 }


Régler les hauteur et largeur des vignettes sur le résultat de recherche en mode "Mur"[modifier | modifier le wikicode]

 .liste_mur .notice_wrapper {
     height: 160px;
 }
 .liste_mur .notice_wrapper,
 .liste_mur .notice a img {
     width: 120px !important;
 }


Style des vignettes des documents non reconnus[modifier | modifier le wikicode]

Livres en fond bleu:

 .nothumbnail.type_doc_1 {
   background-color: #AAF;
 }

Périodiques fond blanc:

 .nothumbnail.type_doc_2 {
   background-color: white;
 }

Types de doc standard:

  • LIVRE = 1
  • PERIODIQUE = 2
  • DISQUE = 3
  • DVD = 4

Cacher les liens vers les réseaux sociaux[modifier | modifier le wikicode]

div[id^="reseaux-sociaux-"] { display:none}


Mettre une image de fond[modifier | modifier le wikicode]

Charger l'image dans le répertoire CSS en utilisant l'explorateur de fichiers (tout en bas à gauche côté admin). Puis avec l'éditeur CSS:

body {
  background-image: url("mon_image.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}