Vormgeving

Aanpassen presentatie nieuwsberichten – 2024

De blokken waarin nieuwsberichten of teksten via HTML-aanpassingen worden gepresenteerd kunnen met behulp van CSS worden aangepast naar eigen inzicht. In verband met de mogelijkheid voor meertaligheid van de berichten ziet de CSS er na de update van 22.11 in 2023 iets anders uit.

Dat doe je in OpacUserCSS.

#OpacNavRight .default_item,
#OpacNavRight .nl-NL_item,
#OpacNavRight .en-item,
#OpacNavRight .de-DE_item {
  background: rgba(240, 240, 240, 0.8);
  margin: 1.5em 0 10px;
  padding: 10px;
  border: 2px solid green;
  border-left: 1px solid gray;
  border-top: 1px solid gray;
  border-radius: 3px;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

Wil je de blokken rechts netjes uitlijnen met bijv. je linkerkolom (OpacNav) of het blok midden op de pagina (OpacMainUserBlock), gebruik dan bijv. onderstaande CSS. OpacNav en OpacMainUserBlock staan vermeld ik Koha als optie onder Hulpmiddelen – HTML Aanpassingen.

div#OpacNavRight {
    padding-top: 10px;
}

|

URLs in stafinterface openen in nieuwe browsertab

In de stafinterface van Koha worden de links in records met een URL (in veld 856 u) na het aanklikken niet standaard in een nieuwe browsertab geopend.

Een kleine aanpassing in het bestand INTRANETUSERJS zorgt ervoor dat de links in de resultaatpagina en in de detailpresentatie netjes in een nieuwe tab worden geopend.

Ga naar Administratie en zoek op INTRANETUSERJS.

Klik om te bewerken

Plak de onderstaande code in het bestand:

 document.addEventListener('DOMContentLoaded', function() {
    // Zoek alle links binnen de elementen met de klasse 'results_summary' en 'online_access'
    var links = document.querySelectorAll('.results_summary.online_access a,.results_summary.online_resources a');

    // Loop door de gevonden links en stel het 'target' attribuut in op '_blank'
    links.forEach(function(link) {
      link.setAttribute('target', '_blank');
    });
});

(Javascript is aangepast in februari 2024 – met dank aan Biblibre)

Sla de wijzigingen op en vanaf dat moment worden de links netjes in een nieuwe tab geopend.

|

Melding ‘not for loan’ verbergen

De tekst ‘not for loan’ wordt standaard in Koha bij een exemplaar getoond dat als niet-uitleenbaar is aangemerkt.

Deze tekst kan aangepast worden door een geautoriseerde waarde voor de categorie NOT_LOAN toe te voegen in Koha.

De tekst die je ‘Beschrijving (OPAC)’ invult, wordt in de catalogus getoond in plaats van de standaardwaarde ‘Not for loan’. Als je een spatie gebruikt wordt er feitelijk geen tekst meer getoond en dat levert een compactere presentatie op.

Bij de exemplaargegevens van een titel kun je kiezen voor deze geautoriseerde waarde, zodat de presentatie wordt aangepast.

Zonder waarde bij 7- Not for loan
Met waarde bij 7- Not for loan
Standaard
Aangepaste waarde (spatie)

De opmaak van de presententatie van de aanwezigheid van exemplaren kan verder worden aangepast. Lees verder.

Verberg lege afbeelding omslag

Boekomslagen worden getoond als de optie voor het tonen van boekomslagen is geactiveerd onder Administratie – Verrijkte inhoud (Enhanced Content), bijv. boekomslagen via Google (zoek op Google in de systeemvoorkeuren).

Als er geen afbeelding wordt gevonden, laat Koha een standaard lege afbeelding zien:

Om deze ‘lege’ afbeelding te verbergen kun je de onderstaande CSS toevoegen aan de OpacUserCss

.no-image {
    display: none;
}
|

Exemplaarinformatie bij records zonder item

Bij records waar bewust geen exemplaar aan gekoppeld is, bijv. bij een beschrijving van een website of andere online bron, is het toch mogelijk om exemplaarinformatie toe te voegen.

Als eerste zoek je in Administratie/Systeemvoorkeuren naar ‘Alternate’ en je krijgt de optie gepresenteerd om het veld (of velden) te selecteren waar de tekst staat die als extra exemplaarinformatie getoond moet worden.

