Below are the key areas where customizations can be made.
NOTE: While uConnect may look like a website, some elements cannot be changed to exactly match your institutional website branding, but we will do our best to match as closely as possible.
Top Ribbon
The top ribbon is the thin, top navigation bar on your uConnect platform.
What Can Be Changed | Information Needed |
Background Color | Hex Code (eg, #FFFFFF) |
Logo | .svg image or transparent .png image set to a width of 1500 px or larger |
Text Color and Menu Hover Colors (see 3) | Hex Code (eg, #FFFFFF) |
Header Space
This is the space found between the top ribbon and the main navigation. It typically holds your institutional logo and call-to-action buttons
What Can Be Changed | Information Needed |
Background Color | Hex Code (eg, #FFFFFF) |
Logo | .svg image or transparent .png image set to a width of 1500 px or larger |
Button Text and Text Color | Font name and weight (if applicable), hex code (eg, #FFFFFF) |
Button Color and Hover Color | Hex Code (eg, #FFFFFF) |
Header Navigation
This is the space found between below the header space and holds your main navigation.
Note: We only support horizontal menu layouts at this time.
What Can Be Changed | Information Needed |
Background color | Hex Code (eg, #FFFFFF) |
Main navigation font and text color | Font name and weight (if applicable), hex code (eg, #FFFFFF) |
Main navigation background hover and text color (see 1) | Hex Code (eg, #FFFFFF) |
Horizontal line color (see 2) | Hex Code (eg, #FFFFFF) |
Submenu background color (see 3) | Hex Code (eg, #FFFFFF) |
Submenu background hover and text color (see 4) | Hex Code (eg, #FFFFFF) |
Footer
This is the footer of your platform and can be viewed on all pages on your uConnect platform.
Note: You’re able to adjust the contact information, social media icons, and footer menus under Customize in the backend of the platform.
What Can Be Changed | Information Needed |
Background Color | Hex Code (eg, #FFFFFF) |
Colophone Row Background Color (see 1) | Hex Code (eg, #FFFFFF) |
Footer font and text color | Font name and weight (if applicable), hex code (eg, #FFFFFF) |
Footer hover text color | Hex Code (eg, #FFFFFF) |
Logo (see 2) | .svg image or transparent .png image set to a width of 1500 px or larger |
Social media buttons color and hover color | Hex Code (eg, #FFFFFF) |
Emails (Automated Alerts and Custom Emails)
uConnect can send branded emails under Engage in the backend of the platform.
NOTE: We cannot customize branding separately for custom emails versus automated alert digests. Branding will appear the same for both.
What Can Be Changed | Information Needed |
Header Image (see 1) | .png file, Recommended width 1200px |
Email background color (see 2) | Hex code (eg, #FFFFFF) |
Title, section, and paragraph text colors | Hex code (eg, #FFFFFF) |
Hyperlink color | Hex code (eg, #FFFFFF) |
Buttons background and text color (see 3) | Hex code (eg, #FFFFFF) |
“Manage preferences” call to action background and text color (see 4) | Hex code (eg, #FFFFFF) |
Footer background and text color (see 5) | Hex code (eg, #FFFFFF) |
Footnote text color (see 6) | Hex code (eg, #FFFFFF) |
“Hot Links” button background and text color (see 7) | Hex code (eg, #FFFFFF) |
Header and paragraph font | We cannot customize fonts. Current default options include:
|
Buttons
These are call-to-action buttons across the platform. They exist:
In the header space
As a button side widget
Call to action to view more content or open content from a preview.
What Can Be Changed | Information Needed |
Button Text and Text Color | Font name and weight (if applicable), hex code (eg, #FFFFFF) |
Button Color and Hover Color | Hex Code (eg, #FFFFFF) |
Fonts
These are the fonts to brand your platform. uConnect supports Google Fonts and custom font uploads in WOFF and WOFF2 formats.
There are different font styles and font-weight for every font. Choose the one that you think will be used on the website. Usually, a regular, regular italic, and bold font style is needed.
Generally, we look for a 400 (normal or regular, also called “book”) weight and a 700 (bold) weight. We also recommend an italic version of the 400 weight.
What Can Be Changed | Information Needed |
Heading Font (see 1) | Font name, weight, style, size, and hex code color |
Paragraph Font (see 2) | Font name, weight, style, size, and hex code color |
Button Font | Font name, weight, style, size, and hex code color |
Main Navigation Font | Font name, weight, style, size, and hex code color |
Footer Font | Font name, weight, style, size, and hex code color |
Colors
These are the default colors that are used to brand your platform.
Note: Colors and color combinations may need to be adjusted for accessibility reasons.
What Can Be Changed | Information Needed |
Default Heading Text Color (see 1) | Hex Code (eg, #FFFFFF) |
Default Paragraph Text Color (see 2) | Hex Code (eg, #FFFFFF) |
Button Color | Hex Code (eg, #FFFFFF) |
Main Navigation Color | Hex Code (eg, #FFFFFF) |
Footer Color | Hex Code (eg, #FFFFFF) |