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


1. Imagettes

1.1 Cacher l'encadré Aucune image dans la liste des résultats et la notice détaillée

Info
Fonctionne avec la version 24.05
Quote
//Cacher aucune image
.no-image{ display:none; }

1.2 Déplacer les imagettes à gauche dans la liste des résultats

Info
Fonctionne avec la version 24.05
Quote
.coverimages {
 float: left;
 padding-right: 25px;
 padding-bottom: 40px;
 width:100px;
 min-height:109px;
height:118px;
}


1.3

2. Notices

2.1 Changer la couleur du statut Prêté

Info
Fonctionne avec la version 24.05
Quote
.checkedout{
color : #900;
}

Le code surligné en vert est un codes RBG qui identifient les couleurs. Dans l'exemple, le code fait en sorte que le statut de prêt affiche en rouge (#900). Il est possible de changer le code RBG pour obtenir les couleurs voulues, par exemple à l'aide du site internet suivant : Rapid Tables

2.2
2.3

3. Affichage globale

3.1 Changer la couleur du bandeau du haut

Info
Fonctionne pour la version 24.05
Quote
/*Change la couleur de la barre de navigation en rouge*/
 .navbar-expand {
 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*/
/*Se connecter et historique de recherche*/
 .navbar-inverse .brand, .navbar-inverse .nav > li > a, #members a {
 color: #fff !important;
 }
/*Icône avant se connecter*/
 .navbar-inverse .brand, .navbar-inverse .nav > li > a, #members i {
 color: #fff !important;
 }
/*Panier et Listes*/
 .navbar-inverse .brand, .navbar-inverse .nav > li > a, #cart-list-nav a {
 color: #fff !important;
 }
/*Icônes avant Panier et Listes*/
 .navbar-inverse .brand, .navbar-inverse .nav > li > a, #cart-list-nav i {
 color: #fff !important;
 }

Les codes surlignés en vert sont des codes RBG qui identifient les couleurs. Dans l'exemple, le bandeau serait rouge (#680A1A) et l'écriture blanche (#fff). Il est possible de changer les codes RBG pour obtenir les couleurs voulues, par exemple à l'aide du site internet suivant : Rapid Tables


3.2

4. Réservations
4.1 




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;
}

Version 25.05
.coce-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

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

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