This document outlines some tips on how to change the look and feel of the WP affiliate platform affiliate view by tweaking some CSS.
When you install the plugin, it should have created one of the on-page affiliate area using a shortcode approach. The different options for it are explained on this page. So you can try them to see if one options work better than the other (given the theme you are using).
Inserting CSS Code Tweaks to Your site
You can add CSS tweaks to your site via the following interface of your admin dashboard:
Appearance -> Customize -> Additional CSS
Example CSS Tweaks
The following section has some example CSS code tweaks.
You can also read this tutorial to learn how you can inspect CSS code and add tweaks.
Customizing the Affiliate Portal Title
The affiliate portal title is rendered using a heading 3 (h3) element and includes the wp_aff_title CSS class. You can target this class to apply your own styling.
For example, the following CSS snippet changes the font family, size, and color of the title:
.wp_aff_title {
font-family: Arial, sans-serif !important;
font-size: 28px !important;
color: blue !important;
}
Changing the Affiliate Portal Body Text Color
You can change the main body text color of the affiliate portal by targeting the #wp_aff_inside ID. This controls the default font color used within the portal area.
For example, the following CSS snippet changes the body text color to gray:
#wp_aff_inside {
color: gray;
}
This guide has covered some basic changes that you can make to the affiliate view to give it a little personal touch. If you would like to learn more about some basic CSS then please see the Basic Guide to CSS article.
@Michal, You can translate the plugin into whatever you need to. The following forum post will explain more about this.
http://www.tipsandtricks-hq.com/forum/topic/plugin-language-translation
Hey, I’ve been using this plugin for a while and absolutely love it!
Was wondering if it was possible to add Polish language in a future?
Thanks,
Michal
This is an excelent plugin, and the french version is very good. I love it.
Thanks for your hard work
That would be really helpful if the form was removed when the option is checked. Maybe even better if the ‘sign up’ link was removed from the index page as well.
I can make it so if the “Disable Affiliate Signup” option is checked then it doesn’t show the form either. Will that help?
Great plugin but the option to disable Affiliate signup does not disable the functionality to complete the form. You don’t find out you can’t register until you get to the bottom of the registration page, after the user has completed the form which is potentially frustrating for the user.
I’d like to remove the option of Affiliate Sign Up all together. Anybody help on how I can do this?
With thanks
Carl.
Hi Jay, Thank you for sharing this with us. We enjoy seeing how people are using our plugins and customizing them to fit their needs. This will also help anyone that is trying to do this type of front end customization. =)
I’ve just amended the front end using these instructions – however my client wanted a bit more, so I’ve jotted down my findings here:
http://wpguru.co.uk/2010/08/how-to-style-wp-affiliate-platform/
Hi, I had a look at Vooshthemes. It looks like the have customized the CSS of the Affiliate plugin. The following article will explain more about how to do this.
http://www.tipsandtricks-hq.com/wordpress-affiliate/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249
First of all, amazing plugin!
I had a question regarding further customization. Do you have any idea how the people at Voosh Themes customized their registration page to integrate inside their theme like this: http://www.vooshthemes.com/wp-content/plugins/wp-affiliate-platform/affiliates/register.php
I wasn’t sure if there was something simple inside the settings that does this or if it involves some trickery within the php files themselves. Thanks.
If you go to the settings menu of the plugin you will be able to enter the title in the “Index Page Title” field. Whatever you enter there will be displayed in the header.
How do I change the “WP Affiliate Platform” header title to read “2Leads Affiliate Platform”. I’ve dug in the code but cannot find it, is it a hidden template, running under some jscript, or….? Can I get some help Please.
Jason