TUTORIAL 36 : Tukar Warna Background Sidebar

Steps!

1. Open Design tab then Edit HTML tab.
2. Find the following code:
   
   /* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
3. Paste the following right below the step 2 code:
   
   <Group description="Sidebar Background" selector="body">
<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
</Group>
4. The result of step 2 and step 3 codes will look like this:
   
   /* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>

<Group description="Sidebar Background" selector="body">
<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
</Group>
   
5. After that, find ]]></b:skin> and paste the following code just before it:
   
   .column-left-inner, column-left-outer { background: $(sidebar.bgl.color); }
.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); }
   
6. Preview and Save your template.
7. Open Template Designer & go to the 'Advanced' tab. You'll see the first option as 'Sidebar Background'. Open it and configure the color of right or left sidebar backgrounds!