Styling the Notifications Portlet

You have the ability to style notifications portlet to match the overall theme of your uPortal implementation. LESS is used to organize styles, which Maven outputs into CSS for the browser to render.

How the files are organized

In the webapp folder, there are three folders used for styling:

• webapp/css (where maven outputs the compiled LESS)
• webapp/less (where the main style files are listed)
• webapp/less/includes (files imported from the main style files, but not compiled themselves)

There's currently two functions performed by the notifications portlet: job postings and accordion. Accordion is the default function. This is a read-only view of notifications via a push system, which is organized into groups. The other function is job postings. This allows users to browse and apply for jobs online. The styles for each function is also separated into accordion.less and job-postings.less. Below is a walkthrough of the styling the different functions.

Accordion Function Styling

mixins.less

This file contains basic mixins that can be used when writing LESS. A definition of these functions can be found at LESS Elements. These mixins include basic functions for gradients, borders, drop shadows, border radius, box shadow, etc. Using these mixins provide a way of consolidating browser prefixes into one method called in the LESS. Some mixins require parameters to be paseed. Below is an example of a using the gradient method in LESS Elements:

.gradient(#6cb1ee, #4f85b2, #bce6ff);

compiles into CSS as:

background:   #6cb1ee;
background:  -webkit-gradient(linear, left bottom, left top, color-stop(0,  #4f85b2), color-stop(1,  #bce6ff));
background:  -ms-linear-gradient(bottom, #4f85b2, #bce6ff);
background:  -moz-linear-gradient(center bottom, #4f85b2 0%, #bce6ff 100%);
background:  -o-linear-gradient(#bce6ff, #4f85b2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bce6ff', endColorstr='#4f85b2', GradientType=0);

Full documentation on the mixins provided can be found at http://lesselements.com/test.html.

accordion.less

This file contains all the styling for the accordion functionality of the notifications portlet. At the top of the file are color variables: white, black, red, shades of gray and a primary color. The LESS below is wrapped in the .up {} class (for specificity). Any styling aspect of the accordion portion of the notifications portlet can be changed. For example, if you would like to resize the header text in the accordion dropdown, use browser developer tools (below uses Google Chrome) and find the element:

Then go into the accordion.less file and find the class, adding a larger font-size:

.up 
	.accordion {
		.notification-trigger {
			<...>
			&.active, &.hover {
				.gradient(@primary, rgba(193, 216, 225, 0.50), @white);
				h3 {
					background-image: url("../images/bullet-down.png");
					color: darken(@primary, 45%) !important;
					font-size: 18px;
				}
			}
		}
	}
} 

Which renders the following user experience:

Job Postings Function Styling

(Coming soon)