When you want to customize a template, probably the first thing you need to find is the corresponding template. Post Affiliate Pro templates are divided into 3 main categories - Affiliates, Merchants and Signup. If you want to change the design for example in affiliate panel, then you have to choose Affiliate panel theme tab in design configuration (Merchant panel --> Configuration --> Design --> Affiliate panel theme)
Here you have an option to define/choose affiliate´s theme or customize the active theme. The whole process for starting to customize active theme is described step-by-step in this brief guide - https://support.qualityunit.com/886156-Making-your-own-theme
1. Example
In this example, we will add new object in the "Getting started" section of Affiliate panel and try to include a tutorial video:
In this case go to Merchant panel --> Configuration --> Design --> Affiliate panel theme --> Edit active theme --> Search for "getting" and to be able to edit mentioned section you have to open the "getting_started.tpl" template.
To add new object you can simply copy/paste the last object highlighted in the screenshot:
In the next screenshot you can see which parts has to be customized. We need to set an automatic width for the whole <div class="IconObjectBlock">, change the title and description text and include an iframe of specific video (for example from youtube.com)
Customized object:
<div class="IconObjectBlock" style="width:auto"> <a href='#189911-directlinks_explained' style="display:block;" class="IconObject"> <div class="IconObjectIcon"><div tabindex="0" class="BigIcon icon-DirectLinksManager"></div></div> <div class="IconObjectNameContainer">##Tutorial##</div> <div class="IconObjectDescriptionContainer">##Watch an introduction video top get tips for your affiliating.##<br><br> <iframe width="560" height="315" src="https://www.youtube.com/embed/xvTsRyBGMAc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> </a></div>
Do not forget to save your changes and set the customized theme as default for all affiliates.
Now, let´s check the result in affiliate panel:
2. Example
In this example we are looking forward to change the width of menu section in affiliate´s panel. First of all you have to navigate to Affiliate´s panel and open developers tool in your browser (in case of chrome by pressing F12 - function keyboard) Click "Select button" in the top-left corner of developers tool and hover the section you want to customize. In our case we need to choose ".bs-sidebar" class name. In "Styles" tab you can see a property "width" which is set to "250px".
Now go to Merchant panel --> Configuration --> Design --> Affiliate panel theme --> Edit active theme --> Search for "custom.css" and insert css code for class ".bs-sidebar" as showed in the screenshot:
Customized custom.css:
.bs-sidebar {
width: 300px;
}
.bs-content {
padding: 30px 20px 40px 310px;
}
As you can see in the previous screenshot we´ve already add a customized css code for class ".bs-content" since it is necessary to achieve a smooth design. How did we get the class name? Focus on the next screenshot:
Now you have to save all your changes and make sure to set the customized theme as default for all affiliates