How to convert “Glass_olive” left Sidebar into “Furniture_store” left Sidebar
Finished left Sidebar Panel of “Furniture_store” Design
- I have left side bar with white background, 200px wide with no borders below is the modified class for left Sidebar Panel container.Set the padding and comment the border style statements.
- For left Sidebar Panel header cut the background image. As I have a rounded Panel header, so I will place the whole image and replace it with “Simple_category_header.gif”. Set the padding and comment the border nbso style statements.
1 | #leftSidebarPanel {width: 200px; margin: 0; padding: 4px 8px 0px 0px; background-color: #FFFFFF;border-right-width:0; } |
1 | #leftSidebarPanel .section .header h2 {color: #FFFFFF; text-indent:13px; font-size: 14px;line-height:35px; font-weight: 700; padding: 0; margin: 0;background: url(images/Simple_category_header.gif) no-repeat 0 0; } |
- For category list container I have a simple background color with bottom border for this simply comment the background image statement and put the desired color code and style the bottom.
1 2 | ul.category li{ margin:0; padding:0 0 0 14px ; border-bottom: 1px solid #683c15; background: #F6F6F6; } |
- For category list i have an arrow with text. First cut the image of arrow and replace it with image named as “left_panel_item_bg.gif” and modify this class. One important attribute is padding, using this a lot of issues could be resolved.
1 | ul.category li a { display: block; background:#f6f6f6 url(images/left_panel_item_bg.gif) no-repeat center left; padding:8px 0pt 8px 20px; color: #381b01;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;} |
- Further categories will be set by the merchant and all the categories have same look and feel as the first one.
You can use a quite similar trick on right sidebar panel to change its look and feel.
There, the left Sidebar panel is done.
Re-skinning Ablecommerce : Part 3 Sidebars