Interested in taking your branding beyond what can be done on the Visual Styles Page?

You can enter custom HTML/CSS into OneCampus to create a header and footer with your institutions look and feel!
Please be advised, certain types of HTML and CSS can expose your site to security risks so please use with caution.
Before you get started you will want to have your Institution’s logo, hex colors and any other Images you may want to include in your Header and Footer handy.

Edit your Header & Footer

1. To create a custom header and footer, start by clicking the Branding menu and then select Header & Footer.
2. Upload any Images you wish to include in your Header and/or Footer by clicking on the + Upload Images button on the right side of the screen. Images need to be in JPG or PNG format. Once you have uploaded your Images scroll to the bottom of the screen and click Save.
3. Return to the Header & Footer area by once again clicking Header & Footer from the Branding menu. You should now see links listed in the URL column (next to each picture). You will reference these links in your CSS code in the Header and Footer boxes in the next few steps.
   
   Please note: You also have the ability to upload your Application icon, Mobile icon, Favicon and more directly into the Application Icons module by clicking on Publishing>Brand Settings>Application Icons.
4. Insert the CSS for your Header into the Header text box. Looking for some sample code? The below code produces the Header you see in the screenshot following the code. Feel free to use this code as a starting point, if you like. In that case copy and paste the below into the Header box and then update the text highlighted in bold to be the URL of the Image you wish to display in your Header. (Note: make sure to look at the quick start guide about the application logos for other alternatives for header layout)
   

   <div id="branding-bar" class="hidden-xs">
     <div class="bar">
       <p class="campus">
         <a href="${rc.contextPath}/">
           <img alt="rSmart OneCampus" src="https://oneprd.s3.amazonaws.com/prd/demo/20151008T0214209141_rSmart-Logo-New-Final.png">
         </a>
       </p>
     </div>
   </div>

   

   Note: this isn’t pretty, but wanted to point out the difference between adding images to the header and the “rSmart University” logo which is actually done from the “Application Icons” settings page.

5. Then insert the CSS for your Footer into the Footer text box. Below you will find sample Footer code and its result. Feel free to copy and paste this code as a starting point for your Footer as well. Just remember to swap out the yellow text for the logo you would like in your Footer, the green text with your institution’s name, and the blue with your institution’s address.
   

   <a href="http://www.rSmart.com/" class="block-iu">
       <img src="https://oneprd.s3.amazonaws.com/prd/demo/20151008T0617216521_rS only_white.png" height="26" width="26" alt="">
   </a>
   <span class="line-break">Copyright 2016</span>
   <span class="line-break"><a href="http://www.rsmart.com/">rSmart</a></span>

   

6. Finally insert the CSS for your stylesheet in the CSS box. This is optional but further helps to customize your site’s look and feel. Your Marketing or IT groups may be able to assist you with this piece, if needed. Here is the CSS required for the Header and Footer in this document. It does things like sets the footer height, the color of the various bars, fonts, etc
   

   #branding-bar .bar {
       border-top: 8px solid #16adcc; /* Brand color secondary (accent color) */
     }
   
   footer {
       border-top: 6px solid #16ADCC; /* Brand color secondary (accent color) */
       background: #10323d; /* Brand color primary (base color) */
       font-family: Arial, Helvetica, sans-serif;
       font-size: 16px; /* Normalize font size */
       line-height: 18px; /* Normalize line height */
       margin: 0;
       padding: 5px 0 10px 0;
       text-align: center;
       color: #fff;
     }
   
   footer a {
       color: #fff;
       text-decoration: none;
     }

7. Click the Preview button to enter preview mode and see how your site will look with your branding choices. Clicking Exit Preview will take you back to the Header & Footer page to make changes or save.
8. Click Save at the bottom of the screen. You may need to do a hard refresh in order to see your changes.

Once saved, the custom HTML/CSS will populate the area above the white navigation bar for the header and the “band” that runs across the bottom of the screen for the footer.

OneCampus currently does not support changes to the area below the header and above the footer (where the tasks are located).

A few rules to follow to ensure you don't break your site (IMPORTANT)

• Header and Footer fields should consist of nothing but completely formed and enclosed HTML.
• There should be no javascript in the header, footer, or CSS fields. Use of javascript is at an institution's own risk.
• Elements in the header and footer field should have institution-specific class names and identifiers to avoid conflicts with core system identifiers and class names (for example: IUHeader, UMDFooterLogo, etc)
• There should be no style elements in the header or footer, all stylesheet entries should go in the CSS field.
• Customizing core CSS is not supported by rSmart. - For example. Changing fonts, colors, or layout of the tasks can have deleterious effects, especially during system upgrades.
• Do not reference or import external CSS files. Any CSS you need should be copied into the CSS field within OneCampus. Accessing external CSS files will often result in layout corruption.

Best Practices

• Please ensure that any scripts or CSS are written and tested by technical staff familiar with the W3C standards for scripting.
• Testing of advanced CSS should be done in a sandbox environment before applying it to your production site. If you would like more information about how to gain access to a sandbox environment, please email support@rsmart.com.
• Please store master copies of your custom branding (Header/Footer/CSS) independent of OneCampus for change-control and reference purposes.

Javascript Libraries used in the system

NOTE: It is critical to not import alternate version of these. rSmart cannot support your tenant effectively when you use custom javascript code.

• Angularjs v1.6.3
• jquery Mocjax v2.0.1
• less v2.4.0
• typeahead v0.9.3
• Twitter BootStrap v 3.0.0
• jquery UI touch Punch 0.2.2
• less min v.2.1.0
• jquery file upload plugin 5.31.6
• jasmin-fixture v 1.0.7
• jquery UI Widget 1.10.3
• moment v2.0.0
• jquery dotdotdot v 1.7.3
• jquery v2.1.1
• spectrum colorpicker v1.1.1

• Header & Footer _ CSS - Quick Start Guide.pdf300 KB

Updated July 24, 2024 22:50