Manage Styles

Introduction

In the product it is possible to provide a customer stylesheet that will override the styling rules specified by default on the payer portal.

The Collections > Portal > Configuration page has a section titled “Manage Portal Stylesheet” that displays which stylesheet is currently in use, and allows a replacement to be uploaded through either dragging a css file onto the upload area, or clicking on the area, opening a file browser.

IMAGE OF MANAGE PORTAL STYLESHEET SECTION

Uploading a stylesheet overwrites the previous version.

There are several elements that can be styled using CSS, below is the default custom stylesheet, with the different elements

body {}

/* NAVIGATION STYLES */

#portalNavigation {}

#portalNavigation > .nav-item {

}

.portalNavigationLink, 
.portalNavigationLink:active,
.portalNavigationLink:link,
.portalNavigationLink:visited,
.portalNavigationLinkActive {}
.portalNavigationLinkActive {}

/* GENERIC BUTTON STYLES */

.btn {}

.btn-primary {}

.btn-outline-primary {}

/* MESSAGING STYLES */

#messagingMenu {}

.messagingMenuButtons > button {}

.messagingMenuButton {}

.messagingMenuButtons button.active {}

.messagingMenuButtonPrimary {}


#messagingInboxSidebar {}

#messagingInboxMessageView {}

.avatarFrame {}

/* DETAILS PAGE STYLES */

.currentActiveEmail {}

.currentActiveEmail:hover {}
.inactiveEmail {
}

/* CHARTING STYLES - DONUT */

.donut-section {}

.highlight {}

/* CHARTING STYLES - COLLECTIONS TIMELINE */

.past-payment {}

.future-payment {}

.collection-info-label {}
	.collected-title {}
	.collected-amount {}

Using a small amount of CSS knowledge we can change how the side menu is rendered:

#portalNavigation {
	background: rgba(12, 12, 12, 0.7) !important;
	color: #ffffff;
}

#portalNavigation > .nav-item {

}

.portalNavigationLink, 
.portalNavigationLink:active,
.portalNavigationLink:link,
.portalNavigationLink:visited,
.portalNavigationLinkActive {
	background-color: transparent !important;
	color: #ffffff !important;
	text-transform: uppercase;
}
.portalNavigationLinkActive {
		font-weight: bold;
		text-decoration: underline;
	}

Change the buttons entirely:

/* GENERIC BUTTON STYLES */

.btn {
	border-radius: 0;
	text-transform: uppercase;
}

.btn-primary {
	background-color: #000000;
	text-transform: uppercase;
}

.btn-outline-primary {
	border-color: solid 1px #000000;
	color: #000000;
}

Or achieve some pretty drastic changes:

body {
	font-family: verdana;
	background-color: #ffffff;
	color: #000000;
}

/* NAVIGATION STYLES */

#portalNavigation {
	background: rgba(12, 12, 12, 0.7) !important;
	color: #ffffff;
}

#portalNavigation > .nav-item {

}

.portalNavigationLink, 
.portalNavigationLink:active,
.portalNavigationLink:link,
.portalNavigationLink:visited,
.portalNavigationLinkActive {
	background-color: transparent !important;
	color: #ffffff !important;
	text-transform: uppercase;
}
.portalNavigationLinkActive {
		font-weight: bold;
		text-decoration: underline;
	}

/* GENERIC BUTTON STYLES */

.btn {
	border-radius: 0;
	text-transform: uppercase;
}

.btn-primary {
	background-color: #000000;
	text-transform: uppercase;
}

.btn-outline-primary {
	border-color: solid 1px #000000;
	color: #000000;
}

/* MESSAGING STYLES */

#messagingMenu {
}

.messagingMenuButtons > button {
	border-radius: 0;
	
}

.messagingMenuButton {
	text-transform: uppercase;
}

.messagingMenuButtons button.active {
	background-color: #ffffff;
	font-weight: bold;
	color: #000000;
	border: 1px solid rgba(0,0,0,.125);
}

.messagingMenuButtonPrimary {
	background-color: #000000;
	color: #ffffff;
}


#messagingInboxSidebar {
}

#messagingInboxMessageView {
}

.avatarFrame {
	background: #000000;
	color: #ffffff;
}

/* DETAILS PAGE STYLES */

.currentActiveEmail {
	color: #ffffff;
	background-color: #000000;
	text-transform: uppercase;
}

.currentActiveEmail:hover {
	color: #ffffff !important;
	background-color: #000000 !important;
	text-decoration: underline;
	text-transform: uppercase;
	font-weight: bold;
}
.inactiveEmail {
	text-transform: uppercase;
}

/* CHARTING STYLES - DONUT */

.donut-section {
	
}

.highlight {
	
}
/* CHARTING STYLES - COLLECTIONS TIMELINE */

.past-payment {
}

.future-payment {
}

.collection-info-label {
}

	.collected-title {
	}
	.collected-amount {}

CSS is flexible, and a lot of documentation and guides are available online.

Dev Hints CSS Cheat Sheet (opens in a new window)