Multi-Currency addon

[NEW] Multi-Currency Addon: Calculate Affiliate Commissions from Any Currency

Eliminate calculation errors, ensure fair payouts and simplify management of your international affiliate program.

Continue Reading →

Styling the Affiliate Area

Last updated on by Andrew Munro
LinkedIn
Affiliate Portal Icon

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.

Inspecting the Affiliate Area with the browser's developer tools
Inspecting the Affiliate Area with the browser’s developer tools

Each browser has a slightly different way of accessing its developer tools:

Chrome
https://developer.chrome.com/devtools

Firefox
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

Safari
https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html

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.

dashboard.php
The affiliate dashboard

dashboard-tab-urls.php
The URLs tab of the affiliate dashboard

dashboard-tab-stats.php
The Stats tab of the affiliate dashboard

dashboard-tab-graphs.php
The Graphs tab of the affiliate dashboard

dashboard-tab-referrals.php
The Referrals tab of the affiliate dashboard

dashboard-tab-visits.php
The Visits tab of the affiliate dashboard

dashboard-tab-creatives.php
The Creatives tab of the affiliate dashboard

dashboard-tab-settings.php
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).

The default Affiliate Area links with the TwentySixteen theme

Here’s how our new tabs look once some CSS styling has been added.

The new tab styling on the Affiliate Area

To try this out yourself:

  1. View the CSS code.
  2. 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).
  3. Enjoy!

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!

Happy styling!

Published by
Andrew Munro founded AffiliateWP in early 2014. His trusty treadmill desk allows him to write code at an incredible 3 mph, making him the fastest developer around.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

31 comments on “Styling the Affiliate Area”

          1. 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.

  3. 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.

    Reply

  9. 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

    Reply

    1. Hi Saket,

      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.

      Reply

  12. 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.

    Reply

    1. Hey Shane,

      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).

      Reply

      1. 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

        Reply

  13. 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 ?

    Reply