De informatie die getoond wordt is afkomstig uit een MARC-subveld uit het record. Welk subveld gebruikt wordt is afhankelijk van het doel. Bij een beschrijving van een website zou je subveld 2 van veld 856 kunnen gebruiken. De andere subvelden van 856 zijn allemaal van invloed op de standaard tekst die door Koha wordt getoond en zorgen voor verdubbeling van deze tekst. Door subveld 2 te gebruiken wordt dat probleem vermeden. Let op dat het subveld direct achter het veldnummer wordt gezet.

Je kunt handmatig informatie aan subveld 2 toevoegen, wat voor een enkel record geen probleem is. Voor meerdere records, bijv. geselecteerd met het rapport zoals beschreven in Records zonder exemplaren selecteren, kun je een MARC-wijzigingssjabloon gebruiken.

Vervolgens een wijzigingssjabloon maken (zie Gebruik MARC wijzigingssjablonen), dan de records selecteren die aangepast moeten worden, het sjabloon kiezen en de bewerking starten.

Het resultaat

Presentatie in beheer

Presentatie in catalogus

Presentatie in beheer na aanpassing

Presentatie in beheer na aanpassing

Om de tekst ‘Bezit:’ te verwijderen, kun je in OPACUserCSS nog de volgende regel toevoegen:

div#alternateholdings .holdings_label {
    display: none;
}

Dan ziet het er als volgt uit:

Presentatie aanwezigheid exemplaren in OPAC verbeteren

Standaard worden de gegevens over beschikbare exemplaren bij een titel achter elkaar getoond in de resultaatlijst

Een kleine aanpassing in de CSS in OpacUserCss zorgt er voor dat de gegevens onder elkaar worden geplaatst:

/* opsomming exemplaren */
span.available.reference {
    display: block;
}

span.available.reallyavailable {
    display: block;
}

Wil je ook de gegevens per exemplaar onder elkaar dan kan dat ook:

span.ItemSummary {
    font-style: normal;
    display: block;
}

Ook de opmaak van de gegevens van de exemplaren zelf is aan te passen. Wil je bijv. meer ruimte hebben tussen de naam van bibliotheek en de signatuur? Dat kan door de volgende CSS toe te voegen. Spaties worden genegeerd in de code, maar je kunt de tekst/tekens die bij content geplaatst worden transparant maken en zo toch de nodige witruimte creëren.

span.CallNumberAndLabel:before {
    content: ' -- ';
  color: transparent;
}

De getallen achter de bibliotheeknaam geven aan hoeveel exemplaren er zijn. Alleen van het eerste exemplaar wordt de signatuur getoond.

Duikt er na deze aanpassing een vierkante haak op na de signatuur?

Met de onderstaande CSS kun je de vierkante haak vervangen door een eigen tekst tussen de aanhalingstekens te plaatsen of door er niks tussen te zetten.

.ItemSummary .CallNumber:after {
content: "";
}

Opmaak voorloopteksten / labels aanpassen

Als je in de presentatie van zoekresultaten en de detailbeschrijvingen de leesbaarheid wilt verbeteren, kun je de voorloopteksten (ook labels genoemd) eenvoudig aanpassen via CSS in OpacUserCss.

.results_summary .label {
    color: #000000;
    font-size: 100%;
    font-weight: 600;
}

Dit stukje CSS past de voorloopteksten aan. Je kunt zelf bepalen hoe groot, welke kleur en of iets vetgedrukt moeten worden getoond.

Met de onderstaande CSS verberg je de tekst onder de beschrijving in de resultaatlijst

span.results_summary.availability .label {
    display: none;
}

Voor:

Na het toevoegen van de CSS:

De tekst ‘Exemplaren uitleenbaar’ of ‘Exemplaren ter inzage’ is standaard vetgedrukt, maar je kunt wel bijv..de kleur aanpassen:

.available {
    color: #060;
}

Vormgeving knop in catalogus voor online bronnen

In de catalogus kunnen beschrijvingen worden opgenomen die verwijzen naar online bronnen, door een url in het veld ‘856 u‘ op te nemen:

Veld 856 voor verwijzingen naar online bronnen

Als er niks wordt ingevuld in veld ‘856 y‘ wordt in de catalogus de standaard tekst ‘Klik hier voor online toegang’ getoond:

