Customize UI design

Posted: 12 years ago

#703 Quote

Total Posts: 6

Hi,

We used nop-electronics theme (2.50 version) for our website. We replaced the images to suit our needs.

We have couple of issues in customizing the design. When we replace the Menu strip with our image it fit in to 1000px but we needed it 100%.

What we need:

We want the Menu (Categories Header Menu) strip and Footer to be 100%. We tried several ways but we could not get it done. Please help us in this regard.

Support

Posted: 12 years ago

#709 Quote

Status: Moderator
Total Posts: 1044

Hi,

I see what you mean. It will be a little tricky to implement as the main content in nopCommerce has a fixed width.

Except changes in css there is a little html reorganization that needs to be done in order to pull the header out of the main content so that it can have width 100%.

So the idea is to pull out the elements that you want to have width 100% out of the
<div class="master-wrapper-page">
        <div class="master-wrapper-content">
        </div>
</div>

elements and set the necessary styles.

We will give you the example for the header menu:

1. Open the ~\Themes\Electronics\Views\Shared\_Root.cshtml view and edit it in the following way:

<body>
    @Html.Action("WidgetsByZone", "Widget", new { widgetZone = Nop.Core.Domain.Cms.WidgetZone.AfterBodyStartHtmlTag })
            <div class="header">
                <div class="header-logo">
                    <a href="@storeLocation" class="logo">  </a>
                </div>
                <div class="header-links-wrapper">
                   @Html.Action("HeaderLinks", "Common")
                </div>
                <div class="header-shopping-bag">
                    @Html.Action("ShoppingCartBox", "Common")
                </div>
            </div>
            @if (categoriesHeaderMenuIntegrated)
            {
                @Html.Action("CategoriesHeaderMenu", "CategoriesHeaderMenu")
            }
    <div class="master-wrapper-page">
        <div class="master-wrapper-content">

the text in bold is the text that had been pulled out of the master-wrapper-page.

2. Add the following css:
.header
{
    padding: 0px 6px 5px 5px;
    height: 60px;
    width: 980px;
    margin:10px auto;
}

.categoriesHeaderMenu
{
    width: 100%;
    margin-top: 40px;
}

.master-wrapper-page
{
    width: 980px;
    margin: 0 auto 0;
    text-align: left;
}

.master-wrapper-content
{
    float: left;
    width: 980px;
    margin: 0 0 0;
    text-align: left;
    background: #FFF;
    padding-bottom: 15px;
}

p.s. the elements in bold are the new one that should be added or edited.

Now you will be able to change the menu strip with a image that is 100%.

The same idea should be applied when making the footer. Pull it out the

<div class="master-wrapper-page">
        <div class="master-wrapper-content">
        </div>
</div>

elements so that it has no fixed width.

Hope that helps!

[email protected]

Posted: 12 years ago

#735 Quote

Total Posts: 6

Hi,
Thanks for the reply. It was very helpful. I was successful in getting the
header menu to 100% width but i am facing a problem with aligning the <ul> inside the header menu to center. It always aligns to the left. Please help me in this regard.

Thanks in advance

Support

Posted: 12 years ago

#740 Quote

Status: Moderator
Total Posts: 1044

[email protected] wrote:

Hi,
Thanks for the reply. It was very helpful. I was successful in getting the
header menu to 100% width but i am facing a problem with aligning the <ul> inside the header menu to center. It always aligns to the left. Please help me in this regard.

Thanks in advance

Hi,

Could you send us a link to your store, so that we can see if we can help with centering the menu?

Best Regards,
Nop-Templates Support Team

[email protected]

Posted: 12 years ago

#742 Quote

Total Posts: 6

Hi,
Following is the link to our website:
http://ec2-46-137-198-91.ap-southeast-1.compute.amazonaws.com/

Thanks in advance

Support

Posted: 12 years ago

#743 Quote

Status: Moderator
Total Posts: 1044

[email protected] wrote:

Hi,
Following is the link to our website:
http://ec2-46-137-198-91.ap-southeast-1.compute.amazonaws.com/

Thanks in advance

Hi,

You need to set the background image to the div and to remove it from the ul element. You need to set margin auto for the left and right margin and to specify a width of 960px for the ul. Here is how it should look like after the changes:

.categoriesHeaderMenu {
width: 100%;
margin-top: 40px;
background-image: url('http://ec2-46-137-198-91.ap-southeast-1.compute.amazonaws.com/Plugins/SevenSpikes.Nop.Plugins.CategoriesHeaderMenu/Styles/images/menubg.png');
}

.sf-menu {
font-size: 14px;
height: 35px;
width: 960px;
margin: 0 auto 0 auto;
padding-left: 10px;
padding-bottom: 10px;
}

Hope this helps!

[email protected]

Posted: 12 years ago

#767 Quote

Total Posts: 6

Thanks for the quick response.It was very helpful. I was able to set the width to 100%
by the styles that you have suggested me. But I have a small problem. To the left side of the page there is a small gap maybe a 10px width gap. I could not find any left padding or left margin which is causing this. Can you please suggest me what can be done to remove the the small gap at the left of the page.
For your reference following is the url:
http://ec2-46-137-198-91.ap-southeast-1.compute.amazonaws.com

Thanks in advance
Ram Subhash

Support

Posted: 12 years ago

#769 Quote

Status: Moderator
Total Posts: 1044

Hi,

There is a margin: 8px set for the body, so you can set edit the css in the following way:

body
{
    background: white;
    font: 11px/1.55 arial, helvetica, sans-serif;
    color: black;
    text-align: center;
    margin: 0;
}

add the margin:0; to the class above.

and you may also would like to remove the margin-left from the header links for consistency. You can do this by changing the following:

.header-links-wrapper {
  color: white;
  margin-left: 10px;
  position: absolute;
  text-align: right;
  top: 0px;
  width: 100%;
  height: 20px;
  background-color: #61625F;
  left: 0px;
}

remove the margin-left: 10px; from the class above.

Hope that helps!

Naz@furi

Posted: 6 years ago

#14238 Quote

Total Posts: 1

I changed the master wrapper page padding

it somehow looks bad on some screens, like older devices.
they can't see a part of the page.
is there any way I can make it responsive for all devices.
Or at least can I change it back. I can't seem to find the css line for master wrapper page.
Tnx

ZornitsaIvanova

Posted: 6 years ago

#14239 Quote