Page Comparison

...

...

About the

...

appearance of Campus Cafe

Campus Café Cafe provides several ways to change the look and feel of the platform including the logo, colors, text/images that appears appear 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.

...

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

...

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:

...

Permission #1232 is required to access this function.

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

Permission #1232 is required to access this function.

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

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:

...

...

.

...

...

Text

...

that appears on specific screens

Select Campus Café pages 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 on pages.

Permission #465 is required to access this function.

1. Navigate Go to Admin > Adjustable Text Maintenance .

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

3. In the value 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 SaveRefresh the server cache by navigating .

5. Go to Admin > Refresh Data Cache.

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

Login

...

screen

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 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 navigating going to Admin > Custom Control Maintenance 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

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 go to Admin > Refresh Data Cache.

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é 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, refresh the server cache by navigating 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.

Permission #1232 is required to access this function.

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

...

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

4. Click Upload images

...

1. images

...

1. .

...

...

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 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
   Tip: . 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 the your institution's choice.

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

Timeout Message

...

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 may be adjusted by navigating .

1. Go to Admin > Adjustable Text

...

1. .

2. In Search enter LOGIN_TIMEOUT_MSG.

3. Next to LOGIN_TIMEOUT_MSG

...

Admissions Portal (Application) Style

...

1. , click the pencil.

2. In Value enter the message.

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