Customize Rewards Leaderboard Using CSS:

Below we’ve outlined some of the more advanced CSS techniques you can  use to update and customize your Rewards Leaderboard using CSS in you agency dashboard.

Change order or leaderboard menu items:

.points-leaderboard-link{ order:1; }

.referral-leaderboard-link{ order:2; }

.rewards-leaderboard-link{ order:3 ;}

.promotions-leaderboard-link{ order:4; }

.settings-leaderboard-link{ order:5;}

.reporting-leaderboard-link{ order:6; }

If there is a specific tab you would like to start on - change the leaderboard Custom Menu Link to start with that URL rather than the getLeaderboardData.php URL… 

For Example: 

Current Leaderboard Link: 

https://api.ghlsmartscripts.com/Rewards/getRewardsLeaderboardData.php?licensekey=**YOURLICENSEKEY**&location={{location.id}}

Load Point Leaders First: - Use this custom menu link: 

https://api.ghlsmartscripts.com/Rewards/LoyaltyPointLeaders.php?licensekey=***YOURLICENSEKEY***&location={{location.id}}

Change Name of Leaderboard Menu Item:

Change the wording for the link in the nav menu for each item, use the code below and replace *** NEW LINK NAME *** with wording you would like to see for that page link. 

/* Change The Name of the referral Menu LInk */

.referral-leaderboard-link a span{display:none;}

.referral-leaderboard-link a:after{ content: " *** NEW LINK NAME *** " !important; }

/* Change The Name of the points leaders Menu LInk */

.points-leaderboard-link a span{display:none;}

.points-leaderboard-link a:after{ content: " *** NEW LINK NAME *** " !important; }

/* Change The Name of the rewards Menu LInk */

.rewards-leaderboard-link a span{display:none;}

.rewards-leaderboard-link a:after{ content: “ *** NEW LINK NAME *** “ !important; }

/* Change The Name of the promotions Menu LInk */

.promotions-leaderboard-link a span{display:none;}

.promotions-leaderboard-link a:after{ content: " *** NEW LINK NAME *** " !important; }

/* Change The Name of the Settings Menu LInk */

.settings-leaderboard-link a span{display:none;}

.settings-leaderboard-link a:after{ content: " *** NEW LINK NAME *** " !important; }

/* Change The Name of the Reporting Menu LInk */

.reporting-leaderboard-link a span{display:none;}

.reporting-leaderboard-link a:after{ content: " *** NEW LINK NAME *** " !important; }

Change Page Titles:

/* Change The Name of the referral Page Title */

.referral-page-title h2 span{display:none;}

.referral-page-title h2:after{ content: "NEW Referrals" !important; }

Using the format above ^^^^^ you can change the page title using the CSS classes below. 

.points-page-title
.reward-items-page-title
.redemptions-page-title
.promotions-page-title
.coupons-page-title
.reporting-page-title

Change Main Nav Background Color:

.nav_container{background: #000000 !important;}

Change the color of the Header Section:

How to find and change other page items:

A good working knowledge of CSS is valuable when updating many things online - here is a good resource on learning CSS and how to implement it: https://www.w3schools.com/css/

(Using Google Chrome) - Other browsers will be similar. 

Right click on the item you want to change. 

Click on Inspect.

Look For CSS Class:

Copy CSS Class - In this case: points-page-title - And add that to your custom CSS box in agency settings. If it is a class make sure to put a . (period before the class name) for example.

For the class: points-page-title you would put .points-page-title{} in the custom CSS box, and put your CSS changes between the brackets. 

Here are a few ideas:

.points-page-title{color: blue;} or .points-page-title{color:#ff0000;}
.points-page-title{font-weight:bold; font-size:24px;}

Googling how to update CSS will give you ideas on things you can change with the CSS in order to customize the leaderboard section.

Restaurants

Use the following link to download the demo funnel you can customize for your agency when showing cusotmers how your system works. 

https://affiliates.gohighlevel.com/?fp_ref=think-big-studios57&funnel_share=65f4a03b3ae04354e93288b0

----- 

This is the same demo as https://restaurant.myrewardsdemo.com

Home Services

Dentist

Salon / Med Spa

Fitness