master.css

I'm new to nopcommerce and am attempting to bring up a site (http://dixieonline.org.serv7.temphostspace.com/). I've added our logo 750x150 to the main page, but cannot increase the height of the header.  I've edited the following sections of the master.css:

.header
{
  padding: 6px 6px 10px 5px;
  height: 150px;
}

a.logo
{
  background: url('images/logo.gif')  no-repeat;
  display: block;
  width: 225px;
  height: 150px;
  text-decoration: none;

Any ideas as to what I am doing wrong?

look at
Header.ascx

you will probaly have to play around with the <div>'s to reposition the header links and the header selectors (if you are keeping these in the header, you will need to make  height: more than  150px;( in the .header class ) to allow for them)

If you are using Internet Explorer, hit F12 when you are looking at your page. This brings up the developer toolbar. You can use the selector (top left hand corner) to select the element you want to study and it will show you all the styles applied to that element and where the rules can be found.

In Firefox you can do the same with Firebug bug you have to install it first.

These are invaluable tools for designing a website.

jss1199 wrote:

It looks like you are using nopCommerce 1.50, the problem is that you have stylesheets from different versions of nopCommerce (1.50 and 1.40 or older) in your theme and the changes you make are being overridden by the multiple style declarations. The file master.css doesn't exist for 1.50; all the styles were merged into one file styles.css.

You should remove *.css files from App_Themes/nopClassic except styles.css (apply any other changes you made to master.css, base.css, etc. to styles.css)

The following should get your full logo displayed:

a.logo
{
  background: url('images/logo.gif') no-repeat;
  display: block;
  width: 750px;
  height: 150px;
  text-decoration: none;
}

.header
{
  padding: 6px 6px 10px 5px;
  height: 200px; /* to allow for links and selectors above logo */
}

You will need to modify Modules\Header.ascx and move the logo div below the header-links and header-selectors-wrapper.

Full modified Modules\Header.ascx file (moved code in bold):

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.HeaderControl"
    CodeBehind="Header.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="CurrencySelector" Src="~/Modules/CurrencySelector.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="LanguageSelector" Src="~/Modules/LanguageSelector.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="TaxDisplayTypeSelector" Src="~/Modules/TaxDisplayTypeSelector.ascx" %>

<div class="header">    
    <div class="header-links-wrapper">
        <div class="header-links">
            <ul>
                <asp:LoginView ID="topLoginView" runat="server">
                    <AnonymousTemplate>
                        <li><a href="<%=Page.ResolveUrl("~/Register.aspx")%>" class="ico-register">
                            <%=GetLocaleResourceString("Account.Register")%></a></li>
                        <li><a href="<%=Page.ResolveUrl("~/Login.aspx")%>" class="ico-login">
                            <%=GetLocaleResourceString("Account.Login")%></a></li>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <li>
                            <%=Page.User.Identity.Name %>
                        </li>
                        <li><a href="<%=Page.ResolveUrl("~/Logout.aspx")%>" class="ico-logout">
                            <%=GetLocaleResourceString("Account.Logout")%></a> </li>
                        <% if (ForumManager.AllowPrivateMessages)
                           { %>
                        <li><a href="<%=Page.ResolveUrl("~/PrivateMessages.aspx")%>" class="ico-inbox">
                            <%=GetLocaleResourceString("PrivateMessages.Inbox")%></a>
                            <%=GetUnreadPrivateMessages()%>
                        </li>
                        <%} %>
                    </LoggedInTemplate>
                </asp:LoginView>
                <li><a href="<%=Page.ResolveUrl("~/ShoppingCart.aspx")%>" class="ico-cart">
                    <%=GetLocaleResourceString("Account.ShoppingCart")%>
                </a><a href="<%=Page.ResolveUrl("~/ShoppingCart.aspx")%>">(<%=ShoppingCartManager.GetCurrentShoppingCart(ShoppingCartTypeEnum.ShoppingCart).Count%>)</a>
                </li>
                <% if (SettingManager.GetSettingValueBoolean("Common.EnableWishlist"))
                   { %>
                <li><a href="<%=Page.ResolveUrl("~/Wishlist.aspx")%>" class="ico-wishlist">
                    <%=GetLocaleResourceString("Wishlist.Wishlist")%></a> <a href="<%=Page.ResolveUrl("~/Wishlist.aspx")%>">
                        (<%=ShoppingCartManager.GetCurrentShoppingCart(ShoppingCartTypeEnum.Wishlist).Count%>)</a></li>
                <%} %>
                <% if (NopContext.Current.User != null && NopContext.Current.User.IsAdmin)
                   { %>
                <li><a href="<%=Page.ResolveUrl("~/Administration/")%>" class="ico-admin">
                    <%=GetLocaleResourceString("Account.Administration")%></a> </li>
                <%} %>
            </ul>
        </div>
    </div>
    <div class="header-selectors-wrapper">
        <div class="header-taxDisplayTypeSelector">
            <nopCommerce:TaxDisplayTypeSelector runat="server" ID="ctrlTaxDisplayTypeSelector">
            </nopCommerce:TaxDisplayTypeSelector>
        </div>
        <div class="header-currencyselector">
            <nopCommerce:CurrencySelector runat="server" ID="ctrlCurrencySelector"></nopCommerce:CurrencySelector>
        </div>
        <div class="header-languageSelector">
            <nopCommerce:LanguageSelector runat="server" ID="ctrlLanguageSelector"></nopCommerce:LanguageSelector>
        </div>
    </div>
    <div class="header-logo">
        <a href="<%=CommonHelper.GetStoreLocation()%>" class="logo">&nbsp; </a>
    </div>
</div>

This is for version 1.50.

.

mb - Thanks for the information.  I performed the changes and the full logo is still not displayed.  see http://www.dixieonline.org.serv7.temphostspace.com/

Thanks much for your help.

jss1199 wrote:

You changed your logo size to a smaller version (300x60). If are going to use a smaller logo, you don't need the previous change You can move the logo div back (or leave it because wide logos can interfere with header-links-wrapper and header-selectors-wrapper) and change the width of the a.logo and height of .header.

Also, your searchbox div is not large enough to contain the textbox and button:
.searchbox
{
  float: left;
  width: 200px;
  display: inline;
  padding-left: 5px;
}

.

mb - thanks again for all the help.  Think I have it sorted for now.

http://www.dixiestore.org/default.aspx