Edit State/System Landing Pages: Color Selection

States/systems can create a customized, branded Transferology® landing page to help promote colleges and universities to prospective students. When navigating to Transferology through the system's referral link or badge, students will see the customized page (assuming it is published) instead of the CollegeSource-branded homepage.

States and systems must work with CollegeSource to collaboratively create the initial landing page. Once the landing page is in place, it will be maintained by users at the participating institutions with the State Coordinator role in the Lab and any other State Coordinators given access to edit the page. This article within Edit State/System Landing Pages: An Overview Guide explains how State Coordinators can adjust the colors used to customize select header text, background colors, buttons, icons, and borders within the page.

Before making changes to the landing page, please see Edit State/System Landing Pages: An Overview Guide. State Coordinators will need to determine whether to make changes to the landing page in its published or unpublished state. This article assumes that, if needed, the landing page has already been unpublished and will be republished afterward once changes are complete.

Articles in this series:

Customize the Transferology Landing Page
Create State/System Landing Pages: An Overview Guide
Edit State/System Landing Pages: An Overview Guide
Edit State/System Landing Pages: Color Selection

Overview
Primary Color
Secondary Color
Tertiary Color

Edit State/System Landing Pages: Information
Edit State/System Landing Pages: Links
Edit State/System Landing Pages: Landing Page Images
Edit State/System Landing Pages: SEO Optimization

Overview

Hex numbers of school colors are used to customize select header text, background colors, buttons, icons, and borders within the landing page.

The Primary Color fields are used to establish the color of the header text appearing on a white background and the background color of sections with white header/body text.
The Secondary Color fields are used to establish the color of the main buttons on the Transferology® homepage ("Sign up" and "Get started"), the background color for three custom resource links, various icons used throughout the page, and the border color for "Maps."
The Tertiary Color fields are used to establish the border color for the Participating institutions map.

Create State/System Landing Pages: Color Selection provides further details about the aspects of the landing page the color selections control.

State/system representatives can contact the appropriate Marketing department(s) to confirm hex code numbers.

Visit a sample Transferology® system landing page for a detailed look at how color selections appear on a state/system landing page.

Primary Color: Hex #00008b (dark blue).
Secondary Color: Hex #b94700 (orange).
Tertiary Color: Hex #013220 (dark green).

To make changes to the color selections:

Go to the School Profile menu.
Select Promote Your School.
Select the State/System Template tab.

Users can also navigate to Promote Your School via the How to promote your school hyperlink within the Profile Preview.

Users will be presented with a message asking for affirmation that the content of the landing page is not the responsibility of CollegeSource. Images, color, and text added to this page are the responsibility of the institution, state, or system to which the page belongs.
- Mark the checkbox in front of I agree and select Agree to continue.
Scroll down to the section labeled Color Selection.

Within the editor, users with the State Coordinator role will see the primary, secondary, and tertiary color hex numbers currently or last used within the landing page.

Primary Color

To adjust the primary color selection:

Navigate to the Primary Color hex code box and use the keyboard to remove the current hex code.
Type in a new hex code value.
- Hex codes are six characters, contain numbers 0-9, and letters a-f.

Primary color hex code box.

Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:

Field	Image	Description
lighten background		Select this button to lighten the text.
darken background		Select this button to darken the text.
Results		The sample text will adjust to reflect the hex code entered and any lightening or darkening of the text.
Accessibility Check		WCAG AA CollegeSource is committed to ensuring its products are accessible to all users. The company follows WCAG 2.2 Level AA standards when developing all products. The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF). A green checkmark indicates that the color selected meets this guideline. A red information icon indicates the color selected does not meet this standard. WCAG AAA A green checkmark indicates that the color selected meets WCAG AAA guidelines, which are higher than those required by CollegeSource. A red information icon indicates the color selected does not meet this standard. Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required.

Select the Preview Changes button at the top of the template to see how selections appear on the landing page.
Select Save Changes to save adjustments to the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the system. Doing so will make these changes visible to the public if the landing page has been published. Make sure to review changes via the Preview Changes button.
- Select Yes to proceed with saving changes.
- A confirmation will appear indicating that changes have been saved.

Secondary Color

To adjust the secondary color selection:

Navigate to the Secondary Color hex code box and use the keyboard to remove the current hex code.
Type in a new hex code value.
- Hex codes are six characters, contain numbers 0-9, and letters a-f.

Secondary Color hex code box

Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:

Field	Image	Description
lighten background		Select this button to lighten the buttons' background, icons, and borders.
darken background		Select this button to darken the buttons' background, icons, and borders.
Results		The button will adjust to reflect the hex code entered and any lightening or darkening of its background.
Accessibility Check		CollegeSource is committed to ensuring its products are accessible to all users. The company follows WCAG 2.2 Level AA standards when developing all products. The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF). A green checkmark indicates that the color selected meets this guideline. A red information icon indicates the color selected does not meet this standard. WCAG AAA A green checkmark indicates that the color selected meets WCAG AAA guidelines, which are higher than those required by CollegeSource. A red information icon indicates the color selected does not meet this standard. Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required.

Select the Preview Changes button at the top of the template to see how selections appear on the landing page.
Select Save Changes to save adjustments to the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the system. Doing so will make these changes visible to the public if the landing page has been published. Make sure to review changes via the Preview Changes button.
- Select Yes to proceed with saving changes.
- A confirmation will appear indicating that changes have been saved.

Tertiary Color

To adjust the tertiary color selection:

Navigate to the Tertiary Color hex code box and use the keyboard to remove the current hex code.
Type in a new hex code value.
- Hex codes are six characters, contain numbers 0-9, and letters a-f.

Tertiary Color hex code box

Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:

Field	Image	Description
lighten background		Select this button to lighten the buttons' background, icons, and borders.
darken background		Select this button to darken the buttons' background, icons, and borders.
Results		The button will adjust to reflect the hex code entered and any lightening or darkening of its background.
Accessibility Check		CollegeSource is committed to ensuring its products are accessible to all users. The company follows WCAG 2.2 Level AA standards when developing all products. The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF). A green checkmark indicates that the color selected meets this guideline. A red information icon indicates the color selected does not meet this standard. WCAG AAA A green checkmark indicates that the color selected meets WCAG AAA guidelines, which are higher than those required by CollegeSource. A red information icon indicates the color selected does not meet this standard. Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required.

Select the Preview Changes button at the top of the template to see how selections appear on the landing page.
Select Save Changes to save adjustments to the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the system. Doing so will make these changes visible to the public if the landing page has been published. Make sure to review changes via the Preview Changes button.
- Select Yes to proceed with saving changes.
- A confirmation will appear indicating that changes have been saved.