CSS and JavaScript Code Library

/* Remove the home link selection from contact information */
#propertyRowborrower_branchcode {
display: none;
}
#borrower_branchcodeSelect {
display: none;
}

The default color of the ILS Message background is blue and controlled by the alert color in Themes & Layout.

To change the color of this message, use:

.ils-message {
    background-color: #FCF4A3;
}

In this example, I changed to a yellow hex but the hex can be updated as needed.

<script>
$( "#propertyRowborrower_sex.form-group" ).hide();
</script>

You can usually update the text on a field in Contact Information with Translation Mode in Aspen. 

For the related tool tips, you can use a JavaScript snippet such as:

<script>
if( $('#MyAccount-ContactInformation').length ) {
  $('label[for="borrower_initials"]').text('Pickup alias: ');
}
</script>

The label is the current field name and the text is what you would like to show instead.

<script>
$( "#propertyRowadditionalInfoSection.form-group" ).hide();
</script>

/* Hides the 'Reset Username' links in the user account menus */

div class header-menu-option
href="/MyAccount/ResetUsername"

div class myAccountLink
href="/MyAccount/ResetUsername"

<script>
/*** Hide Reset Username link in account menus ***/
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ResetUsername']" ).hide();
$( ".myAccountLink a[href='/MyAccount/ResetUsername']" ).hide();
</script>

/**** Hide alternate pickup locations ****/

#myLocation1 {
display: none;
}
#myLocation2 {
display: none;
}
label[for=”myLocation1”] {
display: none;
}
label[for=”myLocation2”] {
display: none;
}

/**** Hide checkbox for SMS on item check-in line ****/
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms5{
display: none;
}

/**** Hide ILL Ready / ILL Unavailable lines in messaging settings ****/

tr#messageType7Row {
display: none;
}
tr#messageType8Row {
display: none;
}

/**** Hide Auto Renewals line in messaging settings ****/

tr#messageType9Row {
display: none;
}

/*** Hide Hold Reminder line in messaging settings ***/

tr#messageType10Row {
display: none;
}

/*** Hide ILL Update line in messaging settings ***/

tr#messageType11Row {
display: none;
}

If you want to hide specific checkboxes in the rows, you can use CSS like this in the theme:

/**** Hide Do Not Modify checkboxes in messaging settings ****/

table#messagingTable.table.table-bordered.table-condensed.table-striped #none1{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none2{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none3{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none4{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none5{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none6{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none7{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none8{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none9{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #none10{
display: none;
}

If you want to hide the entire column, then you can add this javascript:

<script>
// Hide Do Not Notify column
$('th:contains("Do not notify")').hide();
$( "#messageType1Row td:nth-child(6)" ).hide();
$( "#messageType2Row td:nth-child(6)" ).hide();
$( "#messageType4Row td:nth-child(6)" ).hide();
$( "#messageType5Row td:nth-child(6)" ).hide();
$( "#messageType6Row td:nth-child(6)" ).hide();
$( "#messageType9Row td:nth-child(6)" ).hide();
$( "#messageType10Row td:nth-child(6)" ).hide();
</script>

Note: If you want to hid other columns, you can switch out the 6. For example, switching it to 5 would hide all the entire Digests Only column, switching to 2 would hide the entire Advance Notice column.

/**** Hide SMS Checkboxes in messaging settings ****/

table#messagingTable.table.table-bordered.table-condensed.table-striped #sms1{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms2{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms3{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms4{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms5{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms6{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms7{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms8{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms9{
display: none;
}
table#messagingTable.table.table-bordered.table-condensed.table-striped #sms10{
display: none;
}

/**** Hide SMS Provider Row in messaging settings ****/

#smsProviderRow {
display: none;
}

/**** Hide SMS Number Row in messaging settings ****/

#smsNumberRow {
display: none;
}

/**** Hide SMS Alert in messaging settings ****/

#smsNoticeRow {
display: none;
}

Hide ILL rows on messaging preferences

<script>
$( "tr#messageType7Row" ).hide();
$( "tr#messageType8Row" ).hide();
$( "tr#messageType11Row" ).hide();
</script>

/**** Change colors of arrow button underneath browse categories ****/
#more-browse-results {
background-color:#d35050;
color:#1890cc;
}

/**** Side scrolling arrows - Getting rid of background and making arrows blue ****/

#browse-category-picker .jcarousel-control-prev, #browse-category-picker .jcarousel-control-next {
    background-color: transparent;
    color: #004aad;
    font-size: 50px;
    border: none;
box-shadow: none;
}

/*Rounded Browse Category Buttons*/
div.jcarousel>ul>li{border-radius: 7px;}

horizontal-menu-bar-container {
padding: 0 !important;
}

You can get the browse category name quickly from the URL: https://catalog.darienlibrary.org/?browseCategory=d_trending In this example, you could put -d_trending:before

You can get the Font Awesome icon unicode from here:

 /* CSS for all Categories */
div#browse-category-carousel ul li {
    display: inline-block;
}
div#browse-category-carousel ul li:before {
    content: '';
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    padding-top: 8px;
    font-weight: bolder;
}
/* CSS for icons on specific categories */
#browse-category-picker li#browse-category-{BROWSECATEGORYNAME}:before {
    content: '\{unicode}';
}
#browse-category-picker li#browse-category-{BROWSECATEGORYNAME}:before {
    content: '\{unicode}';
}
#browse-category-picker li#browse-category-{BROWSECATEGORYNAME}:before {
    content: '\{unicode}';
}

