Code CSS pour l’OPAC

Code CSS pour l’OPAC

L'article suivant présente des codes CSS pouvant être utilisés pour personnaliser l'OPAC.

0. Configurations

0.1 Préférence OPACUserCSS

Il faut ajouter les codes dans la préférence système OPACUserCSS. Les changements effectués par ces codes seront visibles à tout moment et pour tout les utilisateurs dans l'OPAC.


0.2 JS pour l'OPAC spécifique dans les paramètres des bibliothèques - Nouveauté 24.05

Une nouveauté de la version 24.05 permet d'injecter du code Javascript et CSS pour chaque bibliothèque spécifique. Ce code est injecté à partir des paramètres de la bibliothèque dans Administration > Bibliothèques.

Lorsque du code Javascript est injecté dans ce paramètre, la modification effectuée par le code est visible UNIQUEMENT lorsqu'on est connecté à un compte rattaché à la bibliothèque en question. Si, par exemple, on injecte du code dans la bibliothèque Collecto qui permet de cacher l'onglet MARC de la vue détaillée d'une notice, l'onglet sera visible pour toutes les personnes qui accèdent à l'OPAC sans se connecter. L'onglet ne sera pas visible pour un usager qui se connecte et dont le compte est rattaché à la bibliothèque Collecto.

Comme pour la préférence système OPACUserJS, il faut insérer le code suivant avant d'inscrire du code Javascript dans les paramètres des bibliothèques.

Quote
$(document).ready(function(){
CODE
});  


1. Enlever le souligné des liens à l’opac dans la colonne de gauche (OpacNav)


Quote
#opacnav a, #opacnav a:hover, #opacnav a:link, #opacnav a:visited { text-decoration:none; }

2. Afficher correctement la zone 505 d’une notice en vue détaillée


Répéter la zone 505 pour chacun des titres. Ils peuvent être inscrit en $a ou $t. 
Quote
/* pour afficher correctement la zone depouillement 505 */ span.results_summary.contents span.label:after { content: "\A"; white-space: pre; }

3. Cacher Pas d’image disponible en vue détaillée et en liste de résultats

Quote
.no-image{ display:none; }

4. Changer la couleur de la barre noire à l’opac

Changer les codes en rouges pour mettre d’autres couleurs.


Quote
/*Change la couleur de la barre de navigation en rouge*/
 .navbar-inverse .navbar-inner {
 background-image: linear-gradient(to bottom, #680A1A, #680A1A);
 border-color: #680A1A;
 background-color: #680A1A;
 }
/*Change la couleur de la police en blanc dans la barre de navigation*/
 .navbar-inverse .brand, .navbar-inverse .nav > li > a, #members a {
 color: #fff !important;
 }
/*enlève le noir de la barre de navigation*/
 .navbar-inverse .divider-vertical {
 border-left: none;
 border-right: none;
 }

5. Changer la couleur du terme « En prêt » dans le tableau des exemplaires dans une notice en vue détaillée

Quote
.checkedout{ color : #900; }

6. Déplacer les imagettes à gauche dans la liste de résultats

Quote
.coverimages { float: left; padding-right: 25px; padding-bottom: 40px; width:100px; min-height:109px; height:118px; }

7. Modifier la taille de l’imagette locale en liste de résultats

Quote
.thumbnail { max-height: 110px; max-width: 75px; }

8. Modifier la police d’écriture pour les cotes dans le tableau des exemplaires et la liste de résultats

Quote
td.call_no { font-family: Verdana; } span.ItemSummary { font-family: Verdana; }

9. Faire afficher en tout temps toutes les options lors d'une réservation

Ce code permet de masquer le Plus d'options et de faire afficher directement les options de réservation. Ce code est pratique surtout dans le cas où dans vos règles de circulation l'option Permettre est choisie dans la colonne "réservation au niveau de l'exemplaire".

Voir la vidéo ci-dessous pour mieux comprendre (ancienne version) :

Quote
/*Afficher toutes les options des réservations*/
.toggle-hold-options {
    display : none !important;
}
.hold-options {
    display : block !important;
}


Article révisé dans la version 24.05.

    • Related Articles

    • Code javascript pour l’OPAC

      L'article suivant présente des codes Javascript pouvant être utilisés pour personnaliser l'OPAC. 0. Configurations 0.1 Préférence OPACUserJS Il faut ajouter les codes dans la préférence système OPACUserJS. Les changements effectués par ces codes ...
    • Mettre en valeur les ressources numériques à l’OPAC à l'aide d'un bouton

      Il existe 2 façons de mettre en valeur les liens vers vos ressources numériques à l'Opac : à l'aide d'un code Javascript à l'aide d'un code CSS Les deux permettront d'afficher un bouton, en gras, à la place du lien, mais auront un comportement ...
    • Code CSS pour l’intranet

      Les codes du présent article permettent de changer l'apparence d'alertes et de textes à différents endroits dans l'Intranet. 0. Configurations Il faut ajouter les codes dans la préférence système IntranetUserCSS. Les changements effectués par ces ...
    • Menu déroulant et accordéon pour l'OPAC

      L'article suivant présente les configurations pour créer des menus déroulants ou des accordéons pour la présentation des informations dans votre OPAC. Les menus déroulants et les accordéons peuvent être insérés dans une Nouvelles, dans une entrée de ...
    • Code javascript pour l’intranet

      0. Configurations Les codes suivant doivent être inscrits dans la préférence système IntranetUserJS. Ils doivent également être inscrit entre ces deux balises en rouge (les balises ne doivent apparaître qu’une fois dans la préférence système que vous ...