Main Panel
- The main panel has white background and 10px padding from top, so modify this class.
- Cut the main header(welcome image) from design and replace the image named as “image.jpg”.Set the width height and image display, for these changes modify this class
1 | #mainPanel { padding: 10px 0px 0px 0px; margin: 4px 4px 0 4px; background-color: #FFFFFF; } |
1 | div.welcomeImage { width: 495px; height:187px; background:#FFFFFF url(images/image.jpg) no-repeat; } |
Also check or modify this(below) class for multiple images as background
1 | td.welcomeImage { width: 495px ;/* background:#FFFFFF url(images/background.gif) repeat-x; */} |
- For Welcome text below the image modify this class like as,
1 | .welcomeText{/*background:#f7f7ef url(images/WelcomeTextBg.gif) repeat-x top;*/ color: #52514f font-size:11px; font-weight: 500;font: Verdana, Arial, Helvetica, sans-serif; margin: 0; } |
- For Feature Product bar background cut the image of same height but 1px wide and replace the image with this image, and modify the below class.
1 | #mainPanel .section .header {background: url(images/Feature_product_bg.gif) repeat-x; height:29px; line-height:24px; padding: 0 5px 0 4px;margin:0; } |
- Set left image, the line-height for text and font styles from the class(below) .
1 | div.pageHeader H1{background: url(images/header_icon_mid.gif) no-repeat 0 0; font-size: 12px; color: #000000; padding: 0; margin: 0;font-weight:bold; line-height:35px; text-indent:20px; border:0; } |
- Cut the “add to cart” button from So the next time someone offers you to try a foot buy-detox.com/shop/opiate-her-mor-detox-kits/premium-detox-7-day-comprehensive-cleansing-program-detail system, save your sole and “de-FEET” them with these scientific arguments. the design and replace it with image named as “cart_btn2.gif” with text on it. and modify these classes for layout.The container that displays product contain many classes.i have just to style the border around the cell and remove the padding because i want to set the actual width, comment the background because i have just white background.
- for cell that contains the product thumbnail, modify the below class
1 | td.thumbnail{/*background: #FFFFFF url(images/thumbnailTdBg.gif) no-repeat left top;*/ border-right:0; text-align:center; height:151px;/*padding-left:6px; padding-right:6px; */ width: 35%; vertical-align: middle; border:1px solid #e4e4e4;} |
- for cell that contains the product details, modify the below class
1 | td.details{ padding-left:10px; padding-right:5px; padding-top:10px; padding-bottom:5px; text-align: left; vertical-align:text-top;/* border:solid 1px #FFFFFF;*/} |
There, the Main panel is done.
Re-skinning Ablecommerce : Part 4 The Main Panel