Modification de 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:
<pre>
#menu_horizontal {
    background-color: #9CB12C;
}
</pre>

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) ==.auteur_critique span {
display: none;
}


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



== Couleur de fond des titres des boîtes ==


<pre>
.boiteGauche .titre,
.boiteMilieu .titre,
.boiteDroite .titre{
  background-color: #DDDDFF;
}
</pre>

== Couleur des titres des boîtes ==

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

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

<pre>
.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)))
}
</pre>


== Couleur de fond du site en dégradé ==

<pre>
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%);
}
</pre>


== Couleur de fond du contenu du site ==

<pre>
#site_web_content {
  background-color: #F0F0F0;
}
</pre>


== Couleur de fond du menu horizontal avec ombrage ==

<pre>
#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);
}
</pre>

== Mise en relief des sous-menus du menu horizontal ==

<pre>
#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);
}
</pre>

== Couleur de fond des sous-menus du menu horizontal ==

<pre>
#menu_horizontal ul li ul {
	background-color : #ffffff;
}
</pre>


== Liens / outils ==

[http://gradients.glrzad.com/ Générateur de gradients]

[http://www.css3maker.com/ 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:
<pre>
@import url("commun.css");

body{
    background-color:#92a8d7;
}

#menu_horizontal {
    background-color: #52b9fd;
}
</pre>


bd.css:
<pre>
@import url("commun.css");

body{
    background-color:#990066;
}

#menu_horizontal {
    background-color: #990066;
}
</pre>


commun.css
<pre>
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;	
}
</pre>


== 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:
<pre>
    <body class="recherche_avancee">
</pre>

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:
<pre>
    body.panier_index h1 {
      color: red;
    }
</pre>


== 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
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 == 

  .auteur_critique span {
    display: none;
  }


== Régler les hauteur et largeur des vignettes sur le résultat de recherche en mode "Mur" ==

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

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 == 

<syntaxhighlight lang="css" enclose="div">
div[id^="reseaux-sociaux-"] { display:none}
</syntaxhighlight>


== Mettre une image de fond ==
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:

<syntaxhighlight lang="css" enclose="div">
body {
  background-image: url("mon_image.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</syntaxhighlight>
[[Catégorie:AFI-OPAC 2.0]]