an ASP.NET Open Source CMS & eCommerce platform
Search:
Skip Navigation LinksHome > DotShoppingCart Blog
DotShoppingCart Blog
Create Telerik alike menu in DotShoppingCart
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.
 
 
New features in V3.1
There are a lot of bug fixes made into DotShoppingCart V3.1. Along with the bug fixes you can find a few new features as follows.
Recent Comments
danny jones said ...
Hi... I am inexperiance to build up ECommenrce type sites.I have a little bits knowladge ...
molakaj said ...
What a great approach to the subject, I was looking for. Thanks for these tips http://www ...
jane said ...
Thank you for this useful information.
furnace parts said ...
Congrats on V4.0.....It is so easy to use  
Travis said ...
I just bought DSC Suite V4.5 and it is more solid then ever. I hope I am #1 buyer of this ...