Simplified - How to work with templates?


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

 

 

NOTE: If you want to change Merchant or SignUp theme, the process is exactly the same. Just navigate to Configuration > Design > Merchat panel theme / Signup page theme > click Edit Theme; if a dialog comes up to create a copy of a theme, confirm it.