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!
28 comments on “Styling the Affiliate Area”
I will modify my affiliate area 😀
much easier with visual composer, lol.
Sure thing! There are many ways to approach this 🙂
is it possible to use elementor to edit affiliate area design?
I’m waiting for a reply for this as well. Maybe Andrew can answer sometime this year. Tnx.
Hey, are you wanting to edit the page itself (it’s called “Affiliate Area” by default), or are you wanting to edit the actual links, form fields etc within the Affiliate Area?
The page can be designed using Elementor but the Affiliate Area itself would need to be modified by adding custom CSS to Elementor. The Affiliate Area is outputted using a block or shortcode (you can pick which one you’d like to use) so it isn’t something you can customize from within Elementor.
How to override the templates in the plugin? What hierarchy do you have to put the files into under your child theme? I’ve tried all the obvious ones, nothing is working. This is an absolutely critical customization option needed to customize the WP Affiliate area, and you do not talk about it at all in this article.
See this doc article: http://docs.affiliatewp.com/article/118-modifying-template-files
It’s working like charm.
Glad to hear this post helped out.
What is the best wp theme or template to go with the wp affiliate plugin?
AffiliateWP works well with any WP theme. The best theme will be the one you like the design and functionality of.
how setup on side menu tab…? you can help me…?
Hi Yupi, one of the 3rd party consultants can help you if you need any custom development: https://affiliatewp.com/consultants/
I recommend making the plugin and addons compatible with Beaver Builder.
This was nice, but didn’t quite suit my requirements so I created something that looks a little nicer (if I do say so myself 🙂
Screenshot here: https://github.com/mattbingham/wordpress-affiliateswp/blob/master/affiliateswp-style1.jpg
It’s responsive so tabs should jump to next line on smaller devices.
I love you! Thanks for this
I am looking to buy this plugin already tested and liked it but i have only one question and it seems to be the major one for me to decide for buying or skipping.
Your plugin looks great in desktop but somehow in small screen as in Mobile phone the affiliate area once when clicked on any tabs whether it be Dashboard or statistics the content jums to the bottom of the screen after all the tabs ends. And all I want is in small screen i can edit using css in child theme in a way that once the tabs are clicked it slides to the next page with its content and i can add a back button to go back to the menu.
If its possible then ill buy it
The Affiliate Area can be completely customized to your liking by copying over template files into your WordPress child theme.
More information on template files can be found here: https://docs.affiliatewp.com/article/118-modifying-template-files
Hope that helps!
I want to add some text under affiliate URL’s Tab. How is it possible?
You could achieve this in a number of ways:
1. Create your own custom URLs tab using the Affiliate Area Tabs add-on: https://affiliatewp.com/add-ons/official-free/affiliate-area-tabs/
You can use a WP page for the tab which means you can put anything on it, including your custom text. You can then place the [affiliate_urls] shortcode below your text to mimic the functionality provided on the original tab.
This shortcode is provided by the Affiliate Area Shortcodes add-on: https://affiliatewp.com/add-ons/official-free/affiliate-area-shortcodes/
2. Add the text using the dashboard-tab-urls.php template file provided by AffiliateWP. More information on template files here: https://docs.affiliatewp.com/article/118-modifying-template-files
3. Add the text via the affwp_affiliate_dashboard_urls_top action hook. Some development knowledge would be required for this.
How can I combine the content of two tabs?
For example I want affiliate URLS and Statistics to be under one tab
How can I style the portal? Specifically, the creatives page. I’ve tried adding flex-1, w-0 -mr -px classes to my child theme css but nothing changes. There is no “creatives.php” inside /wp-content/plugins/affiliatewp-affiliate-portal/templates/ for me to get a better idea of the classes used (but I’m pretty sure they’re those).
I just want to change the background colour away from white so reversed art can be seen.
The Affiliate Portal add-on has its own custom styling so it isn’t possible to customize the CSS. The portal removes all other stylesheets to avoid any styling conflicts between itself and the active theme.
We will likely add some basic color options in the future so you can better match your brand’s color(s). We’re also considering dark mode support. This would help reversed art be seen against the white background on the creatives page.
Is the standard Affiliate Area still an option for you? You can customize that in any way you like and it has templates you can override (the portal doesn’t have any templates).
The Portal attracted me and I bought the Pro version. Then I realized it wouldn’t work because my website is in dark mode with WHITE body font colours.
Spent the last 7 hours trying to customize the colours through CSS and only read your comment here. I’m dying
hey there i want to display only login page and a registration page in this login page user if not register then click the registration link otherwise login to our affiliate account how is it possible ?
AffiliateWP shows a login and registration form on the same page by default. If a user is logged out, they will see both.