Building a Professional Sirah Research Hub Branding in Koha

Building a Professional Sirah Research Hub Branding in Koha

To create a professional Sirah Research Hub branding in Koha, you need to utilize the "HTML Customization" tools. By treating your publishers and source bibliographies as "Libraries," we can create a grid of icons that act as direct portals to each collection.

Here is your step-by-step guide to building this layout.

Step 1: Branding and "Quick-Links" Code

Paste this code into Tools > HTML Customizations > OpacMainUserBlock. This block appears in the center of your OPAC home page.

HTML Content (OpacMainUserBlock) 
<div class="sirah-hub-header" style="text-align: center; padding: 20px; background: #f4f4f4; border-radius: 10px; margin-bottom: 30px;">
    <h1 style="color: #2c3e50; font-weight: bold;">Sirah Research Hub</h1>
    <p style="font-size: 1.2em; color: #7f8c8d;">A Unified Portal for Prophetic Biography Studies (SAW)</p>
</div>

<div class="container-fluid">
    <div class="row" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">

        <div class="col-sm-3 portal-card" style="border: 1px solid #ddd; padding: 15px; text-align: center; border-radius: 8px; width: 200px;">
            <i class="fa fa-university fa-3x" style="color: #2980b9;"></i>
            <h3>National Library</h3>
            <p>Physical Holdings</p>
            <a href="/cgi-bin/koha/opac-search.pl?limit=branch:NLP" class="btn btn-primary">Browse</a>
        </div>

        <div class="col-sm-3 portal-card" style="border: 1px solid #ddd; padding: 15px; text-align: center; border-radius: 8px; width: 200px;">
            <i class="fa fa-list-alt fa-3x" style="color: #27ae60;"></i>
            <h3>Sher Nowrooz Khan</h3>
            <p>Select Bibliography</p>
            <a href="/cgi-bin/koha/opac-search.pl?limit=branch:SNK" class="btn btn-success">Browse</a>
        </div>

        <div class="col-sm-3 portal-card" style="border: 1px solid #ddd; padding: 15px; text-align: center; border-radius: 8px; width: 200px;">
            <i class="fa fa-graduation-cap fa-3x" style="color: #8e44ad;"></i>
            <h3>Research Theses</h3>
            <p>Academic Papers</p>
            <a href="/cgi-bin/koha/opac-search.pl?q=itype:THESIS" class="btn btn-info" style="background:#8e44ad; border:none;">Explore</a>
        </div>

    </div>
</div>

Step 2: Adding Visual Style (CSS)

To make the cards "pop" and add a professional hover effect, go to Administration > System Preferences > OpacUserCSS and paste the following:

CSS Styles (OpacUserCSS) 
/* Sirah Hub Custom Styles */
.portal-card {
    transition: transform 0.3s, box-shadow 0.3s;
    background: #fff;
}
.portal-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #2980b9 !important;
}
.portal-card h3 {
    font-size: 1.1em;
    margin-top: 15px;
    font-weight: bold;
}
.portal-card p {
    font-size: 0.9em;
    color: #666;
}

Step 3: Changing the Logo

Since this is a specialized "Sirah Hub," replacing the generic Koha logo with a custom banner is recommended.

  • Go to Administration > System Preferences > opacsmallimage.
  • Enter the URL of your hub logo (e.g., a calligraphy icon or a custom title).
  • For a larger banner above the search bar, use the opacheader customization in the HTML tool.

Key Tips for Your Layout

  • The "Library" Link: The link /cgi-bin/koha/opac-search.pl?limit=branch:SNK works because the bibliography is treated as a "Library" (Branch). Clicking it filters records specifically to that source.
  • Mobile Friendly: The col-sm-3 and row classes ensure icons stack vertically on mobile devices.
  • Icons: We use FontAwesome (e.g., fa-university). Koha includes this library by default.

Summary Checklist

  • Branches Created: Ensure NLP, SNK, DRS, etc., exist in Library administration.
  • Item Types Created: Ensure THESIS and ARTICLE are set up.
  • HTML Updated: Paste branding code into OpacMainUserBlock.
  • CSS Updated: Add hover effects in OpacUserCSS.

Comments

Post a Comment

Popular posts from this blog

How to Link Calibre to Koha

Image
 Two steps are involved in linking Calibre with Koha Exporting books from Calibre Software.     1. Calibre > Convert books > Create a catalog of the books in your calibre library  2. Export the file as 'CSV'.  3. Choose the following columns: author_sort, authors, formats, isbn, id, languages, pubdate, publisher, series, tags, title, title_sort  4. id transform as            [URL]+[ #book_id= ]+[id]+[ &library_id=Calibre_Library&panel=book_details ]  e.g           http://192.168.10.6:8080/#book_id=6&library_id=Calibre_Library&panel=book_details   5. author_sort break into principal, 2nd and 3rd authors columns   6. Arrange columns as isbn, author_sort, 2nd auth, 3rd Auth, authors, title, publisher, pubdate, tags,id,LibraryName, Library Name Mapping  with marc Tags by marcedit using  as follows:      isbn > 020 ...
Read more

On-Screen Keyboard Urdu/Arabic/Sindhi

  On-Screen Keyboard Urdu Keyboard 1. Urdu: Koha > Administration > System Preferences > OpacCustomSearch Paste the following code here: <script type="text/javascript"> function WriteLetter(Letter) { textfield = document.getElementById("translControl1"); textfield.value = textfield.value + Letter; } function DisplayUrduKeyboardFunction () { x = document.getElementById("UrduKeyboard"); if (x.style.display == "none") { x.style.display = "block"; } else if (x.style.display == "block") { x.style.display = "none"; } } </script> <style type="text/css"> #divUrduKeyboardcontainer { } #DisplayUrduKeyboard { color: white; cursor: pointer; margin-left:2px; } #UrduKeyboard { height: 130px; } #FirstLine, #SecondLine, #ThirdLine, #FourthLine { text-align: center; height: 30px; } .UrduKey { font-size: 16px; font-weight: bold; color: #ffffff; background: #3498db; background-image: -webkit-linear-...
Read more

Koha Installation Commands

Installing Koha on the latest Ubuntu 24.04 (Noble Numbat) is a great choice for a modern, stable library system. While the commands in your text file are a solid foundation, Ubuntu 24.04 has some minor changes (like preferring MariaDB over MySQL and using modern keyring management) that we should account for. Here is a blog-style guide and the updated commands specifically optimized for Ubuntu 24.04 . 📚 How to Install Koha 24 on Ubuntu 24.04 LTS Koha is the world’s first open-source Integrated Library System (ILS), used by thousands of libraries globally. This guide will walk you through the terminal-based installation and initial web setup. Prerequisites A fresh installation of Ubuntu 24.04 LTS . A user with sudo privileges. An internet connection. Step 1: System Preparation Before installing anything, ensure your system is fully up to date. sudo apt update && sudo apt upgrade -y Step 2: Add the Koha Repository The Koha community maintains its own Debian-based repository. W...
Read more