Another related code snippet shared by another library:

div#browse-category-carousel.jcarousel ul li {
    display: inline-block;
}
div#browse-category-carousel.jcarousel ul li:before {
    content: '';
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    padding-top: 5px;
    font-weight: 900;
}
/* CSS for icons on specific categories */
#browse-category-picker li#browse-category-main_new_fiction:before {
    content: '\f005';
}

Note: This will only work with the free “regular” font awesome icons on this cheatsheet

/**** Change file icon to lighter font weight ****/
.menu-icon.menu-bar-option > i.fas.fa-file.fa-lg:before {
font-weight: 200;
}

/**** Change question-circle icon to lighter font weight ****/
a#help-menu-trigger.dropdown-toggle.menu-icon.menu-bar-option  > i.fas.fa-question-circle.fa-lg:before {
font-weight: 200;
}

/**** Increase font size for ‘Narrow Your Results’ ****/
#narrow-search-label.sidebar-label {
font-size: 14pt;
}

/**** Make "Where is it?" link larger ****/
.itemSummary a {
font-size: 18px;
font-weight: bold;
}

/* Larger font for My Account sidebar links */
.myAccountLink { font-size: 14px; }

/*** Increase Font Size for Interface Elements ***/

/* body, */
.facetTitle,
.sidebar-links .panel-body,
#descriptionPlaceholder,
#availabilityControl button,
.facetList .panel-title,
.panel-title {
    font-size: 16px!important;
}

#availabilityControl button {
font-weight: bold;
}

.related-manifestation-copies-message,
.result-value,
.result-label {
font-size: 14px;
}

.manifestation-format .btn,
.btn-group-vertical > .btn, .btn-group-vertical > .btn-group, .btn-group-vertical > .btn-group > .btn,
#results-sort {
    font-size: 13px;
}

.itemSummary {
    font-size: 14px;
    font-weight: bold;
    padding-top: 10px;
}

#availabilityControlContainer {
padding-top: 10px;
padding-bottom: 20px;
}

div#categoryValues.row {
display: flex;
  justify-content: center; 
align-items: center;
text-align: center;
}

.col-xs-6 .formatCategoryLabel {
text-align: center;
}

Here is another Code Snippet from a Library:

/*----------------------------------------*/
/* Default text styles                    */
/* Resetting the base font-size to        */
/* 62.5% sets it to 10px for most browsers*/
/* Rems are simple to calculate from here */
/* 10px = 1rem, 14px = 1.4rem, 20px = 2rem*/
/*----------------------------------------*/
html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
font-size: 1.6rem;
overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1.2;
}
h1, .h1 {
  font-size: 4rem;
}
h2, .h2 {
  font-size: 3.2rem;
}
h3, .h3 {
  font-size: 2.4rem;
}
h4, .h4 {
  font-size: 1.8rem;
}
h5, .h5 {
  font-size: 1.6rem;
}
h6, .h6 {
  font-size: 1.6rem;
}

.fa-search::before, .result-title {
    font-size: 2rem;
}

#more-details-accordion .panel-title h2, #more-details-accordion .panel-body, .result, .faceValue, .btn-sm, .btn-xs, .related-manifestation-shelf-status,  .sidebar-links .panel-body,  .facetValue, .panel-title, .adminSection .adminPanel .adminActionDescription, .btn-group-sm > .btn,  .adminSection .adminPanel .adminActionLabel, .btn, .form-control  {
    font-size: 1.6rem;
    font-weight: 400;
}

.small, .smallText,  .itemSummary, .breadcrumb.small, table.tablesorter, table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    font-size: 1.4rem;
}

/*------------------------------*/
/* Main menu                 */
/* turn off caps menu items */
/* set font-size and weight           */
/*------------------------------*/
#horizontal-menu-bar-container .menu-icon .menu-bar-label {
    text-transform: none; 
    font-size: 2.8rem; 
    font-weight: 600;
}

 .menu-section-left i, .menuToggleButton i.fa-bars, div.dropdown.menuToggleButton.accountMenu i, .menu-section-right i.fa-sign-in-alt {
    font-size: 2.8rem;
 }

 /* Search results forward and back carets*/
.search-results-navigation .fa-caret-right::before, .search-results-navigation .fa-caret-left::before  {
    font-size: 1.6rem;
}

Note: The example below is to make the text bold, but the text could be adjusted many other ways with this method. The text should be added directly into where the text is translated.

This is what it looks like adding the above in translation mode:

.manifestation-format > a.btn-primary {
font-size: 15px !important; }

.row.related-manifestation.grouped {
background-color:#68ffea;
}

.row.related-manifestation.grouped .row.displayed.striped-odd {
background-color:#68ffea;
}

.result-value > a {
  text-decoration: underline;
}

/**** Change color of Add to List button ****/

button.btn.btn-sm.btn-tools.addToListBtn {
background-color:#68ffea;
}

/*** change color of green status labels ***/
.label-success {
color: #c3dd52;
}

<script>
$(document).ready(function() {
   $("button#showOtherMarcHoldings").trigger('click');
});
</script>

<script
$("document").ready(function() {
    setTimeout(function() {
        $("div#holdings-section-In_this_library.accordion-body a.btn.btn-default.btn-sm").trigger('click');
    },5);
});
</script>

