| Table of Contents | ||
|---|---|---|
|
About the appearance of Campus Cafe
Campus Cafe provides several ways to change the look and feel of the platform including the logo, colors, text/images that appear on select screens, the student portal and login screen.
Prerequisites
None.
Required permissions
Module | Number | Description |
|---|---|---|
System Admin | 1232 | Change the header logo |
System Admin | 1232 | Colors |
System Admin | 1232 | Custom Cascading Style Sheets (CSS) |
System Admin | 465 | Custom text on select pages |
System Admin | 1232 | Upload custom images/photos |
System Admin | 435 | Set logout redirect page |
System Admin | 465 | Set timeout message |
Header logo
The logo that appears in the header bar may be changed. The logo must be saved in PNG file format and must measure 170 pixels wide by 70 pixels tall.
Permission #1232 is required to access this function.
Go to Admin > Appearance and Student Photos.
Under Header Logo click Browse.
Select the image from your computer to serve as the header logo.
Click Upload Logo.
Browser icon
The favorite icon that appears in a browser tab or when a visitor bookmarks a URL may be changed by submitting a support ticket to Campus Cafe. The file must be saved in the .ico format and should be named favicon.ico
Global colors using color customization screen
| Note |
|---|
Changes in the cascading style sheets (CSS) take precedence over settings on the Color Customization screen. |
...
General
Header Bar
Footer Bar
Buttons- primary, secondary, tertiary, danger, footer cancel, footer save, footer save and back, footer delete
Miscellaneous
...
Go to Admin > Color.
Clicking a button on the page will reveal a color palette to choose the color for that element. Alternatively, a hex code may be entered. The Color Customization page will change temporarily to the new colors to provide a preview. Changes permanently apply and change on other pages after running the Refresh Data Cache (Admin > Refresh Data Cache). If the colors do not change, clear your browser's cache.
| Widget Connector | ||
|---|---|---|
|
Global style using Cascading Style Sheets (CSS)
Cascading style sheets (CSS) provide more fine-grained control over the global style than the Color Interface. CSS allows changes to colors, fonts, font sizes, tables and other elements. Updating CSS is optional and requires knowledge of HTML and CSS.
| Note |
|---|
Changes in the cascading style sheets (CSS) take precedence over settings on the Color Customization screen. |
...
Go to Admin > Appearance and Student Photos.
Custom CSS: styles that apply to pages other than applications and inquiry forms.
Admissions Portal CSS: styles that apply to applications and inquiry forms.
Login CSS: styles that apply to the login page.
Click Save CSS.
You may need to clear your browser cache to see the changes.
...
It is important to start with a specific target, apply your CSS, and then assess the overall affect before proceeding as CSS styles have a hierarchy and can interplay with each other.
| Info |
|---|
Campus Cafe does not provide custom CSS or HTML design services. If you need assistance identifying elements or writing CSS, many website design firms offer this service. |
Text that appears on specific screens
Select Campus Cafe screens include character large objects (CLOBs). These CLOBs may be updated to include HTML and CSS, providing an opportunity to incorporate additional text and images.
Permission #465 is required to access this function.
Go to Admin > Adjustable Text.
Next to the page to edit, click the pencil.
In the Value box, enter text to appear on the page. The text may include HTML or CSS. HTML can reference photos stored on your web server or the Campus Cafe system if the photo is uploaded on the Appearance page. If including a full reference to an image, be sure to reference using https, not http to preserve the security of the page.
Click Save.
Go to Admin > Refresh Data Cache.
...
| View file | ||
|---|---|---|
|
Login screen
| Info |
|---|
If you use single-sign on such as Google Workspace or Microsoft Azure, you won’t use this page. |
...
WEBUSRNAME Sequence 1: Parameter 1 converts the case of the username and Parameter 2 controls if the username field is masked (hides the characters that are typed).
WEBPASSWRD Sequence 1 Controls configurations regarding the password including the password complexity.
FERPA screen
FERPA_MESSAGE under Admin > Adjustable Text controls the look of the screen users see immediately after logging in. (A permission controls whether the user sees this screen.) This CLOB is a self-contained HTML page that supports embedded CSS styling. The continue button will automatically appear below this CLOB and does not need to be added to the code.
To apply the changes, after saving the CLOB, go to Admin > Refresh Data Cache.
Entry page (student portal)
ENTRY_PAGE under Admin > Adjustable Text controls the look of the screen all users without a default dashboard see after logging in to Campus Cafe and agreeing to the FERPA information. (Assuming the FERPA screen is set in the user's permission group to display.) The entry page is most often used to display buttons, links and images relevant to students and applicants. (There are no dedicated student or applicant dashboards.) This CLOB is a self-contained HTML page that supports embedded CSS styling.
...
| View file | ||
|---|---|---|
|
Custom images
When updating text on select pages, you may reference images stored on any web server. To store the images within the Campus Cafe system, upload them first. Once uploaded, an image may not be deleted but may be overwritten by uploading an image with the same file name.
Permission #1232 is required to access this function.
Go to Admin > Appearance and Student Photos.
Under Custom Images click Browse.
Choose one or more images to upload. To select multiple images, click and hold the the CTRL, SHIFT or Command key and select the photos.
Click Upload images.
...
When users send an email through Campus Cafe, they can optionally choose a header and/or footer image. We recommend uploading images a maximum of 600 pixels wide by 100 pixels tall and a file size no larger than 3MB. The file name will show as the option when sending an email, so we recommend a using a file name that describes the image. Once uploaded, an image may not be deleted but may be overwritten by uploading an image with the same file name.Permission #1232 is required to access this function.
Go to Admin > Appearance and Student Photos.
Under Email Header Images or Email Footer Images click Browse depending on if you wish to add a header or footer image.
Choose one or more images to upload. To select multiple images, click and hold the the CTRL, SHIFT or Command key and select the photos.
Click Upload images.
Logout redirect page
Upon clicking the log out button, the user can be brought to a page of your institution's choice.
Go to Admin > Web App.
In Search enter LOGOUT_URL.
Next to LOGOUT_URL select the box.
Click Edit Selected.
In Value, enter the full web address of the page to bring the user to. Include https:// prior to the address. For example, https://www.yourschool.edu not www.yourschool.edu.
Click Update.
Go to Admin > Refresh Data Cache.
Timeout message
This message that appears when a user times out for inactivity.
Go to Admin > Adjustable Text.
In Search enter LOGIN_TIMEOUT_MSG.
Next to LOGIN_TIMEOUT_MSG, click the pencil.
In Value enter the message.
Go to Admin > Refresh Data Cache.
Admissions portal (application) style
Refer to the Admissions Documentation as the admissions portal (applications) has its own label CSS functions in the Admissions Portal Config and many CLOBs that can be used to change the look and feel of the admissions application.