Digital Exhibits Guide

Here are a variety of customizations you can make in Scalar using Cascading Style Sheets (CSS). All pieces of code contain a short of explanation of what they do in commented out CSS (any text that starts with /* and ends */). The following line contains the CSS code. Both lines can be copy/pasted into the Custom Style text box that can be found in the Book Properties of your Dashboard.

There is also an image illustrating what each piece of code does. Since these examples are all suppressing something specific, they use the CSS display:none property to do so.

I. Login menu and Help

/* Get rid of login menu */

#userMenu {display:none}

 

/* Get rid of help */

#ScalarHeaderHelp {display:none}

 

II. Captions across carousels

/* Get rid of title across image in carousel */

.carousel-caption {display:none}

 

III. Extra Navigation Menu

/* Get rid of extra navigation menu that let you browse the index, visualizations and more */

#navMenu {display:none} 

 

IV. Icon before linked image

/* First step to getting rid of icon that appears before linked image. This gets rid of the icon but leaves a gap between the link and the text before it */

.texteo_icon_carousel {

    background-image: none

}

 

/* Second step to getting rid of icon that appears before linked image. This gets rid of the gap that appears between the link and the text preceding it when you get rid of the icon */

.texteo_icon {

    background-repeat: no-repeat;

    background-size: 0px;

    padding-left: 0px;

    background-position: 0px;

}

 

V. Index Link

/* Get rid of link to index (which has all pages & media) */

#indexLink {display:none}

 

 

VI. Comments and Page Version

/* Get rid of comment option */

#incoming_comments {display:none}

 

/* Get rid of page version at the bottom of page */

#page-version {display:none}

 

VII. Page Count

/* Get rid of page count (Page 1/9) */

.path-breadcrumb {display:none}

CSS - Suppressing elements

Above you saw a few examples of how to get rid of things you might not want to display. If you want to do this with something that is not specified above, start on the page that has the element you want to get rid of. Then, right click on the part of the page you want to work with and then click on “Inspect” or "Inspect Element". This will give you information on whatever you want to suppress.

 

From here, look for "id=" or "class=". This is what we will use to suppress the element. From here, you can use the following CSS to build your code:

• #IDname lets you suppress ids
• .classname let you suppress classes
• Use {display:none} to suppress display
• /* Things that start with a forward slash plus a star and end up a star plus a backwards slash are comments! They have no effect on the code you use */

So an example would be:

/* Get rid of extra navigation menu that let you browse the index, visualizations and more */

#navMenu {display:none}

jQuery is a Javascript library that comes packaged with Scalar and makes it easy to manipulate different display elements on a page without changing the hard-coding of Scalar's programming. See the full documentation here: http://api.jquery.com/

All jQuery code for your Scalar site can go into the Styling -> Javascript section in the editing page or in the 'Custom Javascript' section of the Book Properties tab in the Scalar dashboard (for global edits to your site).

 

Beginner methods

One way to manipulate elements such as the tabs under the media elements would be to tie the manipulation action to some user-controlled event. For the purposes of the first CCC Digital Exhibit we wanted to change the tabs that appeared under the media element so the only ones that would show were the 'Description' and 'Details' tab. Because the triggering event for displaying the tabs was already tied to the 'mouse hover' event (i.e. they only appear when you roll over the object with your mouse), it was easy enough to also tie any changes to the tabs to this same event. Thus, the code used to get rid of unwanted tabs was:

 

                $(document).on('hover', '.mediaObject', function() {
                     $(".media_tab:nth-child(3)").css("display", "none");
                     $(".media_tab:nth-child(4)").css("display", "none");
                });           

What this code does is hide the third and fourth tabs ('Citations' and 'Source') from displaying under any media object on a page when the object is hovered-over. If instead you wanted to hide the 'Description' or 'Details' tabs, you would just change the 'nth-child(x)' portion of the above code to '1' and '2' respectively. If instead you wanted to keep all the tabs but change the name of the tab you could similarly do:

                $(document).on('hover', '.mediaObject', function() {
                     $(".media_tab:nth-child(2)").html("Metadata");
                     $(".media_tab:nth-child(4)").html("Source image");
                });

This code finds the second 'media_tab' object ('Details') and changes the inner-html text to say 'Metadata' instead. It also finds the fourth media tab ('Source') and changes it to say 'Source image' instead.

We can also change what's inside of the different tabs. For example, if we wanted to remove the 'dcterms' namespace prefix from each of the metadata fields under the default 'Details' tab we could do:

                $(document).on('hover', '.mediaObject', function() {
                     $(".media_metadata").each(function() {
                          $(this).html($(this).html().split("dcterms:").join(""));
                     });
                });

Here, we're telling jQuery to go through each media metadata field element and wherever it finds the string 'dcterms:' it's replacing it with nothing. Proceeding from this you can go through and find every namespace heading that might be present in the media object's metadata and remove those as well by adding extra rows to the code with 'dcterms:' replaced with 'art:', 'iptc:', etc.

There's much more that can be done with jQuery in Scalar but these are just a sampling of what the DETF has found to work so far.

Advanced methods

To trigger any changes to your site through jQuery you must attach your code to a page 'event'. The most common of these events is simply loading the page:

                $(document).ready(function() {
                     // insert some jQuery code to perform here
                ​});

However, because the majority of elements on a Scalar page are loaded dynamically through jQuery, manipulating these elements requires an event that occurs not only after the page loads but also after each of the Scalar-specific elements loads. Scalar's documentation (link: http://scalar.usc.edu/works/guide2/pageloadcomplete-event) suggests the custom 'pageLoadComplete' event:

                $(document).ready(function() {
                     $('body').bind('pageLoadComplete',function() {
                          // Do something to the page, such as change the "This page is tagged by" text
                              $('.has_tags').prev().text('This is the new text');
                     });
                 });           

However, if we want to do anything to media elements (including captions and tabs), we have to use a different Scalar-specific event that triggers once every media element on a page is loaded:

                $(document).ready(function() {
                     $('body').bind('mediaElementMediaLoaded', function(event, link) {
                          var mediaelement = link.data('mediaelement');
                          setTimeout(function() {
                                    // Find each media description box and do something to them

                 mediaelement.model.element.find('.media_description').each(function() {
                                    //insert any changes to media description field here
                                    var findingaid = $(".metadata[rel='dcterms:source']").attr('href');
                                    findingaid = "<a href='" + findingaid + "' target='_blank'>" + findingaid + "</a>";
                                    $(this).append('<br /> Finding aid: ' + findingaid);
                          });
                     }, 1);
                });
           });

The above code, while complicated-looking, simply finds each of the media elements on a page after they load, allowing you to manipulate anything that appears in the description for that item. In this case it takes the value given for the Dublin Core 'Source' metadata field for each item (in this particular case, a link to the finding aid for the collection) and adds it as a link under the media element.