Custom CSS

Prospectus Plus offers full support for custom CSS, empowering institutions to tailor the visual appearance of their digital prospectus to match their brand identity.

Applying Your Styles

To apply custom CSS:

• Submit your styles to the Prospectus Plus team.
• Once applied, you will receive a confirmation email.

Finding Elements You Can Re-Style

To identify which elements can be styled:

1. Open your application in Google Chrome.
2. Right-click on the element you wish to style.
3. Choose "Inspect" to open Chrome DevTools.
4. Review the HTML structure and associated CSS classes.

Best Practices

Usable CSS Selectors

Use stable class names and data attributes to ensure your styles persist across updates:

.dashboard-container { ... }
.nav-item { ... }
.sidebar { ... }
button[data-role="primary"] { ... }
#main-content { ... }

Classes to Avoid

Avoid using dynamically generated class names (often suffixed with hash-like characters), as these may change with each deployment:

.welcome_inner_hzcEx { ... }  /* Dynamic suffix */
.header_logo_7fGh2 { ... }    /* Dynamic suffix */

These are unstable and will likely break your styles when the application updates.

Advanced Styling Tips

CSS Specificity

Understand specificity to ensure your styles override default ones:

/* Higher specificity */
.sidebar .sidebar-item.active { ... }

/* Lower specificity */
.sidebar-item { ... }

Media Queries

Ensure responsiveness by using media queries:

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
  }
}

CSS Variables

To reference CSS variables:

1. Use Chrome DevTools.
2. Inspect an element.
3. Open the Computed tab and scroll down to view available variables.

Then use them like this:

.my-custom-element {
  color: var(--primary-color);
  background-color: var(--background-color);
}

⚠️ Do not override CSS variables. Always reference them. Overriding complicates future troubleshooting and maintenance.

Troubleshooting

Missing Classes

If appropriate classes are unavailable:

• Use broader selectors.
• Contact our support team to request additional CSS hooks.

Technical Requirements

• Submit a single, valid CSS file (not SCSS, LESS, or other preprocessors).
• Ensure all styles are contained in one file for ease of management.