CSS Large Logo for Page Header Design

I'm slowly improving my efforts with nopCommerce and CSS and I thought I'd share my experience with the header sections of styling as this gave me a little trouble, but was good to solve.

I started with nopClassic and I wanted a larger logo so I looked at this in the css:

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

If I fooled with the width and height the format just flowed all over the place.

To get around this I decided I had to do some absloute positioning.

The header needed to be fixed (this is output from windiff)

   .header
    {
<!   padding: 6px 6px 10px 5px;
<!   height: 60px;
!>   position: relative;
!>   top: 0;
!>   left: 0;
!>   padding: 6px 6px 5px 5px;
!>   height: 85px;
    }

   Adding relative to the header gives the 'position' for absolute positioning to be relative to.


Then a bigger logo:

    a.logo
    {
<!   background: url('images/logo.gif');
!>   background: url('images/biglogo.png');
!>   background-repeat: no-repeat;
      display: block;
<!   width: 225px;
!>   width: 700px;
<!   height: 60px;
!>   height: 85px;
      text-decoration: none;
      
    }


And then the bit to stop the selectors and links from wrapping and moving:

.header-selectors-wrapper
    {
!>   position:absolute;
!>   top: 40px;
!>   right: 4px;
      text-align: right;
      float: right;
      width: 500px;
    }

and

.header-links-wrapper
    {
!>   position:absolute;
!>   top: 0px;
!>   right: 0px;
!>
      float: right;
      text-align: right;
      width: 570px;
    }
    

After that was all working I styled the theme colours etc.

I'm not claiming this is the best way to do it, I'm just saying what worked for me and I thought I'd share it, have fun!

Thanks a lot for sharing Mikael,

This file will be of great help to me in the near future as I'm planning to do a similar customation.
Do you maybe have an example of your website to see how it looks like?
Thanks in advance.

grtz,

Ed.

Hi Ed,
My demo site has a big header http://demo.emporia.net.au/

Thanks man, I'll have a look.

Thanks a lot Mikael,
It's very close to what I was looking for so it's been a great help for me!
Have a nice day!

Ed.

Mike:

Your approach has helped me in that i now Know where these things get modified, but i have a question:

your symbols: <! and !>....do those cause the line to be commented out and therefore not executed?

Please help...i've spen the last 24 hrs. on this issue alone!
I visited your site and thought it was a wonderful job; I can't believe you  got such a large logo in there.
I am having a lot of trouble with very small ones

by the way, I know much of this is controlled via .css, but do you know which aspx holds the menu items and that whole header section?


thanks in advance!

Robert Lobaina
www.integratedbusiness.biz
[email protected]

rlobaina wrote:
It looks like the <! and !> are used to show how to modify the style (App_Themes\(your theme)\styles.css). Remove lines with <! and insert lines with !> .

The menu items in the header (Home page, New products, Search, My account, Blog, Contact Us) are located in Modules\HeaderMenu.ascx and the header is Modules\Header.ascx (contains the logo element, header links {Register/User, Log In/Log Out, Shopping Cart, Wishlist, etc.}, and the currency, tax and language selectors).

.

rlobaina wrote:
Hi Robert,
  I'm glad you find my stuff useful. The <! and the !> are generated when I compared the css's using windiff <! is old and !> means it is new. I'm sorry you wasted 24 hours on it, you should have known when to ask for help!

Menu items and stuff are in the nopCommerceStore/Modules directory, try header and headermenu. I wouldn't modify these unless you really need to, the CSS can do a lot for you and you can configure other items from the admin console.

Good luck and thanks for the feedback!

Thanks a bunch for your help and taking the time to communicate.
I finally designed a logo and got it to fit without throwing things out of whack.

Check it out:
www.integratedbusiness.biz

I have a tendency to like smaller logos.

If I could trouble you for one more question, would you happen to know how to get rid of the sorrounding grey area so we have a web page centered in a white background?.

Then the challenge would become to put a border around the middle content area where products are displayed.


Thanks in advance.

Robert Lobaina
[email protected]

I gave you the wrong address!

it is www.integratedbrands.biz

I took the  liberty of adding an edge to the right side of the whole page and it looks great!
Let me know if you want to do this also and i'll tell you where it's at in the the .css

Robert Lobaina