New logo covered by Nav Bar

[LMStore]

Hi,
I'm new to this forum and to Zen Cart (well, not quite - I set up a cart for my former employer about 5 years ago but I'm starting from the beginning again!).
I've succesfully installed Zen Cart on my new website and then downloaded the Bask Black template. This is running fine, I've found my way round the admin and changed out some things and I am almost ready to add my first products.
My problem is this - I changed the logo.gif for my own header to match the remainder of my site. Unfortunately, this logo is considerably larger (900px X 175px) and, while it shows up fine, the nav bar, search box etc are overlaying the header. So I guess I need to find a way to move this content lower down the page. I've searched this forum, google and YouTube for a solution to this problem but have not found anything to help me.
Is what I am wanting to do possible and, if so, which files do I need to edit? I've checked out the CSS files and any other file that I can think of that might be related. I'm comfortable with html, FTP etc. and quite happy using cPanel or Dreamweavern for editing.
Thyanking you in advance for a resolution to this. I really dont want to have to revert to a much smaller logo.
Frank

[kobra]

Post a link to this for exact guidance

It is most likely in your css - stylesheet under logo wrapper

[LMStore]

Post a link to this for exact guidance

It is most likely in your css - stylesheet under logo wrapper

Hi Kobra,
The site is www.linuxmediastore.com/Store. Yes, I have been looking carefully through the stylesheet (even printed it off - all 13 pages of it!) as I thought that was were I might be able to change things but I've had no success yet. Any advice will be much appreciated.
Frank

[RodG]

stylesheet.css line#216


------------------------------
#logoWrapper {
height: 50px;
}
-------------------------------

Comment out the height setting.

That is ONE solution. There's probably others.

Cheers
RodG

[LMStore]

stylesheet.css line#216


------------------------------
#logoWrapper {
height: 50px;
}
-------------------------------

Comment out the height setting.

That is ONE solution. There's probably others.

Cheers
RodG

Thanks for your input Rod. I've tried that (it's commented out at the moment) and also changing the height to 200px - neither made any difference. I'm lost at the moment and don't know what else I can do.
Frank

[kobra]

I've tried that (it's commented out at the moment) and also changing the height to 200px - neither made any difference

Are you changing the stylesheet located here??

includes/templates/bask_black/css/stylesheet.css

[LMStore]

Are you changing the stylesheet located here??

includes/templates/bask_black/css/stylesheet.css

Kobra, you genius! I thought I was but I obviously wasn't! That has solved the problem. Should I have 2 stylesheet.css files? I won't make the same mistake again.
Thanks ever so much. I can now get on with populating the store.
Cheers!
Frank

[kobra]

Should I have 2 stylesheet.css files?

These are template specific and you should have at least one .css file for each template you have

[LMStore]

These are template specific and you should have at least one .css file for each template you have

Right, I see. Many thanks for your explanation. I know now what I am dealing with.
Cheers
Frank

[RodG]

Right, I see. Many thanks for your explanation. I know now what I am dealing with.
Cheers
Frank

Since you show an interest in acquiring a little more knowledge, you might be interested to know how I managed to come up with the line number and the change needed to invoke a solution.

It's no secret to many of us, but many of the current WeBrowsers have 'debugging' type tools (either inbuilt of via a plug-in). For a long time I used to recommended FireFox with the 'firebug' plugin. These days I find myself using Chrome though.

Anyway, when viewing a webpage (any webpage) with one of these Browsers you can right-click on any 'element' on the page (in your case I used the logo image) and select the option labeled 'Inspect Element' (or similar).

With Chrome, this brings up a screen with the html source code in one panel, and the page styles in another. This styles panel shows the name of the .css file and the line number in the file where the given style is defined..... But wait, there's more. Not only can you *see* this information, you can also *change* it and the effects of the change will be *instantly* shown on the webpage itself (therefore it pays be able to view both the original page and the debug page at the same time).

The changes made here aren't permanent though. If/when you refresh the webpage the original styles will be re-applied. This mean that you can 'tweak' the .css to your hearts content. If/when you mess thing up, just refresh the page and start again. If/when you you find a tweak/change that you wish to keep simply take note of the change and then apply it to the relevant .css file with a text editor.

You'll never have a need to print out the .css ever again (save those trees), and you will learn a *lot* more about .css simply by 'playing' with this than you could ever hope to learn from reading entire books on the subject.

Yes, you *will* make the page look a mess by changing things semi-randomly, but as I say, the changes aren't permanent until you hardcode them into the .css stylesheet itself.

Certainly worth looking into if you plan to make changes to the look of the site.

Cheers
RodG