They wanted to show all copies by default when viewing a record

Note: the “In_this_library” portion of the div may be different depending on the library!

Here is a script that will expand "Other Locations" copies AND automatically click the "Show All Copies" button so that all copies from all locations are shown without having to click anything. This is in use on MCFLS (Milwaukee County).

/*** Request from ticket #127898 ***/

<script>
jQuery(document).ready(function() {
        $('#copiesPanel').addClass('active');

        const container = document.querySelector("#copiesPanelBody div.panel-body");
        const accordionGroups = container.querySelectorAll("div.accordion-group");

        if(accordionGroups.length > 1) {
          let otherLocationsGroup = accordionGroups[1];

          const header = otherLocationsGroup.querySelector('#holdings-header-Other_Locations');
          $(header).removeClass('accordion-heading');

          const toggle = header.querySelector('.accordion-toggle');
          $(toggle).removeClass('accordion-toggle');
          var dataset = toggle.dataset;
          for (var key in dataset) {
            toggle.removeAttribute("data-" + key.split(/(?=[A-Z])/).join("-").toLowerCase());
          }

          const section = otherLocationsGroup.querySelector('#holdings-section-Other_Locations');
          $(section).removeClass('accordion-body');
          $(section).removeClass('collapse');
        }
    }
);
</script>
<script>
$("document").ready(function() {
    setTimeout(function() {
        $("div#holdings-section-Other_Locations a.btn.btn-default.btn-sm").trigger('click');
    },5);
});
</script>

<script>
$( "#propertyRowcopyrightdate" ).hide();
$( "#propertyRowisbn" ).hide();
$( "#propertyRowpublishercode" ).hide();
$( "#propertyRowcollectiontitle" ).hide();
$( "#propertyRowplace" ).hide();
$( "#propertyRowquantity" ).hide();
$( "#propertyRowitemtype" ).hide();
$( "#propertyRowbranchcode" ).hide();
$( "#propertyRownote" ).hide();
$( "#propertyRowpatronreason" ).hide();
</script>

Use the Inspect tool in the browser to find the row/property ID

<script>
$(document).ready(function () {
$("#collectiontitle.form-control")
.replaceWith('<select id="collectiontitle" name="collectiontitle" class="form-control">' +
'<option value="None">None Specified</option>' +
'<option value="ADULT">Adult</option>' +
'<option value="JUVENILE">Juvenile</option>' +
'<option value="YOUNGADULT">Young Adult</option>' +
'</select>');
});
</script>

In this example, change Collection text input to a dropdown with collection codes as options

This is for some of the form fields that provide the "Yes" and "No" radio button options.

Reference: https://pcpls.aspendiscovery.org/MaterialsRequest/NewRequest and ticket #127371

The default selection is the "Yes" button. To change the default to "No":

<script>
var value = 0;
$("input[name=placeHoldWhenAvailable][value=" + value + "]").attr('checked', 'checked');
</script>

The "name" value comes from the "name" of the radio button group when you use the Inspector tool in your browser.

<script>
$(document).ready(function () {
$('#isbn.form-control').keyup(function() {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
});
});
</script>

In this example, they wanted to force users to only input numbers in ISBN field

<script>
$("#propertyRowitemtype option[value='BAGCOLLKIT']").css('display', 'none');
$("#propertyRowitemtype option[value='BOOKSTOGO']").css('display', 'none');
$("#propertyRowitemtype option[value='CIRCREF']").css('display', 'none');
$("#propertyRowitemtype option[value='DEVICE']").css('display', 'none');
$("#propertyRowitemtype option[value='EQUIPMENT']").css('display', 'none');
$("#propertyRowitemtype option[value='IMAGE']").css('display', 'none');
$("#propertyRowitemtype option[value='LIT']").css('display', 'none');
$("#propertyRowitemtype option[value='MAPS']").css('display', 'none');
$("#propertyRowitemtype option[value='NEWAUDIO']").css('display', 'none');
$("#propertyRowitemtype option[value='NEWBOOK']").css('display', 'none');
$("#propertyRowitemtype option[value='NEWVIDEO']").css('display', 'none');
$("#propertyRowitemtype option[value='PERIODICAL']").css('display', 'none');
$("#propertyRowitemtype option[value='REF']").css('display', 'none');
$("#propertyRowitemtype option[value='SD BOOK']").css('display', 'none');
$("#propertyRowitemtype option[value='SOUNDREC']").css('display', 'none');
$("#propertyRowitemtype option[value='VHS']").css('display', 'none');
</script>

In this example, they wanted to hide specific item types from their purchase request for one library only

<script>

$("#copyrightdate").attr('maxlength','10');

document.querySelector("label[for='copyrightdate']").innerHTML = "Publication Date (MM-DD-YYYY)";

$('#copyrightdate').on('input', function(){
    var filteredValue = this.value;
    $(this).val(filteredValue
      .replace(/(\d{0,2})\-?(\d{0,2})\-?(\d{0,4}).*/,'$1-$2-$3')
      .replace(/\-+$/, '')
      .replace(/(\d{2})\-?(\d{0,2})\-?(\d{4})/,'$1-$2-$3'))
});

const target = document.querySelector("div.form-group button[value='Submit your suggestion']");

target.addEventListener("click", submitClick, false);

