Notes
I have tried my best to style every element that is inside the affiliate center. Instead of giving page after page of HTML coding, I have complied all the elements into this single file.
The HTML coding has comments marked out within, so the different sections should be relatively easy to identify for extraction to fit into your php coding. I have also tried to follow your files as closely as possible to try and make things easier for you. If you open this file in your HTML editor you should be able to easily identify each part to use - eg. header, navigation (menu) and content etc.
Please let me know if you need any assistance with any of the sections below.
Cheers
Damian
Alternative Menu / Navigation
The menu/navigation area you see above is designed in CSS with a fixed width of 850px.
I know that it may not be that compatible for people using their own custom themes that has different widths, so I have included a generic admin menu below for you to use should you want to.
All you need to do to remove the CSS menu above is to delete the section I marked out with the comments 'Navigation Area', it will not affect or break the design in anyway. And then you can just fit the coding below for the alternative menu inside the content wherever you want.
This generic admin menu area must be nested inside the div with the id 'main', unlike the one above.
Header Area Tutorial
I try to make this area as simple as possible so that it is easy for your users to customize.
Header Image
All you need to do to change the image is to replace the file named 'header-image.jpg' inside the 'images' folder with your own header image. The file size should be 850px X 150px.
The width (850px) cannot be changed but the height (150px) is flexible. All you need to do to change the height is to open the CSS stylesheet and change the value accordingly. This is where you should change it:
#header-banner {
position: relative;
clear: both;
margin: 5px auto;
height: 150px;
width: 850px;
background: #fff url(images/header-image.jpg) no-repeat center center;
}
Just change the 'height: 150px;' to the desired value.
For example:
If you have a header image that is too small, say 768px X 140px. All you need to do is to use their favorite graphics editor program to expand the image to 850px wide keeping the proportions constant. The resulting enlarged image will be 850px X 155px. After that overwrite file named 'header-image.jpg' inside the 'images' folder with it, and then change the height value to 155px within the correct section of the stylesheet. This way is the best method to avoid those out of proportion header images that are so ugly.
Title and Slogan
If your custom header image already has all the required branding and text then you can just simply remove the title and slogan from the header area. Deleting these few lines of HTML coding will not affect the design at all.
If you want to keep but change them, you can easily do so too.
Here's how you should delete/change the title and slogan inside the header area:
Look for the div with the id 'header-banner', inside this div you will find two lines of code starting with - h1 id="logo-text" and h2 id="slogan". You can change the text within or delete these two lines completely.
Login Page
This is the login area you can extract for your login page
$sitedesc Affiliate Login
Stats Section / Affilate Centre Home
Here is where you can extract to use for your stats section.
YOUR CUSTOM MESSAGE HERE
Summary of Activities to Date
Affiliate ID: XXXXXXXX
| Product Name | Hits | Sales | Conv. Ratio |
|---|---|---|---|
| easyClickMate Software ($67) | 1234 | 88 | 0.07 |
| easyClick404 Software ($47) | 1234 | 88 | 0.07 |
| AffiliateShield ($47.00) | 1234 | 88 | 0.07 |
| easyClickGuard Software ($67.00) | 1234 | 88 | 0.07 |
| Ultimate ClickBank Combo: easyClickMate + easyClickGuard ($77) | 1234 | 88 | 0.07 |
| ClickBank Power Tools ($88) | 1234 | 88 | 0.07 |
| Total | 7404 | 528 | 0.00 |
Affiliate URL Sections
This styling can be used for both the Affiliate URL and Advance Affiliate URL sections.