Zen Theme: Change location of Header and Navigation Bar

By KennyVanLent on 19 Sep 2010 at 17:43 UTC

Below are two images, one how it is and one how it should be. (Images attached)

All the changes have been done in "layout-fixed.css", is this ok? (Document attached)

Could someone help me with the changes as in the image please?

http://www.2shared.com/document/iKrzY1MC/layout-fixed.html

PS: Where can I manually add files (via FileZilla) so others can download? I cannot place any files in default/files (no permission) and on other places it's not reachable.

PPS: How to show images in here? ( doesn't works, though I've seen images before in these forums)

Comments

Can't access image files or css

SweeneyTodd commented 19 September 2010 at 17:53

Can't access image files or css while your site is offline.

You may be better off having the site online so people can use Firebug to play with the layout.

Images and File location changed | Site Online for FireBug

KennyVanLent commented 19 September 2010 at 17:57

Have changed the location of images and files and have put the website online for FireBug users.

Thanks for your quick response ;)

The image files are showing

SweeneyTodd commented 19 September 2010 at 18:06

The image files are showing as blank and you have removed the link to your web site.

Links should work now

KennyVanLent commented 19 September 2010 at 22:39

Redone links.

Here are a couple of the

SweeneyTodd commented 20 September 2010 at 07:38

Here are a couple of the solutions you want while I have a few minutes:

the bullets for the unordered list can be changed using css. This page http://w3schools.com/css/css_list.asp has an example.
you might be able to change the breadcrumb separators to images using a theme override function (theme_breadcrumb) - see the api http://api.drupal.org/api/function/theme_breadcrumb/6 or see http://drupal.org/node/64067. Another possibility is to change remove the breadcrumb separator in your theme and use a background image e.g.

.breadcrumb a {
  background: url(images/breadcrumb.png) no-repeat right;
  padding-right: 15px;

Search box in a block discussion here http://drupal.org/node/362700

A few more tips

SweeneyTodd commented 20 September 2010 at 10:09

Try putting the logo into a block (an html img not using php code) and positioning it in the left sidebar. You can use css to change the styling of the block. If you want it overlapping the header region, then you might need a negative top margin on the left side bar. Alternatively, put it as a background image on the block you want it attached to and use a top margin on the block to move the text down.

You should be able to get a clickable username by editing the page.tpl.php file. The username is part of the global $user object.

You should be able to change the width of the navigation bar by editing the css in layout-fixed.css.

The header size can also be styled in layout-fixed.css.

Switched from fixed to liquid

KennyVanLent commented 20 September 2010 at 13:20

Thanks Sweeney,

Gonna work on this right away!

Changed my mind today about layout, liquid works and looks better then being in control with fixed. PomsParadise is using a simple background, so it shouldn't be any problem at all. But it's another learning curve for me to understand zens coding of liquid. Do you think this is a good choice for a Webshop?

The rest of the idea's stay the same. I'll keep you up-to-date through this thread.