Javascript

Here is the code you will need in order to create a light gallery. You will need a thumbnail of the image you wish to use as well as the image. Place this code where you would like you gallery to appear. Here is an example followed by the code.

Example

Click on one of the images below.

Code Section

<div id="lightgallery">
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage1.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail1.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage2.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail2.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/LightGalleryImage3.jpg"> 
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail3.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage4.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail4.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage5.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail5.jpg" /> 
</a> 
<a href="/webstyle/sites/webstyle/files/inline-images/lightGalleryImage6.jpg">
<img src="/webstyle/sites/webstyle/files/inline-images/thumbnail6.jpg" /> 
</a>
</div>
<style type="text/css">#lightgallery img{
max-width: 175px;
padding: 5px;
}
</style>

Follow these steps to add a standard (non-expanding) link to a Jumbo Nav.

1. Create a custom block.
   
2. Choose Basic.
    
3. Title the block "Jumbo Nav Single Link Code"
    
4. Switch the Editor Text Format to "Full HTML", then select "Source"
   
   
5. Copy and paste the following code into the editor:

   <script>
     document.addEventListener('DOMContentLoaded', function() {
       let elements = jQuery("a.jumbo-link-toggle")
       for ( let i = 0; i < elements.length; i++ ){
         let href = jQuery(elements[i]).attr('href');
         if ( !href.startsWith( '#' ) ){
           jQuery(elements[i]).removeClass('jumbo-link-toggle').addClass('jumbo-link-single').off("click", "**");
         }
       }
     }, false);
   </script>
   <style type="text/css">a.jumbo-link {
     padding: 0.25em !important;
     margin:0 !important;
     font-size: 13px !important;
     }
     span.uccs-jumbo-hero-link {
       font-size: 14px !important;
     }
     /* For a stand alone link (When it does not open a link container) */
     a.jumbo-link-single {
       color: #757575;
       text-decoration: none;
       text-transform: uppercase;
       font-size: 15px;
     }
     a.jumbo-link-single:hover {
       color: black;
     }
     @media screen and (max-width: 576.98px) {
       a.nav-link.jumbo-link-single {
         padding-left: 1em;
         padding-right: 1em;
       }
       a.jumbo-link-single {
         color: rgba(0,0,0,0.8);
       }
     }
   </style>
   

   The Editor should look similar to the following image:
   

6. Save the block.

7. On the next page, uncheck "Display Title"

8. Under the drop-down for "Region" select "Post-Content"
   
    

9. Save the block.

10. Single links can now be added to the Jumbo Nav.

Find the Twitter account username

For example, The OIT Twitter page is https://twitter.com/UCCSOIT

So the Twitter account username is: UCCSOIT

The Javascript Twitter widget code is the following:

<p><a class="twitter-timeline" href="https://twitter.com/ACCOUNT_USERNAME?ref_src=twsrc%5Etfw">Tweets by ACCOUNT_USERNAME</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>
</p>

Using the OIT Twitter account as example, the code is the following:

<p><a class="twitter-timeline" href="https://twitter.com/UCCSOIT?ref_src=twsrc%5Etfw">Tweets by UCCSOIT</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>
</p>