function submitClick(event) {

let copyrightValue = $('#copyrightdate').val();
let noteValue = $('#note').val();

$('#note').val( noteValue + '\n\nPublication Date: ' + copyrightValue);

copyrightValue = copyrightValue.replace(/(\d{0,2})\-?(\d{0,2})\-?(\d{0,4}).*/,'$3')
$('#copyrightdate').val(copyrightValue);

this.form.submit();
}

</script>

In this example, publication date will be copied into notes field and the publication date field on the form will only pass the year value (Koha only accepts 4 digit value)

<script> // make the field required to force user to make a choice
$(document).ready(function () {
$('#propertyRowisbn').attr('required', 'required');
}
</script>

<script> // repurpose the label
if ( $('#propertyRowisbn').length ) {
    $('label[for="isbn"]').text('Audience: ')
    $('#isbn').replaceWith(`
      <select id="isbn" name="isbn" class="form-control valid" aria-invalid="false">
                <option value="">-- Choose --</option>
        <option value="Children">Children</option>
                <option value="Teen">Teen</option>
                <option value="Adult">Adult</option>
      </select>
    `);
}

// validate form so -- Choose -- option is not valid

const target = document.querySelector("div.form-group button[value='Submit your suggestion']");

target.addEventListener("click", submitClick, false);

function submitClick(event) {
var select = document.getElementById('isbn');

if (select.value == "") {
event.preventDefault();
    alert("You must choose an audience");
    return false;
  }
}

</script>

Reference: Fayetteville, ticket #127492

This snippet moves the Notes field below the "Reason for Purchase" field and adds some padding so there's space between the two.

<script>
$("#propertyRownote").appendTo("#propertyRowpatronreason");
$("#propertyRownote").css("margin-top", "15px");
</script>

<script> // repurpose the place label
if ( $('#propertyRowplace').length ) {
    $('label[for="place"]').text('Interlibrary Loan ok (Yes or No): ')
    $('#place').replaceWith(`
      <select id="place" name="place" class="form-control valid" aria-invalid="false" required="required">
     <option value="" selected="selected"></option>
     <option value="Yes">Yes, try ILL</option>
     <option value="No">No, do not try ILL</option>
      </select>
    `);
}
</script>

/**Hide Materials Request Notice**/
div#materialsRequestSummary {
display: none;
}

<script>
$(document).ready(function () {
$('#itemtypeSelect').attr('required', 'required'); // make the select actually required to force user to make a choice

$('#itemtypeSelect').prepend(`<option value="" disabled>None</option>`); // this prepends the new option at the top of the list

$('#itemtypeSelect').find('option').each(function(){

if ($(this).val() === '') { // cycle through the options in the select to find the right option

$(this).attr('selected',true); // add selected attribute so that this option is always selected first

}

});

});

</script>

Remove box:

div#materialsRequestSummary {
display: none;
}

Make background clear:

div.materialsRequestExplanation {
background-color: transparent;
}

Remove ILL information (might be used for a self-check or kiosk type set up):

/*Hide ILL Info*/
#illSearchResultsNote {
display: none;
}

/*Hide More ILL Info*/
#illSearchResultsFooter {
display: none;
}

Remove DPLA (might be used for a self-check or kiosk type set up):

/*Hide DPLA*/
#dplaSearchResults {
display: none;
}

/* --------- Use Sentence Case for Menu Links -------- */
#horizontal-menu-bar-container .menu-icon .menu-bar-label {
text-transform: inherit;
}

/*** Hide Certain Links in Account Dropdown ***/
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ReadingHistory'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/Fines'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/MyRatings'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/SuggestedTitles'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/Lists'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/LibraryCard'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/MyPreferences'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ContactInformation'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ResetPinPage'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ResetUsername'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/OverDriveOptions'],
#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/HooplaOptions'],
#account-menu.dropdown-menu.dropdownMenu a[href='/Search/History?require_login'] {
display:none;
}

The Javascript version of this (in case you need to apply to many libraries at once):

<script>
/*** Hide Certain Links in Account Dropdown ***/
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ReadingHistory']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/Fines']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/MyRatings']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/SuggestedTitles']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/Lists']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/LibraryCard']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/MyPreferences']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ContactInformation']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ResetPinPage']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ResetUsername']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/OverDriveOptions']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/HooplaOptions']" ).hide();
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/Search/History?require_login']" ).hide();
</script>

Delete/Add lines as needed.

**Don't forget! If it's something in Account Settings, you may also need to hide the links from inside the user account, not just the dropdown menu. That might look something like this:

<script>
/*** Hide Certain Links in Account Dropdown ***/
$( "#account-menu.dropdown-menu.dropdownMenu a[href='/MyAccount/ResetUsername']" ).hide();
$( ".myAccountLink a[href='/MyAccount/ResetUsername']" ).hide();
</script>

/**** Rounded corners for menu links *****/
#account-menu-dropdown {
border-radius: 10px 10px 0px 0px;
}

#browseLink {
border-radius: 10px 10px 0px 0px;
}

#homeLink {
border-radius: 10px 10px 0px 0px;
}

#header-menu-dropdown {
border-radius: 10px 10px 0px 0px;
}

a.menu-icon.menu-bar-option {
border-radius: 10px 10px 0px 0px;
}

/**** Change color of Administration Options menu panel ****/
#account-menu-label.sidebar-label.row {
background-color:#25160A;
}

