nopCommerce HTML DIV Structure

Sometime its nice to have an idea of the page structure before you start designing. So here is a quick break down of the div structure of an unaltered nopCommerce home page.

This is the breakdown of a 3 column page layout for nopCommerce 1.90. I have removed the majority of the content so you can just view and quickly find the section you are looking for to make any necessary HTML or CSS changes you might need.

<div class="master-wrapper-page">        
<div class="master-wrapper-content">
<div class="header">
<div class="header-logo">
</div>
<div class="header-links-wrapper">
<div class="header-links">
</div>
</div>
<div class="header-selectors-wrapper">
<div class="header-taxDisplayTypeSelector">
</div>
<div class="header-currencyselector">
</div>
<div class="header-languageselector">
</div>
</div>
</div>
<div class="headermenu">
<div class="searchbox">

</div>

</div>
<div class="master-wrapper-leftside-3">
<div class="block block-category-navigation">
<div class="title"> Categories
</div>
<div class="clear">
</div>
<div class="listbox">

</div>
</div>
<div class="clear">
</div>
<div class="block block-manufacturer-navigation">
<div class="title"> Manufacturers
</div>
<div class="clear">
</div>
<div class="listbox">
<div class="viewall">
<a href="http://demo.nopcommerce.com/manufacturers.aspx"> View All</a>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="block block-popular-tags">
<div class="title"> Popular tags
</div>
<div class="clear">
</div>
<div class="listbox">
<div class="tags">

</div>
</div>
</div>
<div class="clear">
</div>
<div class="block block-info">
<div class="title"> Information
</div>
<div class="clear">
</div>
<div class="listbox">

</div>
</div>
<div class="clear">
</div>
</div>
<div class="master-wrapper-center-3">
<div class="master-wrapper-cph-3">
<div class="htmlcontent">
<div class="htmlcontent-title">
<h2 class="htmlcontent-header"> Welcome to our store</h2>
</div>
<div class="clear">
</div>
<div class="htmlcontent-body">

