Directory Display "Ribbons"

It is possible for GrowthZone to add a "ribbon" to a directory display image, displaying the membership type of the member.

Ribbons can be set up by adding code to Setup -> Websites -> GrowthZone Pages -> Actions -> Style/CSS. It is also necessary to have the "Show Membership Type" option enabled in the directory display settings. If this option is not enabled, the code will NOT display the ribbon across the directory listing image.

Code:

/** Membership ribbon on directory cards **/
#gzns .gz-directory-cards .gz-membership-type {
	border-radius: 50px 50px 50px 2px;
	font-size: .8rem;
	line-height: 1.4;
	padding: 3px 15px 1px 15px;
	position: absolute;
	top: 10px;
	left: -5px;
	text-transform: uppercase;
    display: block;
}

#gzns .gz-directory-cards .gz-membership-type:after {
	border-right: 5px solid;
	display: block;
	bottom: -7px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	content: "";
	height: 0;
	left: 0;
	width: 0;
	position: absolute;
}

/** Membership ribbon on directory details page **/
#gzns .gz-directory-details .gz-membership-type
{
     border-radius: 50px 50px 50px 50px;
     font-size: 0.8rem;
     line-height: 1.4;
     padding: 2px 10px;
     text-transform: uppercase;
     display: block;
     margin-left: 15px;
}

/* Color options for directory membership type ribbons */
#gzns .gz-membership-type
{
     background-color: #CDCDCD;
     border-color: #CDCDCD;
     color: #fff;
}
#gzns .gz-directory-cards .gz-membership-type:after
{
	border-right-color: #CDCDCD;
}

/* Custom colors per membership type can be added using gz-membershipType-{id} */
/*#gzns span.gz-membershipType-primary-1, #gzns .gz-membershipType-1
{
     background-color: gold;
     border-color: gold;
}
#gzns .gz-directory-cards span.gz-membershipType-primary-1:after, 
#gzns .gz-directory-cards .gz-membershipType-1:after 
{
     border-right-color: gold;
}*/

Using the code as posted above will generate ribbons as shown in the first picture of this article. It is possible to edit colors per membership type by adding the code noted at the bottom.

Please contact the web support team if additional assistance is needed in setting up your Directory Display Ribbons.