Styling the Affiliate Area
New: no styling needed
Update 4/20/21 – You may want to check the Affiliate Portal pro add-on. It’s a new alternative to the Affiliate Area that provides an attractive interface for your affiliates with no customization needed. It works with any theme, and looks great on mobile devices.
We’ve gone to considerable lengths to make AffiliateWP look and feel like part of the WordPress admin. It’s there when you need it, and out of your way when you don’t. Likewise, on the front-end, we designed AffiliateWP to blend in seamlessly with any WordPress theme.
We believe in providing affiliates with a consistent experience across the entire website.
Because of this, AffiliateWP includes minimal styling for the Affiliate Area, and relies on the theme’s current styling for most of the heavy lifting.
For many of our customers, the default styling of the Affiliate Area is perfect. Links appear in the theme’s link color, text is shown in the theme’s font, form elements have the theme’s form styling, and so on. We do however get the occasional support ticket asking why the Affiliate Area doesn’t look very “flash”, with custom color scheme(s), icons, animation, custom fonts; you name it!
We could have chosen to style the Affiliate Area based on “current design trends”, but customers are not always going to agree with design decisions we make. As such, a heavily styled Affiliate Area will likely not match the customer’s WordPress theme, and considering the thousands of customers who use AffiliateWP, you can imagine the potential problem…
Customers will demand that we “fix” their theme because AffiliateWP “broke” it.
It’s better to add styling to a clean canvas (like AffiliateWP’s Affiliate Area), than to remove everything and start afresh. In addition, some design trends may go out of style the following year and we would be forced to redesign the Affiliate Area over and over again.
Since we decided to keep things simple from the beginning, our customers will always have a great looking Affiliate Area that matches their WordPress theme. If there is the desire to add custom design elements, all it takes is some CSS styling.
Styling with CSS
Teaching CSS isn’t the goal of this article but thankfully there are countless tutorials available around the web. There’s no better way to learn than to experiment, but before you do, you’ll need to consider where to put your custom CSS code.
In your child theme
Custom CSS code can be added to your child theme’s style.css file. If you don’t have a child theme it’s very easy to create one. Adding CSS to a child theme ensures you do not lose your custom styling when the parent theme is updated.
In a custom plugin
There are many free plugins available on the WordPress repository that allow you to add custom CSS code to your site, by pasting the CSS directly into the WordPress admin. If your theme is ever updated, you won’t lose your modifications. Here’s one such plugin that comes to mind: Reaktiv CSS Builder.
Finding the right CSS selectors to use
In order to style the Affiliate Area with CSS you’ll need to know what to style. The easiest way to do this is to use your browser’s built-in developer tools. This allows you to simply hover over any element in the Affiliate Area and find out exactly what the relevant CSS selector to use is.
Each browser has a slightly different way of accessing its developer tools:
Another way to find out what CSS selectors to use is to look at AffiliateWP’s template files in a code editor. All the template files relevant to the Affiliate Area are included in the templates folder of the plugin.
The affiliate dashboard
The URLs tab of the affiliate dashboard
The Stats tab of the affiliate dashboard
The Graphs tab of the affiliate dashboard
The Referrals tab of the affiliate dashboard
The Visits tab of the affiliate dashboard
The Creatives tab of the affiliate dashboard
The Settings tab of the affiliate dashboard
Styling the Affiliate Area’s links to look like “tabs”
One of the requests we’ve received is to style the Affiliate Area’s links to look like “tabs”. Below is an example on how you can accomplish this using CSS styling and the default WordPress TwentySixteen theme.
Something very important to note is that all themes are unique. Although we’ve provided example code to turn the links into tabs, there may be additional styling required for your theme. With TwentySixteen, we had to add a few more styles to get things looking the way we wanted. This is noted in the CSS comments at the very end.
Here’s what the default Affiliate Area’s links look like out of the box (with the TwentySixteen theme).
Here’s how our new tabs look once some CSS styling has been added.
To try this out yourself:
- View the CSS code on our code repository. You can also find lots of other code snippets to use with AffiliateWP on our repository.
- Copy and paste the CSS code (everything between the <style> tags) into a custom CSS plugin, or directly into your child theme’s style.css file (as discussed earlier).
As a final note, code snippets on our repository are set up to be plugins for convenience. An alternative way to use the CSS code is to save the file shown and install directly as a plugin on your site. You can find instructions on how to do this from the “Using Snippets” section. Using it this way has the added advantage of only loading the CSS on your Affiliate Area, and not any other page that doesn’t require it.
With a little bit of enthusiasm and some basic CSS knowledge, you can style the Affiliate Area to look exactly how you want. If you’re interested in learning more about CSS, check out some tutorials and try experimenting with the various design elements. You might even find yourself having fun!