/**** Rounded top corners for facets****/
#narrow-search-label.sidebar-label {
  border-radius: 15px 15px 0px 0px;
  Padding: 10px 10px;
}

<script>

document.querySelector('#moreResultsFromIllSystem button').setAttribute("onclick","window.open ('https://hmcpl.org/ill', '_self');");

</script>

<script>
$(document).ready(function(){
   $("#home-page-home-button a").attr("target", "_blank");
});
</script>

<script>
//---------- Account Settings panel open by default ----------//
document.getElementById("mySettingsPanel").className = "panel-collapse in";
$("#mySettingsPanel").parent().addClass("active");
</script>

Add this text for the URL in the menu link:

/AJAX/JSON?method=getHoursAndLocations" class="modalDialogTrigger menu-icon menu-bar-option

When clicked, this will open the same pop-up modal that clicking the Hours & Location link in the side menu does.

Example: Fallsburg Library (Ramapo)

/** Change background color of all placards **/

.placard {
background-color: #FFFFFF;
}

/** Change background of specific placard ** /

div#placard1.placard {
background-color: #FFFFFF;
}

You would need the specific id of that placard

.placard {
  border-width: 0;
}

.myButton {
    background-color:#004d71;
    border-radius:3px;
    border:1px solid #124d77;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Montserrat;
    font-size:13px;
    padding:6px 24px;
    text-decoration:none;
}
.myButton:hover {
    background-color:#ffffff;
        text-decoration:none;
}
.myButton:active {
    position:relative;
    top:1px;
}

This would go into the specific placard CSS

This code was created by MAIN to produce a More Like This placard for popular titles. This example uses the trigger word Fourth Wing.

Create a New Placard, give it a name, assign trigger words.

Add this to the body box <> source code updating the groupedworkID to the title you want more like this recommendations for (i.e. the grouped work ID of Fourth Wing) and replace any header text in the h2 style section:

<div hidden="hidden" id="placardGroupedWork">
ead36282-883a-ac78-2e14-16cc19e295a6-eng
</div>
<div hidden="hidden">
<h2 style="text-align: center;">More Like This Placard Test: Fourth Wing</h2>
<div class="jcarousel-wrapper moreLikeThisWrapper">
<div id="moreLikeThisCarousel" data-jcarousel="true"></div>
<a href="#" class="jcarousel-control-prev" aria-label="Previous Item" data-jcarouselcontrol="true" style="display: flex;">
<i class="fas fa-caret-left"></i></a>
<a href="#" class="jcarousel-control-next" aria-label="Next Item" data-jcarouselcontrol="true" style="display: flex;">
<i class="fas fa-caret-right"></i></a></div>
</div>

Add this to the css box:

a.jcarousel-control-prev, a.jcarousel-control-next {
    background-color: #2454b5 !important;
    color: whitesmoke !important;
    opacity: 80%;
    border-radius: 8px;
    margin-left: -16px;
    margin-right: -16px;
    width: 36px;
}

a.jcarousel-control-prev:hover, a.jcarousel-control-next:hover {
    background-color: #2454b5 !important;
    color: #49deed !important;
    opacity: 88%;
    border: solid 1px #49deed;
}

Add this as a JavaScript Snippet:

<script>
(function(){
var mltc = document.querySelector(".placard #moreLikeThisCarousel");
if (location.pathname == '/Union/Search' &&  mltc !== null) {
    var gwId = document.getElementById('placardGroupedWork').innerText;
    AspenDiscovery.GroupedWork.loadMoreLikeThis(gwId, true);
    var i = 0;
    var mltCheck = setInterval(function() { 
        if (mltc.innerHTML == "") {
            if (i == 8) {
                document.querySelector("section.placard").remove();
                clearInterval(mltCheck);
            }
            i++;
        } else {
            mltc.classList.add("jcarousel","horizontalCarouselSpotlight");
            AspenDiscovery.initCarousels();
            mltc.parentElement.parentElement.hidden = false;
            clearInterval(mltCheck);
        }
    }, 500);
}
})();
</script>

/** HIDE ELEMENTS IN SEARCH SOURCE MENU **/
#searchSource option[data-catalog_type='ebsco_eds'] {
display:none;
}

/**** Rounded corners for search box ****/
#horizontal-search-box.row {
  border-radius: 25px;
  Padding: 15px 15px;
}

Update with your library's URL:

<script>
$('div#horizontal-search-box').append('<div><a id="advancedSearch" href="https://{YOURLIBRARY}.aspendiscovery.org/Union/Search?view=list&showCovers=on&lookfor=&searchIndex=advanced&searchSource=local">Advanced Search</a></div>');
</script>

If the search bar is a darker color, add this to the CSS in the theme also:

#advancedSearch {
  color: white;
  margin-left: 35px;
}

/*Hide Sort by Rating in Dropdown*/
select#results-sort.input-medium option[value*="&sort=rating+desc"] {
display: none;
}

or 

//** HIDE SORT BY RATING in SEARCH WHEN LIBRARY ISN’T USING RATINGS **//

