Como deixar Sidebar colorida

1. Procure no HTML <Group description="Sidebar Background"

2. Apartir dai, apague TUDO, até chegar no: */. ( obs: apague o */ tbm )

3. No lugar disso tudo que voce apagou, ponha esse codigo:

   <Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">

     <Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent"  value="#92bae1"/>

     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="transparent"  value="transparent"/>

   </Group>

   <Variable name="body.background" description="Body Background" type="background"

       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="$(color) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFoiiqKZBtg6f7vXauQ5KRvUG6fXYwUTjtCzq_j6euWqB0enm_w6o3PVCKGqQ23er4A4q5Oua40v-e-4sH9wPZCB8QcMuf9zJoMBc54tvnhqiDhjW6tvGrnSrBkaWGxdjeVmbwuK0Na1C/s0/b+%25281%2529.png) repeat scroll top left"/>

   <Variable name="content.background" description="Content Background" type="background"

       color="$(content.background.color)" default="$(color) none repeat scroll top center" value="#ffffff url(http://www.blogblog.com/1kt/travel/bg_container.png) repeat-x scroll top left"/>

   <Variable name="comments.background" description="Comments Background" type="background"

       default="#FFFFFF none repeat scroll top center" value="#FFFFFF none repeat scroll top center"/>

   <Variable name="content.imageBorder.top.space" description="Content Image Border Top Space" type="length" default="0" value="5px"/>

   <Variable name="content.imageBorder.top" description="Content Image Border Top" type="url" default="none" value="url(http://www.blogblog.com/1kt/travel/bg_container.png)"/>

   <Variable name="content.margin" description="Content Margin Top" type="length" default="20px" value="20px"/>

   <Variable name="content.padding" description="Content Padding" type="length" default="20px" value="20px"/>

   <Variable name="content.posts.padding" description="Posts Content Padding" type="length" default="10px" value="10px"/>

   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"

       default="url(http://www.blogblog.com/1kt/travel/bg_black_50.png)" value="none"/>

   <Variable name="tabs.selected.background.gradient" description="Tabs Selected Background Gradient" type="url"

       default="url(http://www.blogblog.com/1kt/travel/bg_black_50.png)" value="none"/>

   <Variable name="widget.outer.background.gradient" description="Sidebar Gradient" type="url"

       default="url(http://www.blogblog.com/1kt/travel/bg_black_50.png)" value="none"/>

   <Variable name="footer.background.gradient" description="Footer Background Gradient" type="url" default="none" value="none"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"

       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>

   <Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff"  value="#ffffff"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>

   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>

*/ 

Cogio grande eu sei.
Depois disso salve. MAAAAAAAAAAS, AINDA NÃO ACABOU. vc vera claramente que ficara um pouco de branco na parte onde é pra ficaro banner. Mas é facil de resolver:

1. Procure por content-outer .content-cap-top { no seu html.
3. Quando esse código aparecer apague apenas os trechos contornados de vermelho na imagem abaixo :
Clique na imagem para ampliá-la e ver com atenção o que deve ser apagado.

Apos isso cliquem em "Salvar Modelo" e pronto!