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.
a) Changing the Background:
There are 2 ways you can change the background of the affiliate view:
- By changing the image
- By taking the image out and using a background color only
Option 1: To change the background image first you will need to find the following bit of code in the “style.css” file.
body {
background:url(images/bg4.jpg) top repeat-x;
height: 100%;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
}
The “background:url(images/bg4.jpg) top repeat-x;” is the line we will need to edit. The CSS gets the image for the background from the images folder “wp-affiliate-platform/affiliates/images” of the plugin.
You need to upload the new background image to this directory. The easiest way to change this image is to name the new image the same as the existing one (bg4.jpg) and replace it, this way you do not need to change the CSS code. You may want to change the “repeat” depending on your image. The above example “top repeat-x;” will repeat the image from the top and along the x axis (horizontally).
Other repeat options:
- y axis (vertically)
- no-repeat
- top-right or left
- bottom-right or left
Option 2: To use just a background color you need to make a small change to the code. See the example below.
body {
Background: #000;
height: 100%;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
}
In the above example I have set the background color to black.
Color Codes: You can use the following color codes to change colors in CSS:
- Color name (e.g. red)
- Hex value (e.g. #CECECE)
- RGB value (e.g. 255.0.0)
b) Changing the Header
To change the header you need to edit the following CSS code.
#header h1 {
padding: 34px 0px 0px 0px;
color: #FFF;
font-size: 40px;
font-family: Times New Roman, Georgia, Arial;
font-weight: normal;
}
- color: changes the color of the text in the header “the name that appears at the top of the affiliate view”. Refer to the color codes section for more information on what color codes can be used with CSS.
- font-size: allows you to change the size of the font.
- Font-family is the type of font. Note: The fonts used in this code are cross browser friendly, some browsers can not render all fonts.
- font-weight: changes the style of the font. You can make this normal, thick or thicker.
c) Changing the Body Font Color
To change the font color of the body “main font color” you will need to change the color in the following bit of code:
body {
Background: #000;
height: 100%;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
}
The property you will need to modify is the “color: #555”. Refer to the color codes section for more information on what color codes can be used with CSS.
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