select#results-sort.input-medium option[value='/Search/Results?lookfor=&searchIndex=Keyword&sort=rating+desc&view=list&searchSource=local'] {
display: none;
}
select#results-sort.input-medium option[value='/Search/Results?lookfor=&searchIndex=Title&sort=rating+desc&view=list&searchSource=local'] {
display: none;
}
select#results-sort.input-medium option[value='/Search/Results?lookfor=&searchIndex=StartOfTitle&sort=rating+desc&view=list&searchSource=local'] {
display: none;
}
select#results-sort.input-medium option[value='/Search/Results?lookfor=&searchIndex=Series&sort=rating+desc&view=list&searchSource=local'] {
display: none;
}
select#results-sort.input-medium option[value='/Search/Results?lookfor=&searchIndex=Author&sort=rating+desc&view=list&searchSource=local'] {
display: none;
}
select#results-sort.input-medium option[value='/Search/Results?lookfor=&searchIndex=Subject&sort=rating+desc&view=list&searchSource=local'] {
display: none;
}
select#results-sort.input-medium option[value='/Search/Results?lookfor=&searchIndex=LocalCallNumber&sort=rating+desc&view=list&searchSource=local'] {
display: none;
}

//** HIDE MAGNIFYING GLASS NEXT TO SEARCH BAR AND RESIZE TO FILL BAR **//
#lookfor-label .fa-search {display:none;}

#searchForm #lookfor {width:97%;}

/*** change text color of search dropdowns ***/
.form-control {
color: #000000;
}

<script>
function setSelectedIndex(s, i)
{
s.options[i-1].selected = true;
return;
}

setSelectedIndex(document.getElementById("searchSource"),3);

</script>

Example, change the default search from in Library Catalog to in Library Website.

**where the number 3 is the position of the item in the dropdown menu you want to become the default

// ** REMOVE THE CHECKBOX IN SELECT INTERFACE **//

#rememberThis { display:none }
label[for="rememberThis"] {
display:none;
}

.exploreMoreBar {
  display: none;
}

//** REMOVE THE BACKGROUND FROM THE SELF REGISTRATION FORM **//

#selfRegDescription {
background-color: transparent;
}

//** REMOVE THE SELF REGISTRATION LINK FROM THE LOGIN BOX WHEN SELF REGISTRATION IS ENABLED **//
#loginForm #loginPasswordRow .help-block {
  display: none;
}

<script>
$( "p#selfRegUsername" ).hide();
</script>

<script>
$( "p#selfRegPassword" ).hide();
</script>

To hide this whole box (everything outlined in red):

Use this:

div#selfRegAccountInfo {
    display: none;
}

<script>
$( "p#selfRegBarcode" ).hide();
</script>

<script>
$( "div#accordion_Additional_Information" ).hide();
</script>

<script>
$(document).ready(function () {
$("#borrower_othernames")
.replaceWith('<select id="borrower_othernames" name="borrower_othernames" class="form-control">' +
'<option value="None">None Specified</option>' +
'<option value="She/Her">She/Her</option>' +
'<option value="Him/His">Him/His</option>' +
'<option value="They/Them">They/Them</option>' +
'</select>');
});
</script>

<script>
$(document).ready(function () {
$("#borrower_attribute_PrivExcepSelect").replaceWith('<input/>',{'type':'text', ‘id’:borrower});
});
</script>

To add a blank value to the dropdown use this code by substituting out the borrower_attribute value.

This is example is for signing up for a newsletter Yes, No and adding a blank as the default option.

<script>
$('#borrower_attribute_NEWSSelect').prepend('<option value="NONE" selected> </option>');
function submitClick(event) {
var select = document.getElementById('borrower_attribute_NEWSSelect');
}
</script>

To do this with a required field, use this code by substituting out the borrower_attribute value.

<script>
// Add default blank option to printed voter registration dropdown
$('#borrower_attribute_VOTESelect').prepend('<option value="NONE" selected> </option>');

// validate form so default blank option is not valid
const target = document.querySelector("div.form-group button[value='Register']");

target.addEventListener("click", submitClick, false);

function submitClick(event) {
var select = document.getElementById('borrower_attribute_VOTESelect');

if (select.value == "NONE") {
event.preventDefault();
    alert("You must inform the library of your printed voter registration preference.");
    return false;
  }
}
</script>

<script>
$( "div#propertyRowlibrarySection.form-group" ).hide();
</script>

<script>
$( "div#propertyRowborrower_title.form-group" ).hide();
</script>

<script>
$('#borrower_phone.form-control.required').on('input', function(){
    var filteredValue = this.value.replace('+1 ', '').match(/\d*/g).join('');
    $(this).val(filteredValue
      .replace(/(\d{0,3})\-?(\d{0,3})\-?(\d{0,4}).*/,'$1-$2-$3')
      .replace(/\-+$/, '')
      .replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'+1 $1-$2-$3'))
});
</script>

<script>
$('#SMSnumber.form-control').on('input', function(){
    var filteredValue = this.value.replace('+1 ', '').match(/\d*/g).join('');
    $(this).val(filteredValue
      .replace(/(\d{0,3})\-?(\d{0,3})\-?(\d{0,4}).*/,'$1-$2-$3')
      .replace(/\-+$/, '')
      .replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'+1 $1-$2-$3'))
});
</script>

+1 will be prepended to the phone number and dashes will be added as well. Users will not be able to enter their own special characters.

