How to Style the Referral Page (Thanks Page) with Custom CSS
The Referral Page (aka Thanks Page) is by default what the user sees after they sign up through your form, or if they click a Referral Status Link sent in an email. It contains the information they need to check on their stats as well as earn referrals.
Like the signup form, you can fully edit this as well by navigating to 2. Thanks > Edit from your project dashboard sidebar menu. The Design tab of your Referral Page editor allows you to customize how your it looks to your users.
If you'd like to take its design further, you can style it using custom CSS similar to how you can do the same for your form. .
CSS stands for Cascading Style Sheets. It describes how HTML elements of the referral page are to be displayed on your user's screen.
If you're familiar with CSS already, here's how you can apply it on your referral page as well as know how to select the elements you want to style.
How to Add Custom CSS
- 1
-
From your project dashboard, navigate to 2. Thanks > Edit and select the CSS tab.
-
- 2
-
Enter your CSS code in the provided input box and hit the Save button. You can then click on Preview to immediately see how your referral page looks with the styles you've applied to it.
-
-
The Referral Page editor will also autosave every 20 seconds from the last time your changes were saved/autosaved. That's it!
Knowing the Parts of the Referral Page That You Want to Style
Prefinery uses descriptive CSS classes and IDs to add a default style to your referral page as well as implement the changes you applied through the Design tab. You can use these same specific selectors as well as generic ones to target DOM elements in your referral page.
The following is a summary of commonly used CSS selectors:
#pfy-share-form-container |
Div wrapper that can be used to target classless/ID-less child elements like paragraphs and headings |
#pfy-referral-link-copy-wrapper |
ID of the unique referral link with easy click-to-copy functionality/button |
.pfy-share-networks |
List class of the share buttons wrapper |
.pfy-share-networks #messenger a |
Share buttons use the anchor element which can be individually targeted by indicating the button list ID (e.g. messenger, facebook, twitter, email, etc.) |
#pfy-leaderboard |
Leaderboard/waitlist table wrapper |
#pfy-milestones |
Milestone rewards wrapper |
The above is not a complete list. You can target anything in the DOM via CSS. The easiest way to do this is to use your browser's Developer Tools, specifically its element inspector feature. Here's how:
- 1
-
While editing your Referral Page, Preview it then right-click on an empty space inside the browser window and select Inspect in the context menu that appears to open up Developer Tools panel. Alternatively, you can bring it up by navigating through your browser's menu.
-
-
Here are shortcut keys to opening up the Dev Tools panel for each operating system and browser:
- Windows (Chrome, Firefox, Edge):
F12orControl+Shift+I - Mac (Chrome, Firefox, Safari):
Command+Option+I
- Windows (Chrome, Firefox, Edge):
- 2
-
Click on the Inspect button on the leftmost part of the Dev Tools panel header, then select the part or section of your referral page that you want to inspect and style. The Dev Tools panel will automatically display and highlight the element you selected.
-
- 3
-
Right-click on the highlighted element in the Dev Tools panel then choose Copy > Copy selector.
-
- 4
-
Close the preview and in the CSS tab of your referral page, add a new line and paste in the selector you just copied along with the styles you want to apply to it. Hit the Save button when done.
-
- 5
-
You can preview your referral page again to see the changes made by the CSS you added. Repeat the above steps for other elements that you want to style.