Deze tekst wordt automatisch vertaald als de gebruiker een andere taal kiest in de catalogus: ‘Click here to access online’

Om de online bronnen beter zichtbaar te maken in de resultaatlijst kan de vormgeving met behulp van CSS eenvoudig worden aangepast door in OpacUserCss het volgende toe te voegen:

span.results_summary.online_resources {
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #009c82;
    border-radius: 3px;
    background-color: #97d68a4d;
}

Als de achtergrondkleur van de knop donker is, kun je de kleur van de link in de knop aanpassen, naar wit in dit voorbeeld:


span.results_summary.online_resources a:link {
    color: #fffff;
}

De kleur van de knop (#009c82) en de rand (#97d68a4d) kan aangepast worden, passend bij de huisstijl van de bibliotheek.

Kijk voor uitleg over CSS op W3schools. Daar is alles over CSS te vinden met uitleg over de mogelijkheden van elk onderdeel.

Het resultaat:

Vul je in het veld ‘856 y‘ een eigen tekst in, dan wordt deze in de knop getoond. Deze tekst wordt echter niet automatisch vertaald!

|

Aanwinsten presenteren

Door middel van een rapport kun je een aanwinstenlijst genereren van bijv. de nieuwe eBooks van de afgelopen maand.

In Rapporten maak je een nieuw rapport aan:

SELECT biblio.biblionumber, CONCAT('<a href=\"/cgi-bin/koha/catalogue/detail.pl?biblionumber=',biblio.biblionumber,'\" target=new>',biblio.title,'</a>') AS Titel,
     biblio.datecreated AS 'Datum toegevoegd'
FROM biblio
LEFT JOIN biblioitems ON (biblio.biblionumber=biblioitems.biblionumber) 
WHERE (biblio.datecreated  >= concat(date_format(LAST_DAY(now() - interval 1 month),'%Y-%m-'),'01') AND biblio.datecreated <= LAST_DAY(now() - interval 1 month))
AND biblioitems.itemtype="DRS"
ORDER BY biblio.datecreated DESC

Dit geeft geeft een overzicht van de titel met de datum waarop de titel is toegevoegd aan de catalogus:

Een dergelijk rapport (met biblionummer) kun je ook gebruiken om de titels op de homepage van de catalogus te presenteren. Dat kan als slideshow of als carrousel. De plugin voor deze presentatie is beschikbaar in Koha onder Hulpmiddelen – Applicatie plug-ins.

In de configuratie kun je kiezen wel rapport als bron moet dienen.

Na het aanpassen van de configuratie kan er een carrousel gegeneerd worden.

Het resultaat wordt automatisch geplaatst in het contentblok OpacMainUserBlock (te vinden onder Hulpmiddelen – Nieuws). Aangezien het daar als Javascript met HTML en CSS wordt geplaatst, is het alleen zichtbaar als je de editor voor de broncode kiest (zie < >)

<!-- Debut du carrousel --><!-- Carrousel 3.9 -->
<div id="inlibro-carrousel">
<div class="carrouselFrame">
<p class="special-title">Onze nieuwste ebooks</p>
<div class="loadingDiv">Zi</div>
<div id="carrousel-0" class="carrousel"><a class="left carousel-control">&lsaquo;</a> 

etc etc.

In de catalogus ziet er dan als volgt uit, waarbij de opmaak aangepast kan worden aan de eigen huisstijl.

Zie voor een live voorbeeld: search.saxionbibliotheek.nl

Datum facet toevoegen

Met Javascript en wat styling kun je eenvoudig een optie toevoegen om zoekresultaten in de catalogus te verfijnen op een periode.

In OPACUserJS voeg je het volgende stuk Javascript toe:

Opties voor het aanpassen van de weergave (zoals de tabel en de teksten) kun je doen aan het einde van het bestand na: //construct date slider widget

Daar kun je bijv. de kop aanpassen: <h3>Jaar van uitgave</h3> , maar ook de periode instellen. Dat doe je zowel in de tekst: div id=’date1′>1990</div> als in de parameter in de laatste regel: $(“#slider”).slider({range:true, min: 1990, max: enddate, values: [1990, enddate], stop:updateSliderValue});

Tenslotte kun je ook de styling van de tabel waarbinnen het geheel is geplaatst aanpassen:
<table style=’margin:10px 0px 10px 5px;’> 

    function searchDates() {
//declare URL variables
    var url_idx, url_q, url_sb, yr, searchcat, doo, bgl, addto;
//get page URL
    var url = window.location.href;
//parse URL to get base
    var url_base = url.substring(0, url.indexOf("?"));
//parse URL on &
    var parts = url.split("&");
//init limits array and increment
    var limits = [];
    var i;
//go through each parsed part of the array and create variables and an array of limits
    for(i=0; i < parts.length; i++) {
    if(/idx=/.exec(parts[i])) {
            url_idx = /idx=(.*)/.exec(parts[i]);
    }
        else if(/q=/.exec(parts[i])) {
            url_q = /q=(.*)/.exec(parts[i]);
        }
        else if(/sort_by=/.exec(parts[i])) {
            url_sb = /sort_by=(.*)/.exec(parts[i]);
        }
        else if(/limit=/.exec(parts[i])) {
            let lim = /limit=(.*)/.exec(parts[i]);
            limits.push(lim[1]);
        }
    else if(/limit-yr=/.exec(parts[i])) {
            yr = /limit-yr=(.*)/.exec(parts[i]);
    }
        else if(/searchcat=/.exec(parts[i])) {
            searchcat = /searchcat=(.*)/.exec(parts[i]);
        }
        else if(/do=/.exec(parts[i])) {
            doo = /do=(.*)/.exec(parts[i]);
        }
        else if(/branch_group_limit=/.exec(parts[i])) {
            bgl = /branch_group_limit=(.*)/.exec(parts[i]);
        }
        else if(/addto=/.exec(parts[i])) {
            addto = /addto=(.*)/.exec(parts[i]);
        }
    }
 
    //get the dates from the slider
    var sd = $("#date1").text();
    var ed = $("#date2").text();
 
    //construct the new URL with the previous search criteria
    var newurl = url_base + "?";
    if(url_idx) {
      newurl += "idx=" + url_idx[1];
    }
    else {
      newurl += "idx=kw";
    }
    if(url_q) {
      newurl += "&q=" + url_q[1];
    }
    if(url_sb) {
      newurl += "&sort_by=" + url_sb[1];
    }
    if(searchcat) {
      newurl += "&searchcat=" + searchcat[1];
    }
    if(doo) {
      newurl += "&do=" + doo[1];
    }
    if(bgl) {
      newurl += "&branch_group_limit=" + bgl[1];
    }
    if(addto) {
      newurl += "&addto=" + addto[1];
    }
    if(limits) {
    let j;
    for(j=0; j < limits.length; j++) {
          if(limits[j].indexOf("yr") > -1) {
            continue;
          }
          else {
            newurl += "&limit=" + limits[j];
          }
    }
}
    //add the new years to the URL
    newurl += "&limit-yr=" + sd + "-" + ed;
 
    //go to the new URL
    window.location.href = newurl;
}
 
//comment below can be used for testing purposes
//document.getElementById("translControl1").value = url_idx[1] + " " + url_q[1] + " " + url_sb[1] + " " + limits[1] + " " + yr[1] + " " + searchcat[1] + " " + doo[1];
 
//construct date slider widget
if((window.location.href.indexOf("cgi-bin/koha/opac-search.pl") > -1) && (screen.width>768)){
    $(document).ready(function () {
        let d = new Date();
        let enddate = d.getFullYear();
 
        $(".menu-collapse").append("<li><h3>Jaar van uitgave</h3><div id='slider'></div><table style='margin:10px 0px 10px 5px;'><tr><td><div id='date1'>1990</div></td><td><div>tot en met </div></td><td><div id='date2'>" + enddate + "</div></td></tr></table><table><tr><td><button type='submit' onclick='searchDates()'>Kies periode</button></td></tr></table></li>");
 
        var updateSliderValue = function (event, ui) {$("#date1").text($("#slider").slider("values", 0)); $("#date2").text($("#slider").slider("values", 1));};
 
        $("#slider").slider({range:true, min: 1990, max: enddate, values: [1990, enddate], stop:updateSliderValue});
 
    });
}
div#slider {
    margin-left: 10px;
    margin-right: 30px;
}

In dit geval styling voor de marges links en rechts.

End of content

End of content