ChannelAdvisor Store Design Hints and Tips
ChannelAdvisor Store design: hints and tips Doing a design in ChannelAdvisor store is not that difficult if you have some guidelines to work from. Having a good understanding of html will be required. This document shows the most basic editing without using css absolute positioning which I recommend that you do not use as it will have unpredictable results on your site and any future changes can have serious undesired results.
In this document I will mention the different scenarios that you can apply:
Centering site and changing background colour
The first "Your Color Here" controls the header. The second one controls the body and the 3rd one controls the outside. To make changes to your item pages, you will navigate to
Store -> Design Center -> Customize Theme -> Header (Logo Area) -> Advanced HTML.
For the home page, you will navigate to
Store -> Design Center -> Home Page Layout
and paste the text in this box "Home Page Message Above Featured Items: Leave blank to display no text on the Home Page layout". <style>
css code
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td valign="bottom" bgcolor="#YOUR COLOR HERE" >
<div align="center"><br>
<br>
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
Table code
</table>
</div>
</td>
</tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#YOUR COLOR HERE">
<tr>
<td>
<table width="800" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#YOUR COLOR HERE"> Some handy css "exclusion" tags
Having a 'templatised' site does provide many features that you might find unattractive and might or might not want to include. This will help you make some of those features disappear. In the Store -> Design Center -> Customize Theme -> Header (Logo Area) -> Advanced HTML. You need to go place the following code between the <style> tags as shown above:
.catalogtitle {display: none; }
This will make the category title background on the sidebar disappear
.cattitlebg {display: none; }
This will make the category title on the sidebar disappear
.mainnavdiv {display: none; }
This will make the top navigation disappear
.topbar {display: none}
This will make the top bar underneath the top navigation bar disappear
.framebghorizontal {display: none; }
This will make the black dividing horizontal line between the tables disappear
.framebgvertical {display: none; }
This will make the black dividing horizontal line between the tables disappear
.sidebar table {width: ?px; height: ?px; background: url(…/Images/1/left_sidebar.jpg); }
This will allow you to control the sidebar dimensions and look a little more Placing frame around main table
If you want an image frame around your centered site you need to have the images i.e. the shadow for the right and left which can be duplicated down.You will also need a header image and a footer image which will fit with the desired frame result. If you do not have any basic graphic design experience or knowledge, then rather opt for a simpler look and feel.
The next piece of code theoretically should not work, but to get the desired frame effect in ChannelAdvisor you need to do it this way.
- You will need to enter some internal css code in the top style erea:
<style>
td.shadow-l { width: 15px; background: url(.../shop/images/shadow_left.jpg) repeat-y;}
td.shadow-r { width: 15px; background: url(.../shop/images/shadow_right.jpg) repeat-y; }
</style> - Then using the same code from above (getting your site centered and background colour changed), you will need to add an extra table which is in red. Placing the topbar image that will flow in with the rest of the frame as a background; is not a bad idea. Also note that the top table takes the additional width (pointed out in red) that the bottom, you will be adding, will be.
NB!! All this will not work if you include the table tag as in the code above, identified in purple here:
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="bottom" bgcolor="#YOUR COLOR HERE" >
<div align="center"><br>
<br>
<table width="830" background="…/shadow_head.jpg" border="0" cellspacing="0" cellpadding="0" align="center">
Table code
!!!!!</table>!!!!!<<<<<MUST NOT BE HERE!!DELETE DELETE>>>>>>
</div>
</td>
</tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#YOUR COLOR HERE">
<div align="center">
<table width="830" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFEBF4">
<tr>
<td class="shadow-l" rowspan="2"></td>
<td class="td.shadow-center"></td>
<td class="shadow-r" rowspan="2"></td>
<tr>
<td width"800">
<table width="800" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#YOUR COLOR HERE">
Login to give us your comments on this SSC content
|
