Hello Everyone,
I want to customize store from Channel Advisor. I have create customize design for the store.
But i dont know in depth how to customize the design in the channel advisor.
If any body knows how to customize the design in Channel Advisor. Please Help me out from this.
Thanks In Advance.
Koustubh
Web Developer
Hi,
Looking at the way they have their own template you'll have to customise their custom css ids and classes.
<Style Type="text/css">
<!--
A:link { color: #59076B }
A:active { color: #59076B }
A:visited { color: #59076B }
A:hover { color: #000000 }
body {
font-family: Arial;
color: #000000;
font-size: small;
}
td {
font-family: Arial;
color: #000000;
font-size: small;
}
.headerbg { background-color: #D0B8CE }
.headerbg:link { color: #FFFFFF }
.headerbg:active { color: #FFFFFF }
.headerbg:visited { color: #FFFFFF }
.headerbg:hover { color: #E1E1E1 }
.topbar { background-color: #6E2A67 }
.mainnavon { color: #FFFFFF; background-color: #BA91A8 }
.mainnavontxt { color: #FFFFFF; text-decoration: none }
.mainnavontxt:link { color: #FFFFFF }
.mainnavontxt:active { color: #FFFFFF }
.mainnavontxt:visited { color: #FFFFFF }
.mainnavontxt:hover { color: #FFFFFF; text-decoration: underline }
.mainnavdiv { color: #FFFFFF }
.mainnavoff { }
.mainnavoff:hover { color: #FFFFFF; background-color: #6E2A67 }
.mainnavofftxt { color: #FFFFFF; text-decoration: none }
.mainnavofftxt:link { color: #FFFFFF }
.mainnavofftxt:active { color: #FFFFFF }
.mainnavofftxt:visited { color: #FFFFFF }
.mainnavofftxt:hover { color: #FFFFFF; text-decoration: underline }
.framebghorizontal { background-color: #000000 }
.framebgvertical { background-color: #000000 }
.sidebar { background-color: #E1E1E1 }
.searchtxt { font-weight: bold; color: #000000 }
.searchtxt:link { font-weight: normal; color: #000000 }
.searchtxt:hover { font-weight: normal; color: #000000 }
.searchtxt:visited { font-weight: normal; color: #000000 }
.searchtxt:active { font-weight: normal; color: #000000 }
.searchboxbg { background-color: #E1E1E1 }
.catdiv { background-color: #FFFFFF }
.catalogtitle { font-weight: bold; color: #FFFFFF }
.cattitlebg { background-color: #BB82C7 }
.catoff { color: #8D22A4; font-weight: bold; text-decoration: none; background-color: #E1E1E1; }
.catoff:link { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:active { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:visited { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:hover { color: #59076B; font-weight: bold; text-decoration: none }
.catsub { font-weight: normal; text-decoration: none }
.catsub:link { font-weight: normal; text-decoration: none }
.catsub:active { font-weight: normal; text-decoration: none }
.catsub:visited { font-weight: normal; text-decoration: none }
.catsub:hover { font-weight: normal; text-decoration: none }
.caton { background-color: #59076B; }
.caton:link { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:active { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:visited { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:hover { color: #BB82C7; font-weight: bold; text-decoration: none }
.categorybg { background-color: #E1E1E1 }
.history { font-weight: bold; color: #BB82C7 }
.history:link { color: #FFFFFF }
.history:active { color: #FFFFFF }
.history:visited { color: #FFFFFF }
.history:hover { color: #BB82C7 }
.historybg { background-color: #59076B }
.bottombar { background-color: #59076B; font-size: xx-small; COLOR: #BB82C7 }
.bottombar:link { font-weight: bold; color: #FFFFFF }
.bottombar:active { font-weight: bold; color: #FFFFFF }
.bottombar:visited { font-weight: bold; color: #FFFFFF }
.bottombar:hover { font-weight: bold; color: #FFFFFF }
-->
</Style>Don't know if you've been able to have a look at this or not but you should be able to insert this style information into the header using the advanced html mode. Don't think there's really any other way of doing it...
I'm looking for a bit of help on customising this as well.
Anyway hope I've been able to help a little.
Thank You Very Much anarki2k3 For your help
I used this before but i have only be changed the colors and and all other things,
but my problem is that i have my own customize template that i have designed, that i want to integrate in the Channel Advisor. Also i want to change the width of the table that CA already have and want my layout in the middle, Any help in this would be graet for me.
And again Thanks [:)]
Hi,
Looking at the way they have their own template you'll have to customise their custom css ids and classes.
<Style Type="text/css"> <!-- A:link { color: #59076B } A:active { color: #59076B } A:visited { color: #59076B } A:hover { color: #000000 } body { font-family: Arial; color: #000000; font-size: small; } td { font-family: Arial; color: #000000; font-size: small; } .headerbg { background-color: #D0B8CE } .headerbg:link { color: #FFFFFF } .headerbg:active { color: #FFFFFF } .headerbg:visited { color: #FFFFFF } .headerbg:hover { color: #E1E1E1 } .topbar { background-color: #6E2A67 } .mainnavon { color: #FFFFFF; background-color: #BA91A8 } .mainnavontxt { color: #FFFFFF; text-decoration: none } .mainnavontxt:link { color: #FFFFFF } .mainnavontxt:active { color: #FFFFFF } .mainnavontxt:visited { color: #FFFFFF } .mainnavontxt:hover { color: #FFFFFF; text-decoration: underline } .mainnavdiv { color: #FFFFFF } .mainnavoff { } .mainnavoff:hover { color: #FFFFFF; background-color: #6E2A67 } .mainnavofftxt { color: #FFFFFF; text-decoration: none } .mainnavofftxt:link { color: #FFFFFF } .mainnavofftxt:active { color: #FFFFFF } .mainnavofftxt:visited { color: #FFFFFF } .mainnavofftxt:hover { color: #FFFFFF; text-decoration: underline } .framebghorizontal { background-color: #000000 } .framebgvertical { background-color: #000000 } .sidebar { background-color: #E1E1E1 } .searchtxt { font-weight: bold; color: #000000 } .searchtxt:link { font-weight: normal; color: #000000 } .searchtxt:hover { font-weight: normal; color: #000000 } .searchtxt:visited { font-weight: normal; color: #000000 } .searchtxt:active { font-weight: normal; color: #000000 } .searchboxbg { background-color: #E1E1E1 } .catdiv { background-color: #FFFFFF } .catalogtitle { font-weight: bold; color: #FFFFFF } .cattitlebg { background-color: #BB82C7 } .catoff { color: #8D22A4; font-weight: bold; text-decoration: none; background-color: #E1E1E1; } .catoff:link { color: #8D22A4; font-weight: bold; text-decoration: none } .catoff:active { color: #8D22A4; font-weight: bold; text-decoration: none } .catoff:visited { color: #8D22A4; font-weight: bold; text-decoration: none } .catoff:hover { color: #59076B; font-weight: bold; text-decoration: none } .catsub { font-weight: normal; text-decoration: none } .catsub:link { font-weight: normal; text-decoration: none } .catsub:active { font-weight: normal; text-decoration: none } .catsub:visited { font-weight: normal; text-decoration: none } .catsub:hover { font-weight: normal; text-decoration: none } .caton { background-color: #59076B; } .caton:link { color: #BB82C7; font-weight: bold; text-decoration: none } .caton:active { color: #BB82C7; font-weight: bold; text-decoration: none } .caton:visited { color: #BB82C7; font-weight: bold; text-decoration: none } .caton:hover { color: #BB82C7; font-weight: bold; text-decoration: none } .categorybg { background-color: #E1E1E1 } .history { font-weight: bold; color: #BB82C7 } .history:link { color: #FFFFFF } .history:active { color: #FFFFFF } .history:visited { color: #FFFFFF } .history:hover { color: #BB82C7 } .historybg { background-color: #59076B } .bottombar { background-color: #59076B; font-size: xx-small; COLOR: #BB82C7 } .bottombar:link { font-weight: bold; color: #FFFFFF } .bottombar:active { font-weight: bold; color: #FFFFFF } .bottombar:visited { font-weight: bold; color: #FFFFFF } .bottombar:hover { font-weight: bold; color: #FFFFFF } --> </Style>Don't know if you've been able to have a look at this or not but you should be able to insert this style information into the header using the advanced html mode. Don't think there's really any other way of doing it...
I'm looking for a bit of help on customising this as well.
Anyway hope I've been able to help a little.
The method I've used is a little messy but here it is:
<style type="text/css">
/*centre in ie*/
body { text-align: center; }
/*this is to size and centre the overall layout*/
table { width: 900px; margin: 0 auto; }
/*this stops all other tables being 900px*/
table table { width: auto; }
</style>Hope that helps a little bit, that's all i've done that's been really custom. I'm mainly just using custom headers and manipulating their css.
Let me know how it goes.
Phil
I too have the same concern. I have a client that uses Channel Advisor. She has not activated the store. We have a custom front-end that was developed and want to integrate this into the store so it is a seamless transition. Where do I get the CSS code that I can work with? What about the original file that it pulls to?
Nicole
Web Developer
Hello Everyone,
I want to customize store from Channel Advisor. I have create customize design for the store.
But i dont know in depth how to customize the design in the channel advisor.
If any body knows how to customize the design in Channel Advisor. Please Help me out from this.Thanks In Advance.
Koustubh
Web Developer
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.