| By _DSCRoot_ on 3/31/2009 |
Customization
|
I had one person asking how to implement
Telerik alike menu in DotShoppingCart. In this post I will describe how you can use the dynamic image creating feature in DotShoppingCart along with some basic CSS tricks to archieve this.
1. Start off the Legacy Theme
2. Change Accent colors.
3. Update the menu CSS and add search box CSS in the Legacy Theme "App_Data\Themes\Themes_Template\Legacy\Default.css"
div.mainmenu div.tab a:link, div.mainmenu div.tab a:visited {
background: url('/dyimage.axd?type=boxHeader&width=120&height=30&cornersize=0') no-repeat;
float: left;
margin-right: 1px;
width: 120px;
height: 30px;
color: %Accent Fore Color%;
font-weight: bold;
text-decoration: none;
text-align: center;
}
div.mainmenu div.tab a:active, div.mainmenu div.tab a.selected{
background: url('/dyimage.axd?type=boxHeader&subtype=highlight&width=120&height=30&cornersize=0&gradient=False') no-repeat;
color: %Accent Highlight Fore Color%;
}
div.mainmenu div.tab a:hover {
background: url('/dyimage.axd?type=boxHeader&subtype=highlight&width=120&height=30&cornersize=0') no-repeat;
color: %Accent Highlight Fore Color%;
}
td.searchBar {
background: url('/dyimage.axd?type=boxHeader&width=1&height=30&cornersize=0') repeat;
vertical-align: middle;
padding-left:10px;
border-right: solid 1px %Border Color%;
}
.searchShell {
background:transparent url('/web/images/searchBoxBg.gif') no-repeat scroll 0;
}
.searchInputBox {
height:13px;
line-height:12px;
margin-left:10px;
padding:0;
vertical-align:middle;
width:172px;
border:0 none;
}
.searchButton {
background:transparent none repeat scroll 0 0;
cursor:pointer;
height:22px;
vertical-align:middle;
width:23px;
border:0 none;
}
4. Update the search user control "Controls\Blocks\Search.ascx" to use the new search CSS.
<asp:Panel id="pnlBlockContent" runat="server">
<div class="searchShell">
<input type="text" class="searchInputBox" name="txtSearch" onkeydown="return GoSearch(event)" />
<asp:Button id="btnDoSearch" runat="server" cssclass="searchButton" />
</div>
</asp:Panel>
And finally you will get this.