Customize Scroll Bars and Colors in Class Listing Tables (Advanced)
Objective
Customize the appearance of Class Listings Tables using HTML and CSS.
Solution
If you are familiar with HTML and CSS, you can customize the appearance of Class Listings Tables beyond the standard customization options.
‼️Contact a website administrator for help with for assistance with HTML and CSS. These examples demonstrate basic styling techniques and can be expanded using standard web design practices.
Mini Scrollable Table
Wrap the Class Listings Table code in a <div> element to display the table within a fixed-size scrolling area.
This example filters to Cat1=Ballet, hides the Description and Openings columns, and places the table inside a defined-size scroll of 300x300 pixels.
<div style="width:300px; height:300px; overflow:scroll">
<script type="text/javascript" src="http://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=XXXXXX&Cat1=Ballet&hidecols=Description,Openings"></script>
</div>Change Table Colors and Fonts
Apply CSS styles to a <div> element to change the background color and font styling of the table.
This example, we adding the background color #D8BFD8. Â
<div style=background-color:#D8BFD8;>
<script type="text/javascript" src="https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=XXXXXX
&Cat1=Ballet&hidecols=Description,Openings"></script>
</div>For a complete list of special effects parameters, see Advanced Class Listings Table query strings.Â