<script>
$('#borrower_phone.form-control.required').on('input', function(){
    var filteredValue = this.value.replace('').match(/\d*/g).join('');
    $(this).val(filteredValue
      .replace(/(\d{0,3})\-?(\d{0,3})\-?(\d{0,4}).*/,'$1-$2-$3')
      .replace(/\-+$/, '')
      .replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
});
</script>

Dashes will be added and users will not be able to enter their own special characters.

<script>
$('#SMSnumber.form-control').on('input', function(){
    var filteredValue = this.value.replace('1', '').match(/\d*/g).join('');
    $(this).val(filteredValue
      .replace(/(\d{0,10}).*/,'$1')
      .replace(/\-+$/, '')
      .replace(/(\d{10})/,'1$1'))
});
</script>

1 will be prepended to the phone number and only numeric characters will be allowed. Users will not be able to enter their own special characters.

<script>
$('#phone.form-control').on('input', function(){
    var filteredValue = this.value.match(/\d*/g).join('');
    $(this).val(filteredValue
      .replace(/(\d{0,10}).*/,'$1')
      .replace(/\-+$/, '')
      .replace(/(\d{10})/,'$1'))
});
</script>

Users will only be able to enter numeric characters and no special characters, limited to 10 characters.

<script type="text/javascript">
//-----------Create new div to put checkbox and text in-----------//
var div = document.createElement('div');

//-----------Create checkbox and set attributes-----------//
var x = document.createElement('INPUT');
x.setAttribute("type", "checkbox");
x.setAttribute("id", "PolicyCheck");

//-----------Create hyperlink text and set attributes-----------//
var label = document.createElement('label');
label.htmlFor = "PolicyCheck";
label.innerHTML = ' &nbsp <font color="#FF0000">Check here to indicate that you have read and agree to the </font> <a href="https://www.pueblolibrary.org/030201Library%20Accounts" target = "_blank" title="Privacy Policy">PCCLD Library Accounts Policy</a>.&nbsp <span class="label label-danger" style="margin-right: .5em">Required</span>';

//-----------Set target as Register button-----------//
const target = document.querySelector("div.form-group button[value='Register']");

//-----------Insert checkbox above Register button (target)-----------//
    //start by inserting a div so the checkbox is on a line above the button
target.parentNode.insertBefore(div, target); 

    //add checkbox
target.parentNode.insertBefore(x, div); 

    //add label (text and hyperlink)
target.parentNode.insertBefore(label, div);

//-----------Verify  checkbox is checked before allowing form submission-----------//
   //page loaded with disabled submit button
target.disabled = true;

   //toggle submit button enabled/disabled with checkbox
x.onclick = function() {
      if (x.checked) {
           target.disabled = false;}
      else {
          target.disabled = true;}
}
</script>

This will add a checkbox above the “Register”/”Submit” button on the self registration form. To customize the link/words edit the label.innerHTML line.

<script>
if ( $('#MyAccount-SelfReg').length ) {
    $('#borrower_surname, #borrower_firstname, #borrower_middle_name, #borrower_othernames, #borrower_address, #borrower_city').blur( function() {
        let this_value = $(this).val();
        this_value = this_value.toLowerCase()
        .split(' ')
        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
        .join(' ');
        $(this).val(this_value);
    });
    $('#borrower_email, #borrower_repeat_email').blur( function() {
        let this_value = $(this).val().toLowerCase();
        $(this).val(this_value);
    });
}
</script>

<script>
$("h1:contains('Register for a Library Card')").hide();
</script>

/* ----------- REMOVE BACKGROUND COLOR FROM SYSTEM MESSAGE ------------- */
#system-message-header {
background-color: transparent;
}

<script>
$("#system-message-header").appendTo("#horizontal-search-container");
</script>

Add a message in the Koha header when a library is launching their new Aspen catalog.

Put this in the Koha OPACUserJS and change out the text and the URL. 

$('#header-region').prepend('<div class="alert alert-warning">We are launching a new catalog! Get a sneak peek of our <a href="https://aspendiscovery.org/">New Catalog</a>.</div>'); 

//** ALIGN HEADER LOGO IMAGE TO THE RIGHT OF PAGE **//

#header-logo {
horizontal-align: right;
}

//** ALIGN HEADER LOGO IMAGE TO THE CENTER OF PAGE **//

#header-logo-container { 
width: 100%; 
text-align: center 
}

/**** Remove Logo Image Padding ****/
div#header-logo-container {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

/****Add Header Image Padding****/

div#header-logo-container {
padding-top: 50px;
}

/**** Remove Breadcrumbs ****/
.breadcrumb.small {
display: none;
}
.row.breadcrumbs {
display: none;
}

If you want to remove from a specific page, you can reference that with “body#WebBuilder-PortalPage-11” -or whatever the specific page ID is - example:

/**** Remove Breadcrumbs ****/
body#WebBuilder-PortalPage-2
.breadcrumb.small {
display: none;
}
.row.breadcrumbs {
display: none;
}

/**** Remove Browse (Book) Icon from Menu ****/
a#browseLink.menu-icon.menu-bar-option {
display: none;
}

/*move top of page button above Webchat widget*/
.top-link {
position: fixed;
bottom: 50px; }

/**** Don't display home (house) icon ****/
a#homeLink.menu-icon.menu-bar-option {
display:none!important;
}

If that doesn't work, try:

/**** Don't display home button ****/
a#browseLink {
display:none!important;
}

/*rainbow header!*/
div#horizontal-search-box.row{
background: linear-gradient(90deg, rgba(0,185,202,1) 0%, rgba(112,201,159,1) 50%, rgba(231,230,27,1) 100%);
}

