OneCampus Help Center

Find answers fast: Ask a question, search for keywords, or explore articles below.

Search

Visual Styles - Quick Start Guide

Want to make your OneCampus instance look a little more personalized?

The Visual Styles module allows you to customize elements such as the theme, the color and fonts of text and the color and border radius of buttons that appear within your OneCampus instance. You may want to consult with the folks on your web services team to find out the exact hex colors you should use here to match your institution’s colors. There are also many websites such as http://www.colorhexa.com that you can use to look up specific hex colors as well.

 

Update your Visual Styles

  1. To begin, click the Branding menu, then select Visual Styles.
  2. Select a Main Page Theme from the Theme drop down menu. [Optional]
    • Choices include Classic or Elemental.
      • If the Elemental theme is selected, please note that we will default the following values in these specific fields. We only update these fields if they are empty. We will not override any values that you have previously assigned.
        • Primary Brand Colors > Danger = #00A8C2
        • Primary Brand Colors > Info = #00A5C3
        • Text > Body Font Family = Lato', sans-serif
        • Header > Background Color = #FFFFFF
        • Header > Text Color = #000000
        • Miscellaneous > Main Content Background Color = #F8F8F8
        • Tile Icons > Favorite Filled Icon Color = #ff0000
        • Tile Icons > Information Icon = info-circled-2
  3. Update the fields below as necessary to change the colors, fonts, backgrounds and border radius’ of the text and buttons that appear within your OneCampus tenant.

    Primary Brand Colors

    • Primary - Changing this field will dictate the hex color for all of the following buttons:
      • “Edit” button throughout the application
      • “Changes Pending Approval” button within Maintain Tasks
      • “View to Approve / Decline” button within Manage Submitted Tasks
      • “Approve” button within Manage Submitted Tasks>View to Approve/ Decline
      • “More Details” button within Recent Comments
      • “Respond” button within Recent Comments>More Details
      • “Add Selected” button within Maintain Tasks>Choose Tags
      • “OK” button within Maintain Tasks>Choose Tags
      • “Submit” button throughout the application
      • Field text number counters button within Send Feedback Pop up
      • “View” button within View Feedback
      • “View” button within Task Support
      • “View” (Publishing>Task Settings>Maintain Tasks>View Comments)
      • “Update” (Publishing>Advanced Settings>Maintain Settings)
      • “Close” (Publishing>Task Settings>Task Support>Task Details)
    • Success - Changing this field will dictate the hex color for all of the following buttons:
      • Sign in Button
      • “+New” buttons throughout the application. (For example, “+New Task”)
      • “+ACL” button within Maintain Publishers>+New Publisher
      • “Preview” button within Alerts>+New Alert
      • “View History” button within Recent Comments
      • “Resolve” button within View Feedback>View
      • “+Upload Images” button throughout the application
      • “+Link Image” button within Maintain Tasks>+New Task
      • “+Link a video” button within Maintain Tasks>+New Task
      • “Choose Tags” button within Maintain Tasks>+New Task
      • “View Comments” button within Maintain Tasks
      • “Save” button throughout the application
      • “Start” button throughout the application
      • Positive Feedback rating meter bar
    • Info - Changing this field will dictate the hex color for all of the following buttons:
      • "Export” buttons throughout the application
      • “View Tasks” button within Maintain Categories
      • Field text number counters (Visual Styles Page)
    • Warning - Changing this field will dictate the hex color for all of the following buttons:
      • “Remove” button throughout the application
      • “Add Alt Text” Approve & Edit Task Definition Pages
      • “Deactivate” button within View Comments>View>More Details
      • Pencil icons for “edit”
      • “View Flagged Comment History” button within View Flagged Comments
    • Danger - Changing this field will dictate the hex color for all of the following buttons:
      • “Cancel” button throughout the application
      • “A Category is required” button within Maintain Tasks>+New Task
      • “-Delete” button within Edit & Approve Task Definitions
      • “X” button throughout the application
      • “Delete” button throughout the application
      • Trash can icons throughout the application
      • Magnifying Glass icons throughout the application
      • Tag Colors (Task details page)
      • Respond to comment arrows (Task details page)

    Text

    • Body Font Family - This field controls the font family used for all of the main body text. The default font is Helvetica Neue, Helvetica, Arial, sans-serif.
    • Heading Font Family - This field controls the font family used for all headings. The default is for inherit, which means it will inherit whatever font style is used for the body font, unless otherwise specified.
    • Tile Title Font Family - This field controls the font family used for all Task Tile Titles. The default is for inherit, which means it will inherit whatever font style is used for the body font, unless otherwise specified.
    • Text Color - This field controls the color for the main text. The default color is @gray (#555).
    • Muted Text Color - This field controls the color for muted/light text. The default color is #666.
    • Link Color - This field controls the text color for links . The default is color is #B40404.
    • Link Hover Color - This field controls the color of links when hovering. The default is to darken the link color by %15.
    • Link Hover Decoration - This field controls the decoration for links when hovering. The default is an underline.

    Header

    • Background Color - This field controls the background color of the search bar in the header. The default is color is #333.
    • Text Color - This field controls the color of the text in the header. The default is color is #fff.
    • Search Button Color - This field controls the background color of the search button in the header. The default color is @brand-danger.

    Navigation bar

    • Text Color - This field controls the color of the text in the navigation bar. The default is color is #777.
    • Background Color - This field controls the background color of the navigation bar. The default is color is #fff.

    Reviews

    • New Review Background Color - This field controls the background color “flash” for new comments. The default color is #5bc0de.
    • Reply Border Color - This field controls the color of the border next to review replies. The default color is #ccc.

    Global Announcements

    • Header Background Color 1- controls the background color of the header for the first global announcement. The default color is #BC545F.
    • Header Background Color 2 - controls the background color of the header for the first global announcement. The default color is #44AADF.
    • Header Background Color 3 - controls the background color of the header for the first global announcement. The default color is #786BC5.
    • Header Background Color 4 - controls the background color of the header for the first global announcement. The default color is #00BB9A
    • Header Background Color 5 - controls the background color of the header for the first global announcement. The default color is #E39A41.
    • Header Background Color 6 - This field controls the background color of the header for the first global announcement. The default color is #60574D.

    Miscellaneous

    • Main Content Background Color - This field controls the background color of the main “store” area. The default color is #ebebeb.
    • Base Border Radius - This field controls the base border radius for items with rounded corners. The default here is 0px.
    • Large Border Radius - This field controls the border radius for items with large rounded corners. The default here is 0px.
    • Small Border Radius - This field controls the border radius for items with small rounded corners. The default here is 0px.

    Alerts

    • Alert Background Color - This field controls the background color of alerts on your page The default is color is #DC0031.
    • Alert Font Color - This field controls the font color in alerts. The default is color is #FFFFFF.
    • Alert Icon Color - This field controls the icon color in alerts. The default color is #FFFFFF.
    • Alert Link Color - This field controls the link color if an external link is used in an alert. The default color is #EEEF14.

    Targeted Notifications

    • Notification Header Color - This field controls the color of the notification header. The default color is #2D90C5.
    • Notification Header Font color - This field controls the color of the font in the header for notifications. The default color is #FFFFFF.

    Tile Icons

    • Favorite Empty Icon - This field controls the “empty version” of the icon that represents favorites on the task tile. The default empty icon is icon-heart-empty-2.
    • Favorite Filled Icon - This field controls the “filled version” of the icon that represents favorites on the task tile. The default filled icon is icon-heart-3.
    • Favorite Filled Icon Color - This field controls the color of the filled favorite icon. The default color is #ff207c.
    • Information Icon - This field controls the icon that represents “information” on the task tile. The default icon is icon-info-2.

  4. 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 Visual Styles to make changes or save.
  5. Click the Save button to save your Visual Styles. The page could take a minute to save as the CSS is compiling.

IMPORTANT: If you click Cancel, it will delete everything you’ve done up to this point.

Notes:

  • When inserting a new hex color into one of the fields listed above, please remember to precede your hex color with a “#”.
  • Please ensure you are using Web Safe Fonts on the visual styles page. Fonts need to be in the correct format in order to work properly. Please refer to a resource such as http://www.w3schools.com/cssref/css_websafe_fonts.asp for more information on Web Safe Fonts.
  • To change anything in the Header or Footer of your tenant, please first read the Quick guide called “Header & Footer/CSS"
  • To change the logo that appears on the main page of your tenant please go to Publishing>Brand Settings>Application Icons.

 

 

Related to

Updated

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request