Master Pages?

Hello All,
I have a question around (what I think has to do with MasterPages).  I understand that we can define the column layouts/masterpages in each of the individual pages by updating the line of code that says <%@ Page Language="C#" MasterPageFile="~/MasterPages/TwoColumn.master" AutoEventWireup="true".  I also understand that we can do some level of customization, say to the homepage, by going into the Admin module \ Content Management \ Topics and find the file called "HomePageText".  But if I wanted to customize the actual main section of the master page where do I do that?  For example, if I have a page that is defined as having TwoColumns, the left nav shows sections such as Shopping Cart, Categories, Manufacturers, then the next column contains the main content of the page and has a white back drop.  I wanted to add a border around that section but do not understand how to do that.  I was thinking I could change the Root Master page layout since the section I am refering to is contained in all of the layouts but do not see how that is poossible.

This was a little hard to explain so hopefully someone out there has a clue to what I trying to get at.

Thanks!

madv1457, not sure if this will help because i changed some of the id's and names but i think what you are looking for is the  master-wrapper-center div. This may have changed in later versions of NOP though so YMMV. Anyway, what i would suggest is to use a developer extension to your web browser that lets you cursor over DOM elements in the web page so that you can find the element that you want to modify. For example, in Chrome, load the main page of the site and turn on developer tools (right-click the page in Mozilla or Chrome and select 'Inspect Element'), then move your cursor over the elements (within the tools window) until the target is highlighted and you will have your element name. Search for that in the code and modify away. Hope this helps...jeff

hey madv,

Im gonna explain how can do you  know what controls which on the masterpage.

each section is controlled by a specific control, you can find the list of controls under Modules folder.

to identify which controller controls which section you can refer to the code

i.e.

say you want to change the minishoppingcart style, the line that controls that is

<nopCommerce:MiniShoppingCartBox ID="ctrlMiniShoppingCartBox" runat="server" />

on top of the master page, you will see a bunch of register function, find a matching id

<%@ Register TagPrefix="nopCommerce" TagName="MiniShoppingCartBox" Src="~/Modules/MiniShoppingCartBox.ascx" %>

so your mini shopping car controll is MiniShoppingCartBox.ascx

therefore you need to modify that file

hope that helps

Jeff and kiddz7,
Thanks so much for taking the time to help me out.  I'm definitely a bit closer now and learn more with each post.

One other question.  The main header for me is based on the standard darkOrange template so I am showing Home Page | New Products | My Account | Blog | Contact us. 1.) What would I do if I wanted to change "New Products" to just "Products"?  Also, what would I need todo if I wanted to change the menu text out for actual icons?

I found the HeaderMenus.ascx file which shows the code below, but not sure how to rename a menu item or swap them out for icons...

Thanks again for the help!


<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.HeaderMenuControl"
    CodeBehind="HeaderMenu.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="SearchBox" Src="~/Modules/SearchBox.ascx" %>
<div class="headermenu">
   <!-- <div class="searchbox">
        <nopCommerce:SearchBox runat="server" ID="ctrlSearchBox">
        </nopCommerce:SearchBox>
    </div>-->

    <ul class="topmenu">
        
        <li><a href="<%=CommonHelper.GetStoreLocation()%>">
            <%=GetLocaleResourceString("Content.HomePage")%></a> </li>
        <% if (this.ProductService.RecentlyAddedProductsEnabled)
           { %>
        <li><a href="<%=Page.ResolveUrl("~/recentlyaddedproducts.aspx")%>">
            <%=GetLocaleResourceString("Products.NewProducts")%></a> </li>
        <%} %>
        <!--<li><a href="<%=Page.ResolveUrl("~/search.aspx")%>">
            <%=GetLocaleResourceString("Search.Search")%></a> </li>-->
        <li><a href="<%= SEOHelper.GetMyAccountUrl()%>">
            <%=GetLocaleResourceString("Account.MyAccount")%></a> </li>
        <% if (this.BlogService.BlogEnabled)
           { %>
        <li><a href="<%= SEOHelper.GetBlogUrl()%>">
            <%=GetLocaleResourceString("Blog.Blog")%></a> </li>
        <%} %>
        <% if (this.ForumService.ForumsEnabled)
           { %>
        <li><a href="<%= SEOHelper.GetForumMainUrl()%>">
            <%=GetLocaleResourceString("Forum.Forums")%></a></li>
        <%} %>
        <li><a href="<%=Page.ResolveUrl("~/contactus.aspx")%>">
            <%=GetLocaleResourceString("ContactUs.ContactUs")%></a> </li>
    </ul>
</div>

hey madv,

the wording are saved on the database so it is easily customize, so  what you need to do is

from your admin, go to content management --> localization

then search for resource name Products.NewProducts, change new products to products

your 2nd question, im not too sure what you mean

madv:

In order to change a link text to icon all you need to do is change the name code with an image code.

Example:

Change:
<li><a href="<%=CommonHelper.GetStoreLocation()%>">
            <%=GetLocaleResourceString("Content.HomePage")%></a> </li>

With:
<li><a href="<%=CommonHelper.GetStoreLocation()%>">
            <img src="images/example.jpg"></a> </li>

Great feedback...really appreciate the help everyone.

Jnet,
wanted to follow-up on a comment you made around the master-wrapper-center div. Basically, I believe what I want to do is create a shadow effect around the cph1 section.  I have a series of files in my existing website that creates a shadow around the main content area and wanted to do the same on my nopCommerce site.  So a couple of questions.

I noticed in the Root.Master there is the section below.  Is this where I would add the image files to create the shadow effect?  if so, do you have any tips on how I would embedd my 4 images files to create the shadow (essentially, I have a left, right, top, and bottom image file.

<body>
    <form id="form1" runat="server">
    <div class="master-wrapper-page">
        <div class="master-wrapper-content">
            <nopCommerce:Header ID="ctrlHeader" runat="server" />
            <nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
            <asp:ContentPlaceHolder ID="cph1" runat="server">
            </asp:ContentPlaceHolder>
            <div class="clear">
            </div>
        </div>
        <nopCommerce:GoogleAdsense runat="server" ID="ctrlGoogleAdsense" />
        <nopCommerce:Footer ID="ctrlFooter" runat="server" />
    </div>
    </form>
<asp:PlaceHolder id="phAnalyticsBody" runat="server" />
</body>


Thanks for the help!
Mark

Mark,
If you want to assign those images to the borders of your container div then you would put the images in your app_theme images folder and then reference them by the url attribute within your CSS file. However, googling the application of images to a div's border returns many different ways of people trying to achieve this effect so not sure what is the best way other than the images would be in the folder that i mentioned above.
The other way to try is to just put the images as elements in your masterpage with an ID or class attribute that you can reference within the CSS and try to position them that way. Similar to this: <asp:Image ID="foobah1" CssClass="imageleft" runat="server" ImageUrl="~/images/doodad.png" alt="google likes an alt for all images" />

Hi Jnet,
Thanks so much for the help with this!

--Mark