div#header-wrapper.row{
background: linear-gradient(90deg, rgba(0,185,202,1) 0%, rgba(112,201,159,1) 50%, rgba(231,230,27,1) 100%);
}

Generate CSS here: https://cssgradient.io/

div#header-wrapper.row{
background: linear-gradient(90deg, rgba(0,185,202,1) 0%, rgba(112,201,159,1) 50%, rgba(231,230,27,1) 100%);
}

/*Add repeating background image*/
body {
background: url(INSERT YOUR IMAGE URL HERE);
}

#horizontal-search-container:before {
  content:""; 
 background: transparent linear-gradient(270deg, #6c97b0 0%, #6c97b0 100%) 0% 0% no-repeat padding-box;
  width: 200vw;
  position: absolute;
  margin-left: -50vw;
  height: 100%;
  z-index: -1;
  overflow-x: hidden;
}

div#page-header.container-fluid {
width: 80%;
margin: auto;
}

div#page-menu-bar.container-fluid {
width: 80%;
margin: auto;
}

div#horizontal-menu-bar-container {
border-bottom-width: 0px;
}

table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color:transparent !important;
}

/* Hide mini format icons from Recommendation System modals */
.formatIcons { display: none; }

<script>
$("#footer-custom-text").appendTo(".navbar-inner");
</script>

This is the footer text/images that are entered in Library System settings > Basic Display

Example: https://discovery.fultoncountylibrary.org/

/* hide footer area */
#page-footer { display: none; 
} 

<script>

$(document).ready(function(){
  $('#header-logo-container a').attr('target', '_blank');
});

</script>

/* Masquerade Mode Red Mask */
.fas.fa-theater-masks.fa-lg {
  color: red;
}

Code like this might be used for a Self-Checkout or Kiosk Mode set up

.result-title.notranslate { /* disable title links */
  pointer-events: none;
  cursor: default;
  text-decoration: none; 
  color: #44484a;
  } 

Code like this might be used for a Self-Checkout or Kiosk Mode set up

.result-value { /* disable author links */
  pointer-events: none;
  cursor: default;
  text-decoration: none; 
  color: #44484a !important;
  } 

/**** Remove Search Bar from Welcome Page ****/
body#WebBuilder-PortalPage-11 #horizontal-search-container {
    display: none;
}

Add this to JavaScript Snippets:

<script type="text/javascript">
// Get url suffix and make it an html ID on custom pages
var custom_page = $("body").attr('id');
if (custom_page = "WebBuilder-PortalPage") {
var get_url_suffix = window.location.pathname;
var create_html_id = get_url_suffix.replace("/", "customPageId-");
$("#main-content").attr('id', create_html_id);
}
</script>

It applies only to custom pages. It takes the URL suffix (in my case /home) and makes that a unique HTML ID. It overwrites the ID of #main-content with the new ID.

Then in CSS apply the background color to this specific custom page:

#customPageId-home {background-color: #dedede;}

Select library location from dropdown list on web builder page

For Franklin County’s web builder pages, ex: https://discovery.fclspa.org/coyle

<script>
var h2 = document.querySelector('div[role="main"] h2');
h2 = h2.innerText;

var select = document.getElementById("selectLibrary");
for(var i = 0;i < select.options.length;i++){
    if(select.options[i].label == h2 ){
        select.options[i].selected = true;
        AspenDiscovery.showLocationHoursAndMap();
    } 
}
</script>

Ex: https://discovery.fclspa.org/WebBuilder/ResourcesList

<script>
if (window.location.href.indexOf("ResourcesList") != -1) {
var block_to_insert ;
var container_block ;

block_to_insert = document.createElement( 'div' );
block_to_insert.id = 'power_eresource_footer' ;
block_to_insert.innerHTML = 'text goes here. Can also use html for formatting' ;

container_block = document.getElementById( 'main-content');
container_block.appendChild( block_to_insert );
}
</script>

Note: you need to add CSS to the theme setting if you want to style the div. In this case I used this so it wouldn’t fill the entire width of the page:

div#power_eresource_footer {
width: 80%;
margin: auto;
}

Where it says ‘/music’, insert the page path - this snippet will automatically open all menus on the page

<script>
jQuery(document).ready(function() {
      if (window.location.pathname == '/music') {
$('.customAccordionRow').addClass('active');
$('.panel-collapse').addClass('in');
}
});
</script>

Where it says the #Cell-#, insert the specific panels you want - this snippet will automaticaly open those menus on the page

<script>
jQuery(document).ready(function() {
$('#Cell-59-Panel, #Cell-61-Panel, #Cell-62-Panel').addClass("active");
$('#Cell-59-PanelBody, #Cell-61-PanelBody, #Cell-62-PanelBody').addClass("in");
});
</script>

Use the section color in closed panel background color

<script>
jQuery(document).ready(function() {
      if (window.location.pathname == '/WebBuilder/ResourcesList') {
$('.customAccordionRow').addClass('active');
$('.panel-collapse').addClass('in');
}
});
</script>

Use the section color in open panel background color

<script>
jQuery(document).ready(function() {
      if (window.location.pathname == '/WebBuilder/ResourcesList') {
$('.panel').addClass('active');
$('.customAccordionRow').addClass('active');
$('.panel-collapse').addClass('in');
}
});
</script>