Create Institution Landing Pages: Color Selection

An institution can create a customized, branded Transferology® landing page to help promote the college or university to prospective students. When navigating to Transferology through the institution's referral link or badge, students will see the customized page (assuming it is published) instead of the CollegeSource-branded homepage. This article, within Create Institution Landing Pages: An Overview Guide (see Related Articles), explains how School Admins can customize select header text, background color, foreground color, buttons, icons, and borders within the page.

In this article:

Text Color
Section 2 Background and Foreground Colors
Secondary Color
Tertiary Color

As noted above, School Administrators can enter the hex numbers of school colors to customize select header text, background color, foreground color, buttons, icons, and borders within the landing page.

School Administrators can contact the institution's Marketing department to confirm hex code numbers.

Text Color

The Text Color field is used to establish the color of the header text appearing on a white background.

By default, a hex code of #000000 (black) is entered. If not changed, this will be the primary color that displays upon publication of the page.

To input the text color selection:

Use the keyboard to remove the default hex code number from the Text Color hex code box.
Enter a hex code number in its place.

Hex codes are six characters, contain numbers 0-9, and letters a-f.

When previewed, the landing page will reflect the text color entered.

Example of area displaying text color within institution landing page. — Select to see a larger version.

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 hex code indicating that WCAG AA accessibility standards are required.

Visit a sample Transferology® institution landing page for a detailed look at how changes to the primary color appear on an institution landing page. Hex #00008b (dark blue) is the text color used in the example.

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 work on the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the institution. 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.

Section 2 Background and Foreground Colors

The Section 2 Background Color field sets the background color of the section on the landing page that advertises the relationship between the institution and Transferology®.

The Section 2 Foreground Color field sets the text and button color in this section.

Section 2 Background Color and Section 2 Foreground Color selections within the Institution Template Editor, as described above. — Select to see a larger version.

By default, a hex code of #e81f10 (red) is entered as the Section 2 Background Color. A hex code of #FFFFFF (white) is the default Section 2 Foreground Color. If not changed, these colors will display upon publication of the page.

To input the Section 2 color selections:

Use the keyboard to remove the default hex code number from the Section 2 Background Color hex code box.
Enter a hex code number in its place.

Hex codes are six characters, contain numbers 0-9, and letters a-f.

Repeat these steps for the Section 2 Foreground Color.

When previewed, the landing page will reflect the color entered.

Example of area displaying section 2 background and foreground colors within the institution landing page. — Select to see a larger version.

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 hex code indicating that WCAG AA accessibility standards are required.

Visit a sample Transferology® institution landing page for a detailed look at how changes to the Section 2 colors appear on an institution landing page. Hex #008080 (teal) is the background color used in the example; Hex #FFFFFF (white) is the foreground color.

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 work on the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the institution. 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

The Secondary Color fields establish the color of the main buttons on the Transferology® homepage ("Sign up" and "Get started") and icons throughout the page.

By default, a hex code of #0090b0 (blue) is entered.

To input the secondary color selection:

Use the keyboard to remove the default hex code number from the Secondary Color hex code box.
Enter a hex code number in its place.

Hex codes are six characters, contain numbers 0-9, and letters a-f.

Example of area displaying secondary color text change within institution landing page. — Select to see a larger version

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		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.

Visit a sample Transferology® institution landing page for a detailed look at how changes to the secondary color appear on an institution landing page. Hex #b94700 (orange) is the secondary color used in the example.

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 work on the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the institution. 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

The Tertiary Color fields establish the border color of the infographics on the Transferology® homepage ("Quick facts", map location).

By default, a hex code of #0090b0 (blue) is entered.

To input the tertiary color selection:

Use the keyboard to remove the default hex code number from the Tertiary Color hex code box.
Enter a hex code number in its place.

Hex codes are six characters, contain numbers 0-9, and letters a-f.

Example of area displaying tertiary color text change within institution landing page. — Select to see a larger version

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		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.

Visit a sample Transferology® institution landing page for a detailed look at how changes to the tertiary color appear on an institution landing page. Hex #4a584b (dark green) is the tertiary color used in the example.