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 the affiliate panel, then you have to choose the Affiliate panel theme tab in design configuration (Merchant panel --> Configuration --> Design --> Affiliate panel theme)
Here you have an option to define/choose the affiliate´s theme or customize the active theme. The whole process for starting to customize the 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 a new object in the "Getting Started" section of the 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 a new object you can simply copy/paste the last object highlighted in the screenshot:
In the next screenshot, you can see which parts have 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 a 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 the affiliate panel:
2. Example
In this example, we are looking forward to changing the width of the menu section in the affiliate´s panel. First of all, you have to navigate to Affiliate´s panel and open the developers' tool in your browser (in the case of chrome by pressing the F12 - function keyboard) Click the "Select button" in the top-left corner of the developers' tool and hover the section you want to customize. In our case, we need to choose the ".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 added 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