Appearance

About the Appearance of Campus Cafe

Campus Café provides several ways to change the look and feel of the platform including the logo, colors, text/images that appears on select screens, the student portal and login screen.

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.

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.

Favorite 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 Café. The file must be saved in the .ico format and should be named favicon.ico

Set Global Colors Using 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

Permission #1232 is required to access this function.

1. Navigate 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 > reload data). If the colors do not change, clear your browser's cache.

Global Style using Cascading Style Sheets

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. 

Permission #1232 is required to access this function.

1. Navigate 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 refresh 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 Café that use that ID. There are some pages where Campus Café 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.

For example, the styling of the name of the individual on the Profile screen cannot be changed using the color customization screen. To change the name, update the h3 style. The below would seemingly change the font color to blue and the background to red. 

h3 {
  background-color: red;
  color: blue;
}

However, if this were to be implemented, the background would change to red, but the font color would not change because the class inherits from .info-main h3. To change the font and the background, use the below:

h3 {
  background-color: red;
}

.info-main h3 {
  color: blue;
}

If you need assistance identifying elements or writing CSS, many website design firms offer this service.

Changing Text That Appears on Specific Pages

Select Campus Café pages include character large objects (CLOBs). These CLOBs may be updated to include HTML, CSS, providing an opportunity to incorporate additional text and images on pages.

Permission #465 is required to access this function.

1. Navigate to Admin > Adjustable Text Maintenance
2. Next to the page to edit, click the pencil icon
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. Refresh the server cache by navigating to Admin > Refresh Data Cache > reload data.

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

  

Login Page

The LOGIN_PAGE CLOB under Admin > Adjustable Text Maintenance 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, refresh the server cache by navigating to Admin > Refresh Data Cache > reload data.

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 navigating 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 Page

The FERPA_MESSAGE CLOB under Admin > Adjustable Text Maintenance 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, refresh the server cache by navigating to Admin > Refresh Data Cache > reload data.

Entry Page (Student Portal)

The ENTRY_PAGE CLOB under Admin > Adjustable Text Maintenance controls the look of the screen all users without a default dashboard see after logging in to Campus Café 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, refresh the server cache by navigating to Admin > Refresh Data Cache > reload data.

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

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

1. Navigate to Admin > Appearance and Student Photos
2. Under Custom Images click Browse
3. Choose one or more images to upload
   Tip: To select multiple images, click and hold the the CTRL, SHIFT or Command key and select the photos
4. Click Upload images

Uploading Student Profile Photos

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

To set the file format, update Custom Control IMAGE_BIOS, Sequence 1, Parameter 2. 

1. Navigate 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)
   Tip: To select multiple images, click and hold the the CTRL, SHIFT or Command key and select the photos
4. Click Upload images

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

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

Permission #1232 is required to access this function.

1. Navigate 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
   Tip: To select multiple images, click and hold the the CTRL, SHIFT or Command key and select the photos
4. Click Upload images

Logout Page

Upon clicking the log out button, the user can be brought to a page of the institution's choice.

The page may be adjusted by navigating to Web App Config > LOGOUT_URL

Timeout Message

The message that appears when a user times out for inactivity may be adjusted by navigating to Admin > Adjustable Text Maintenance.

LOGIN_TIMEOUT_MSG controls what the message will appear when the user has timed out and is automatically returned to the login page. 

Admissions Portal (Application) Style

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