Skip to main content

Directory Display "Ribbons"

Updated
The Goal: Add a "ribbon" to your directory display images that shows each member's membership type.

Before You Begin:

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

Step-by-Step Instructions

  1. Go to Settings, Website section, click GrowthZone Pages, then choose Actions and select Style/CSS.

  2. Paste the CSS code below into the Style/CSS editor.

    /** 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;
}*/
  3. 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.
  4. Click Save to finalize your changes.

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

Common Pitfalls

  • "Show Membership Type" not enabled: If this option is not enabled in your directory display settings, the code will NOT display the ribbon across the directory listing image. Enable it first, then add the CSS.

Related articles