1. Home
  2. Adding Sample Social Shares and Styling Affiliate Pages

Adding Sample Social Shares and Styling Affiliate Pages

In this HTML and CSS guide you’ll find the code that powers the AccessAlly affiliate dashboard, so you can shortcut your development time by re-using the code we’ve developed.

If you’re not familiar with HTML/CSS this may be tricky, so please take your time.

Organizing Sample Social Media Swipe Copy

If you’ve seen how AccessAlly’s affiliate center organizes social media shares and sample swipe copy, you might have wanted to achieve the same look:

Social Share Boxes

Here’s the code to help you do that:

[accessally_tab_section] [accessally_tab_header]Social Media[/accessally_tab_header] [accessally_tab_content]

<textarea class="linkbox" rows="3" cols="30">
YOUR SOCIAL MEDIA COPY GOES HERE + ACCESSALLY AFFILIATE LINK SHORTCODE
</textarea>

<textarea class="linkbox" rows="3" cols="30">
YOUR SOCIAL MEDIA COPY GOES HERE + ACCESSALLY AFFILIATE LINK SHORTCODE
</textarea>
[/accessally_tab_content] [accessally_tab_header]Sample Email[/accessally_tab_header] [accessally_tab_content]

<textarea class="linkbox" rows="30" cols="30">
YOUR SAMPLE EMAIL COPY GOES HERE + ACCESSALLY AFFILIATE LINK SHORTCODE
</textarea>
[/accessally_tab_content] [/accessally_tab_section]

Styling Your Affiliate Ledger

If you like the look and feel of having a header and table around your affiliate ledger, then keep reading to see how we achieve that, like this:

Affiliate ledger

<table class='additional-content-table'><tbody>
<tr class='additional-content-header-row'><th class='white-text' colspan='1'>Your Commissions For The Last 90 Days:</th></tr>
<tr class='additional-content-row'><td>
[affiliate_details duration='90' type='Commissions'] </td></tr><tbody/></table>

<table class='additional-content-table'><tbody>
<tr class='additional-content-header-row'><th class='white-text' colspan='1'>
Your Clawbacks (Refunds) For The Last 90 Days:</th></tr>
<tr class='additional-content-row'><td>

[affiliate_details duration='90' type='Clawbacks'] </td></tr><tbody/></table>

<table class='additional-content-table'><tbody>
<tr class='additional-content-header-row'><th class='white-text' colspan='1'>
Your Payments From Us From The Last 90 Days:</th></tr>
<tr class='additional-content-row'><td>

[affiliate_details duration='90' type='Payments'] </td></tr><tbody/></table>

You’ll also need some CSS to style the colors and fonts in the header area:


.additional-content-header-row {
background-color: #6d6d6d;
height: 40px;
}
.additional-content-header-row th {
color: #ffffff;
vertical-align: middle;
}

.additional-content-row {
border: 1px solid #eeeeee;
height: 40px;
}

Updated on October 26, 2020

Was this article helpful?

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Opt-In-Laptop.png

AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.