Portal Style Sheets

You can brand the default CampusPortal™ theme by updating the style sheets. CampusPortal's flexibility enables you to change the colors of various elements throughout the theme to better align with your institutional brand and style guide.

When your Portal is hosted in a Anthology Cloud environment, your Portal administrator does not have access to upload branding files and cannot reset IIS either. Please contact Anthology Inc. Support (1-800-483-9106) to accomplish the tasks related to updating branding files or resource files for internationalization.

Updating brand elements in the default Portal style sheet

  1. Using a text editor such as Microsoft™ WordPad or Notepad™, open the portal style sheet bootstrap_custom.css from the following folder:

    CMCPortal\Public\global\css.

  2. It is always a good idea to create a back-up version of the original file, to use as a reference. Before editing anything, save a copy as original_bootstrap_custom.css. This will allow you to reinstate the default colors at any time should you need to do so.

  3. All of the variables are located at the very top of the bootstrap_custom.css file, and have comments to help guide you in applying colors to various portal elements:

    4. { 

--primary: #2c6ca6!important; 

/* used on: accent bar below page and tile titles, text link color, left menu hover border color, mobile menu button background color, open mobile menu bottom border, pop-up border on alerts/holds/appointments, active tab background color, content subheading text color, homepage carousel active item, landing page (pre-login) tile border on hover, registration bottom border, active tab bottom border color, border on class details box on schedule */ 
 

--secondary: #002546!important; 

/* used on: global button background hover state w/ white text, including quick links, logout, help buttons, section header text color on white or light gray background */ 
 

--accent:#ffc20e!important; 

/* used on: global button background default state w/ black text, mobile menu button hover background color, active left menu item right border, registration non-current step background color w/ black text, registration current term text on dark gray background, */  
 

--gray: #6c757d!important; 

/* used on: left menu primary links, left active submenu background color w/ white links, background of class details box on schedule, background on faculty portal student search box w/ white text */ 
 

--gray-dark: #343a40!important; 

/* used on: text color in table headers on white background */ 
 

--focus-color: #75bdb9; 

/* used on: focus ring around interactive elements when navigating via keyboard (WCAG) */ 
 

--success: #d9f7d5!important; 

/* used on: background color of success messages */ 
 

--info: #17a2b8!important; 

/* used on special CTA button background color (registration button for example), refresh button icon background, registration current step */ 
 

--warning: #fff5bf!important; 

/* used on: background color of important messages */ 
 

--danger: #dc3545!important; 

/* used on: background color of success messages */ 
 
--dark: #343a40!important; 

/* used on: panel heading background color w/ white text */ 
 

--font-family-sans-serif: 'Nunito Sans',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"!important; 

/* used on: main body text */ 
 

--font-serif: "Tiempos Headline", Georgia, serif!important; 

/* used on: header text */ 

}

  4. Update any HEX color values or RGBA values as needed in the appropriate locations. The !important tag is used to make sure any custom colors take precedence over the default theme’s colors.

  5. Any other customizations to the portal can be added to the end of this file. You can also use the variables noted above in any custom CSS rules you create. For example, if you’d like to change the color of the portal homepage tile titles from default dark gray to the primary color in your color palette, you could add the following snippet:

    6.   
				
.tiles .home_tiles .control-label { 

color:var(--primary); 

}

Updating the entire Bootstrap Theme

The entire portal runs on the Bootstrap framework (version 3.3.2 as of this writing). It is possible to edit the framework itself, inside the bootstrap.css file, though the primary theme styles, including positioning of various elements, element styles, etc. now live in the updated main.css file.

It is not recommended to update either the bootstrap.css or main.css files. Updating bootstrap.css is still an option but the majority of the theme styles now are located in main.css, including styles for features throughout the portal. Updating main.css is highly discouraged, as updating it may result in unexpected visual changes.