Appearance

Owned by Robert Lenk
Last updated: Jul 06, 2024 by Chris Barrett
7 min read

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

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.

  1. Go to Admin > Appearance and Student Photos.

  2. Under Header Logo click Browse.

  3. Select the image from your computer to serve as the header logo.

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

Changes in the cascading style sheets (CSS) take precedence over settings on the Color Customization screen.

The screen allows modification of the colors of many data elements within the Campus Café user interface (UI). Some of these include:

  • General

  • Header Bar

  • Footer Bar

  • Buttons- primary, secondary, tertiary, danger, footer cancel, footer save, footer save and back, footer delete

  • Miscellaneous

  1. Go to Admin > Color.

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

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. 

Changes in the cascading style sheets (CSS) take precedence over settings on the Color Customization screen. 

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

  2. Click Save CSS.

  3. You may need to clear your browser cache to see the changes.

Identifying CSS Classes and IDs

To reference the correct class or ID in a CSS file, you can use most browsers to identify a particular element. Right click and inspect the element. The CSS can then be applied to that ID and it will apply to any areas of Campus Cafe that use that ID. There are some pages where Campus Cafe has provided specific ID(s), so that you can affect only that page.

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.

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.

  1. Go to Admin > Adjustable Text.

  2. Next to the page to edit, click the pencil.

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

  4. Click Save.

  5. Go to Admin > Refresh Data Cache.

See the below document for commonly used/updated adjustable text fields.

Login screen

LOGIN_PAGE under Admin > Adjustable Text controls the look of the sign-on page. This CLOB is a self-contained HTML page that supports embedded CSS styling. To apply the changes, after saving the CLOB, go to Admin > Refresh Data Cache.

Key elements of the page are the username and password boxes, and the forgot password link.

Username and password boxes

<form name="LoginForm" action="login" method="post" _lpchecked="1"> <input type="text" name="user" id="user" placeholder="Username"> <input type="password" name="pwd" id="pwd" placeholder="Password"> <button type="submit" name="Login" id="login-btn" class="send" value="Login">Login</button> <input type="hidden" name="handler" value="auth"> </form>

 Forgot Password Link

<a href="https://<school URL>-web.scansoftware.com/cafeweb/login?handler=getUsername&option=emailpwd">Click here if you forgot your password.</a>

Login Page Username and Password Appearance

To control how usernames and passwords appear, update custom controls by going to Admin > Custom Control Maintenance. 

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

To apply the changes, after saving the CLOB, go to Admin > Refresh Data Cache.

Example HTML of a student portal with photos acting as buttons is attached to this article.

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.

  1. Go to Admin > Appearance and Student Photos.

  2. Under Custom Images click Browse.

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

  4. Click Upload images.

Student profile photos

Once uploaded, an image may not be deleted but may be overwritten by uploading an image with the same file name.

All student photos should be in the same file format. To set the file format, update Custom Control IMAGE_BIOS, Sequence 1, Parameter 2. 

We recommend square images not exceeding 500 pixels wide by 500 pixels tall with a file size no larger than 3MB. 

  1. Go to Admin > Appearance and Student Photos.

  2. Under Student Photos click Browse.

  3. Choose one or more images to upload - (Photos must be named as student's ID number). To select multiple images, click and hold the the CTRL, SHIFT or Command key and select the photos

  4. Click Upload images.

Custom email header and footer 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.

  1. Go to Admin > Appearance and Student Photos.

  2. Under Email Header Images or Email Footer Images click Browse depending on if you wish to add a header or footer image.

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

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

  1. Go to Admin > Web App.

  2. In Search enter LOGOUT_URL.

  3. Next to LOGOUT_URL select the box.

  4. Click Edit Selected.

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

  6. Click Update.

  7. Go to Admin > Refresh Data Cache.

Timeout message

This message that appears when a user times out for inactivity.

  1. Go to Admin > Adjustable Text.

  2. In Search enter LOGIN_TIMEOUT_MSG.

  3. Next to LOGIN_TIMEOUT_MSG, click the pencil.

  4. In Value enter the message.

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