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.

1. Configurations

1.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 tous les utilisateurs dans l'OPAC.

1.2 Codes CSS et JS pour l'OPAC dans les paramètres des bibliothèques 

Il est possible 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.

2. Liste des résultats

2.1 Cacher l'encadré Aucune image dans la liste des résultats 

Quote
//Cacher aucune image
.no-image{ display:none; }

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

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

2.3 Modifier la taille de l’imagette en liste de résultats

Quote

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

Version 25.05
.coce-thumbnail {
max-height: 110px;
max-width: 75px;
}

3. Notice détaillée

3.1 Cacher l'encadré Aucune image dans la notice détaillée

Quote
//Cacher aucune image
.no-image{ display:none; }

3.2 Abaisser l'imagette dans la notice détaillée

Abaisse l'imagette qui déborde sur la ligne au-dessus en version 25.05

3.2.1 Imagette Coce

Quote
#coce-thumbnail-preview img {
padding-top: 40px;
}

3.2.2 Imagette provenant d'Amazon

Quote
#amazon-bookcoverimg img {
padding-top: 40px;
}

3.3 Créer une marge entre la source de l'imagette et le texte de la notice

Pour décoller la source de l'image (lorsqu'elle se situe à la gauche de la notice) du texte de la notice en version 25.05
Quote
#biblio-cover-slider {
padding-right: 20px;
}

3.4 Déplacer l'imagette à la droite de la notice à la vue détaillée

Quote
div.bookcover {
  float: right;
}

3.5 Changer la couleur du statut Prêté

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

3.6 Cacher l'option "Citer" de la vue détaillée d'une notice.

Quote
#cite {
    display: none !important;
}

4. Affichage globale

4.1 Changer la couleur du bandeau du haut

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

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


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

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