FUTURE STUDENTS CURRENT STUDENTS PARENTS & FAMILIES ALUMNI & FRIENDS COMMUNITY & BUSINESS FACULTY & STAFF

How to Get There

On the right top of an app (one that belongs to you or you have permission to edit), there is a tiny wrench symbol. Click on that and then select Look and Feel (see image below).

Image of Look and Feel

What Can I Do Here?

Using Look and Feel, you can change the look of your text, your background, change margins and padding and put in your own CSS code.

Method One

The easiest way to change the name of your app, after it has been placed, is to simply click on the name of it (it should be the default description of what type of app it is, so Message Board would be named Message Board, etc) and type in what you would like to call it (see image below).

Image of Naming App

Method Two

The other way is to access Look and Feel (see above instructions). You will automatically land on the Portlet Configuration screen, where you can type the app's new name into the Portlet Title text-box, check Use Custom Title and click Save (see image below).

Image of Changing App name

Text

By clicking on the tab Text Styles, a new look can be given to the text of your application. You can select a different typeface, a new color for you text and play with various spacing choices (see image below). To change color, you need to either type in a hexadecimal color code or click the eyedropper symbol and, on the pop-up window, click on a color.

Image of Text Styles Screen

As you choose your choices, you should be able to see the changes previewed on the application beneath (see image below). To save your changes, click Save. To reset the text to default, click Reset.

Text Styles Preview

TIP
This Example

The application used in this tutorial is a message board. The look of your application may, naturally, look different as you edit its appearance.

 

TIP
Font Choice

Did you know that the easiest font style to read online are non-serif fonts like Calibri, Arial or Verdana?

 

Background Color

By clicking on the tab Background Styles, you can change the background color of your application. You can do this by either typing in a hexadecimal color or clicking on the eyedropper symbol and, on the pop-up window, clicking on a color. To save your color change, click Save. To reset the background color to the default, click Reset.

App Background Color

Image of Changing Background Color

TIP
Color

You can help your readers by making sure there is enough contrast between your background color and your text color. So dark color backgrounds look best with light colored text and vice versa.

 

TIP
Hexidecimal Colors?

Hexidecimal color codes are six letters or numbers that tell browser what color to show on the screen. Hexidecimal colors will look like this #822300 or like this #FCFBE3. If you decide to type your own color in, make sure you have a pound sign (#) before the code.

Some Websites with Hexidecimal color codes:

 

 

Margin & Padding

By clicking on the tab Margin and Padding, you can change the space between your app and other items on your page or your app and the page's edge and the space between the content of your app and the app's border.

Margin will control the space outside your application's edge and Padding will control the space inside your application's edge (see image below). The default is to set all sides of margin or padding equally but you can fine tune it by unblocking Same for All. You can also change the measurement from pixels to ems or percentages.

To save your changes, click Save. To reset the margins and padding to the default, click Reset.

Image of Margin & Padding

Advanced Styling

Clicking on the tab Advanced Styling will allow you to enter you to enter your own CSS Coding (see image below). Unless you have some knowledge of CSS, you should probably leave this option alone.

Image of Advanced CSS Styling