AFI-OPAC2.0 - Exemples CSS

Edition d'un fichier CSS

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)

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

Couleur de fond des titres des boîtes

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

Couleur des titres des boîtes

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

Couleur de fond des boîtes en dégradé (Chrome + Firefox)

.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é

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

#site_web_content {
  background-color: #F0F0F0;
}

Couleur de fond du menu horizontal avec ombrage

#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

#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

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

Liens / outils

Générateur de gradients

Générateur de règles CSS3

Cacher le code embed des kiosques

 .embedcode { display: none}

Cacher les prolongations

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

Retirer la fonction "modifier mon compte"

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é

 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

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)

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

 span.calendar_event_date {display : none}

Changer la couleur du titre du lien dans le menu horizontal selon le profil courant

Pour passer le 3ème lien du menu en fond rouge quand on est dans le profil/page 100

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