Code CSS pour l’opac

Code CSS pour l’opac

Le code CSS permet de modifier l’apparence des textes et des alertes dans Koha. Vous pouvez insérer ces différents codes dans la préférence système OpacUserCSS.

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




#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




/* pour afficher la zone depouillement 505 */  
.contents .g:before { 
    content: "\A";
    white-space: pre;
}
.contents .t::before {
    content: "";
    white-space: pre;
}

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


.no-image{
display:none;
}

4. Changer la couleur de la barre de navigation à l’opac (FONCTIONNEL EN 21.05)

Changer les codes en rouges pour mettre d’autres couleurs. (088A29 = Rouge et FFF=blanc)



/*Change la couleur de la barre de navigation en rouge*/
 nav.navbar.navbar-expand {
 background-image: linear-gradient(to bottom, #088A29, #088A29);
 border-color: #088A29;
 background-color: #088A29;
 }


 /*Change la couleur de la police en blanc dans la barre de navigation*/ 
nav.navbar.navbar-expand, #members a {
 color: #fff !important;
 }
  nav.navbar.navbar-expand, #langmenu {
 color: #fff !important;
 }
nav.navbar.navbar-expand, #listsmenu {
 color: #fff !important;
 }
nav.navbar.navbar-expand, #cartmenulink {
 color: #fff !important;
 }

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


.checkedout{
color : #900;
}

6. Déplacer les imagettes à gauche dans la liste de résultats (fonctionne avec 23.05)


td .cover-slides {
 float: left;
 padding-right: 25px;
 padding-bottom: 40px;
}

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


.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


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 (déployer les options sous Plus d'options)

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

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

10. Localisation sur une autre ligne

/*pour localisation sur autre ligne*/
.branch-info-tooltip{display:block;}

11. Enlever le lien du titre d'une nouvelle

/*pour enlever lien nouvelle*/
.newsheader a {
    color: black;
    text-decoration: none;
    cursor: default;

12. Afficher automatiquement le code QR dans la vue normale d'une notice

 /*afficher code qr sans clic*/
#qrcode {
display:block!important;
}

13. Aligner la boîte de recherche à gauche

/*Aligner la boite de recherche vers la gauche*/
#opac-main-search div.span2{
display:none;
}
#opac-main-search div.span10{
margin-left:0px;
}

14. Colorer les indications de numéros manquants dans les abonnements de vos périodiques

Le code ci-dessous permet de colorer en vert la note de l'abonnement. Le code de couleur peut être changé pour une autre couleur et d'autres caractéristiques de police peuvent être indiquées, par exemple le caractère gras.
/*manquant abonnement*/
p.subscription_missing {
    color: #A91C2C;
}

15. Mise en forme des notes publiques des abonnements de vos périodiques

Le code ci-dessous permet de colorer en vert la note de l'abonnement. Le code de couleur peut être changé pour une autre couleur et d'autres caractéristiques de police peuvent être indiquées, par exemple le caractère gras.
/*note publique abonnement*/
p.subscription_notes {
    color: #306830;
}

16. Mettre les sujets en blocs/listes plutôt qu'en ligne

/*affichage des sujets en bloc plutôt qu'en ligne et sans le caractère | pour délimiter les sujets*/
.resource_list li{
    display: block;
}
.resource_list li::after{
    display: none;
}


    • Related Articles

    • Code javascript pour l’opac

      Article en restructuration, il est possible que la mise en page ne soit pas optimale. 0. Configuration 0.1 Préférence OPACUserJS La préférence système opacuserjs peut être utilisée pour activer du code java à l’OPAC. Les codes qui sont listés ...

    • Code CSS pour l’intranet

      Le code CSS permet de modifier l’apparence des textes et des alertes dans Koha. Vous pouvez insérer ces différents codes dans la préférence système IntranetUserCSS. 1. Modifier l’apparence des messages sur la page d’accueil de l’intranet ...

    • Code javascript pour l’intranet

      0. Configuration La préférence système intranetuserjs peut être utilisé pour activer du code java à l’intranet. Les codes qui sont listés ci-dessous doivent être inscrit entre ces deux balises en rouge (les balises ne doivent apparaître qu’une fois ...

    • Créer des blocs dans les onglets Type de document, Collection et Localisation de la page Recherche avancée

      Voici la version corrigée pour 21.05 des codes Javascript et CSS pour regrouper par blocs les critères de recherche dans les onglets de la recherche avancée de l'OPAC, comme dans la capture d'écran ci-dessous. Types de document, collections et ...

    • Ajouter un index Titre de revue

      Cet ajout permet de rechercher rapidement un Titre de revue en cherchant dans l'index Titre et en ajoutant un filtre sur le ou les types de documents correspondant à vos revues. Le code fonctionnel avec ElasticSearch est beaucoup plus complexe que ce ...