</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
<div class="home-page-product-grid">
<div class="boxtitle"> Featured Products
</div>
<div class="clear">
</div>
<table id="ctl00_ctl00_cph1_cph1_ctrlHomePageProducts_dlCatalog" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td class="item-box">
<div class="product-item">
<div class="picture">
<a id="ctl00_ctl00_cph1_cph1_ctrlHomePageProducts_dlCatalog_ctl00_hlImageLink" title="Show details for $25 Virtual Gift Card" href="http://demo.nopcommerce.com/products/89-25-virtual-gift-card.aspx">
<img title="Show details for $25 Virtual Gift Card" src="http://demo.nopcommerce.com/images/thumbs/0000171_125.jpeg" alt="Picture of $25 Virtual Gift Card" style="border-width:0px;" /></a>
</div>
<h2 class="product-title">
<a id="ctl00_ctl00_cph1_cph1_ctrlHomePageProducts_dlCatalog_ctl00_hlProduct" href="http://demo.nopcommerce.com/products/89-25-virtual-gift-card.aspx">$25 Virtual Gift Card</a> </h2>
</div> </td>
<td class="item-box">
<div class="product-item">
<div class="picture">
<a id="ctl00_ctl00_cph1_cph1_ctrlHomePageProducts_dlCatalog_ctl01_hlImageLink" title="Show details for Build your own computer" href="http://demo.nopcommerce.com/products/67-build-your-own-computer.aspx">
<img title="Show details for Build your own computer" src="http://demo.nopcommerce.com/images/thumbs/0000116_125.jpeg" alt="Picture of Build your own computer" style="border-width:0px;" /></a>
</div>
<h2 class="product-title">
<a id="ctl00_ctl00_cph1_cph1_ctrlHomePageProducts_dlCatalog_ctl01_hlProduct" href="http://demo.nopcommerce.com/products/67-build-your-own-computer.aspx">Build your own computer</a> </h2>
</div> </td>
<td class="item-box">
<div class="product-item">
<div class="picture">
<a id="ctl00_ctl00_cph1_cph1_ctrlHomePageProducts_dlCatalog_ctl02_hlImageLink" title="Show details for etnies Men&#39;s Digit Sneaker" href="http://demo.nopcommerce.com/products/50-etnies-mens-digit-sneaker.aspx">
<img title="Show details for etnies Men&#39;s Digit Sneaker" src="http://demo.nopcommerce.com/images/thumbs/0000090_125.jpg" alt="Picture of etnies Men&#39;s Digit Sneaker" style="border-width:0px;" /></a>
</div>
<h2 class="product-title">
<a id="ctl00_ctl00_cph1_cph1_ctrlHomePageProducts_dlCatalog_ctl02_hlProduct" href="http://demo.nopcommerce.com/products/50-etnies-mens-digit-sneaker.aspx">etnies Men&#39;s Digit Sneaker</a> </h2>
</div> </td>
</tr>
</table>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
<div class="newslist">
<div class="title">
<table style="width: 100%;">
<tr>
<td style="text-align: left; vertical-align: middle;"> News </td>
<td style="text-align: right; vertical-align: middle;">
<a href="http://demo.nopcommerce.com/newsrss.aspx?languageid=7">
<img id="ctl00_ctl00_cph1_cph1_ctrlHomePageNews_imgRSS" title="Click here to receive automatic NEWS updates from our site" src="images/icon_rss.gif" alt="RSS" style="border-width:0px;" /></a> </td>
</tr>
</table>
</div>
<div class="clear">
</div>
<div class="newsitems">
<div class="item">
<a class="newstitle" href="http://demo.nopcommerce.com/news/10-nopcommerce-new-release.aspx"> nopCommerce new release!</a>
<span class="newsdate">- Tuesday, August 10, 2010
</span>
<div class="newsdetails"> nopCommerce includes everything you need to begin your e-commerce online store. We have thought of everything and it's all included!<br /><br />nopCommerce is a fully customizable shopping cart. It's stable and highly usable. From downloads to documentation, www.nopCommerce.com offers a comprehensive base of information, resources, and support to the nopCommerce community.
</div>
<a href="http://demo.nopcommerce.com/news/10-nopcommerce-new-release.aspx" class="readmore"> details</a>
</div>
<div class="item">
<a class="newstitle" href="http://demo.nopcommerce.com/news/9-new-online-store-is-open.aspx"> New online store is open!</a>
<span class="newsdate">- Monday, August 09, 2010
</span>
<div class="newsdetails"> The new nopCommerce store is open now! We are very excited to offer our new range of products. We will be constantly adding to our range so please register on our site, this will enable you to keep up to date with any new products.
</div>
<a href="http://demo.nopcommerce.com/news/9-new-online-store-is-open.aspx" class="readmore"> details</a>
</div>
<div class="viewall">
<a href="http://demo.nopcommerce.com/newsarchive.aspx"> [View News Archive]</a>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
<div class="master-wrapper-rightside-3">
<div class="block block-shoppingcart">
<div class="title"> Shopping Cart
</div>
<div class="clear">
</div>
<div class="listbox"> You have no items in your shopping cart.
</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
<div class="block block-newsletter">
<div class="title"> Subscribe to newsletters
</div>
<div class="clear">
</div>
<div class="listbox">
<div id="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_pnlSubscribe">
<span>Email
</span>:
<input name="ctl00$ctl00$cph1$cph3$ctrlNewsLetterSubscriptionBoxControl$txtEmail$txtValue" type="text" id="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_txtEmail_txtValue" class="textBox" />
<span id="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_txtEmail_rfvValue" style="color:Red;display:none;">*
</span>
<span id="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_txtEmail_revValue" style="color:Red;display:none;">Wrong email format
</span>
<div class="options">
<input id="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_rbSubscribe" type="radio" name="ctl00$ctl00$cph1$cph3$ctrlNewsLetterSubscriptionBoxControl$NewsLetterSubscription" value="rbSubscribe" checked="checked" />
<label for="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_rbSubscribe">Subscribe
</label>
<input id="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_rbUnsubscribe" type="radio" name="ctl00$ctl00$cph1$cph3$ctrlNewsLetterSubscriptionBoxControl$NewsLetterSubscription" value="rbUnsubscribe" />
<label for="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_rbUnsubscribe">Unsubscribe
</label>
</div>
<div class="clear">
</div>
<div class="buttons">
<input type="submit" name="ctl00$ctl00$cph1$cph3$ctrlNewsLetterSubscriptionBoxControl$btnSubscribe" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$cph1$cph3$ctrlNewsLetterSubscriptionBoxControl$btnSubscribe&quot;, &quot;&quot;, true, &quot;NewsLetterSubscriptionValidation&quot;, &quot;&quot;, false, false))" id="ctl00_ctl00_cph1_cph3_ctrlNewsLetterSubscriptionBoxControl_btnSubscribe" class="newsletterbox-subscribebutton" />
</div>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
<div class="block block-poll">
<div class="title"> Community Poll
</div>
<div class="clear">
</div>
<div class="listbox">
<div class="poll-item">
<span id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_lblPollName" class="poll-display-text">Do you like nopCommerce?
</span>
<div id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_pnlTakePoll" class="poll-take-poll">
<table id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers" class="poll-answers" border="0">
<tr> <td>
<input id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_0" type="radio" name="ctl00$ctl00$cph1$cph3$ctrlPollRight$ctrlPoll$rblPollAnswers" value="7" />
<label for="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_0">Excellent
</label></td>
</tr>
<tr> <td>
<input id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_1" type="radio" name="ctl00$ctl00$cph1$cph3$ctrlPollRight$ctrlPoll$rblPollAnswers" value="8" />
<label for="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_1">Good
</label></td>
</tr>
<tr> <td>
<input id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_2" type="radio" name="ctl00$ctl00$cph1$cph3$ctrlPollRight$ctrlPoll$rblPollAnswers" value="9" />
<label for="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_2">Poor
</label></td>
</tr>
<tr> <td>
<input id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_3" type="radio" name="ctl00$ctl00$cph1$cph3$ctrlPollRight$ctrlPoll$rblPollAnswers" value="10" />
<label for="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rblPollAnswers_3">Very bad
</label></td>
</tr>
</table>
<input type="submit" name="ctl00$ctl00$cph1$cph3$ctrlPollRight$ctrlPoll$btnSubmitVoteRecord" value="Vote" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$cph1$cph3$ctrlPollRight$ctrlPoll$btnSubmitVoteRecord&quot;, &quot;&quot;, true, &quot;Poll.2.ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll&quot;, &quot;&quot;, false, false))" id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_btnSubmitVoteRecord" class="submitpollvotebutton" />
<span id="ctl00_ctl00_cph1_cph3_ctrlPollRight_ctrlPoll_rfvPollAnswers" title="Select an option." style="color:Red;display:none;">Select an option.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
<div class="footer-poweredby"> Powered by
<a href="http://www.nopcommerce.com/">nopCommerce</a>
</div>
<div class="footer-disclaimer"> Copyright &copy; 2011 nopCommerce demo store. All rights reserved.
</div>
<div class="footer-storetheme">
</div>
</div>
</div>