By gulliver on

I'm trying to integrate with the rest of the site - which uses a graphic/sprite (see zeldman.com if that's not clear) to display 'you are here'-type info which varies for different site zones (not complex, simply that the link to the current zone appears as a different color).

I'm wondering just how I could do this with Drupal.

Comments

robertgarrigos’s picture

robertgarrigos commented

You have the sections module for that. I find the Taxonomy Theme also very handy.

---
Robert Garrigos
Professional site: http://garrigos.cat
Catalan Drupal Users Group: drupal.cat

gulliver’s picture

gulliver commented

Thanks. 'It's all new to me', I'll go look-see. Appreciated.

dnewkerk’s picture

dnewkerk commented

Apologies if I'm mistaken in what you're asking (your question is a bit cryptic... further details or links to the technique you refer to would help)...

I think Sections module is probably major overkill for what you appear to want to do. Sections module sets a completely different theme for each section of the site, which doesn't appear at all to be what you want to do. You mention the "link to the current zone ... appearing in a different color". To do this simply apply some basic CSS to Drupal's ".active" class which is found on the menu link of the currently-being-viewed page. You can also make use of the "active-trail" class on the list item that holds the active link.

Also here's some helpful code I've used before that adds additional hooks for CSS to latch onto for menus, in case you need that: http://drupal.org/node/278976#comment-909674

If you'd like to take things further toward customizing "whole sections" of the site with different CSS/background-images/etc, then have a look at my discussion here, which includes reasons for doing so as well as code examples: http://drupal.org/node/278181#comment-932781

-- David
absolutecross.com

gulliver’s picture

gulliver commented

Thanks. I explained it too briefly - I'll retry...

The primary nav is sitewide, and comprises a single image of which differing parts are displayed depending on where you are in the site, and again for link hover.

In the zeldman.com example, that nav graphic is http://www.zeldman.com/i04/nav.gif. The darker text appears on link hover, and when in the appropriate site section - with the latter behavior defined from a tag.

So, there are complex issues in integrating with Drupal - and currently the only way I can see to do it is to have different templates for the major site sections.

dnewkerk’s picture

dnewkerk commented

No, you do not need Sections. The key is creating a unique Body ID or Class, and making use of it to style the menu differently depending on that ID or Class. This is exactly what is done on Zeldman's site as well. Here is an example from http://www.zeldman.com/c/2008.css :

body#home #dailymenu {background: transparent url(/i04/nav.gif) 0 -30px no-repeat;}
body#bookhome #dwwsmenu {background: transparent url(/i04/nav.gif) -139px -30px no-repeat;}
body#diary #glammenu, body.cat-glamorous #glammenu {background: transparent url(/i04/nav.gif) -385px -30px no-repeat;}	
body#whiskers #classicsmenu {background: transparent url(/i04/nav.gif) -538px -30px no-repeat;}
body#yak #aboutmenu {background: transparent url(/i04/nav.gif) -634px -30px no-repeat;}

See that it applies different #ID's to the body. Note the HTML of the body tag on each of the pages of the site... it includes these #IDs.

The second link I mentioned discusses this in detail, however in the example it's just applied to making a different header background for each section, but the principle behind it is the same. The code in the link provides the needed Drupal PHP snippet to paste in place of your page.tpl.php's <body> tag, giving you a unique ID and/or Class based on the "path" of the section. You can then latch onto that ID/Class in your style.css file to use the "Cascade" part of CSS to affect each menu item differently, based entirely on which ID/Class is set in the body tag.

Copy and paste the HTML and CSS I wrote in the other post into notepad, and search for "David:" to find all the spots in it where I've added the relevant code and comments/descriptions about how it works. If you have trouble applying this, feel free to post a link to your site and I will have a look and try to help you get it worked out.

I haven't tried it with the sprites image as you mentioned, but I'm pretty confident I could construct the menu in that way even without the body ID/Class, making use of the .active class I mentioned, and copying some of the CSS ideas from Zeldman. The hovers are easily dealt with via a single line per section that repositions the background image on hover (as Zeldman does)... and the state of the active link's image position can also be set in place with the .active class (or the body id/class, whichever you prefer). The ID/Class would probably be ideal though since it will maintain the visual state of the primary link no matter how many levels deep into the section you go. I'm sure there's a few bumps to overcome along the way, but it can be done.

-- David
absolutecross.com

gulliver’s picture

gulliver commented

David, thanks.

I need to sit down with a clear head and learn some more.

I've been using the sprites method for ages now and am comfortable with all the css-html stuff therein.

It's the hook-up to Drupal that I couldn't figure, which I've only been using a day or so and hence is still unfamiliar (and php often is to me anyway).

I'll study this and be back - I suspect it's much easier than I fear.

dnewkerk’s picture

dnewkerk commented

Cool. Yeah don't worry so much about the PHP and Drupal part of it... rather look at the output source in your browser (and with Firebug) and see what HTML (often along with IDs and Classes) Drupal gives you. The menu is just a basic, nested, unordered list of links with some classes added to each level of the list when it comes down to it. Ideally try this out on a barebones theme, not a complex one with all kinds of pre-existing HTML and CSS to fight with. Here's even the most basic framework if you'd like to start completely fresh.

Paste in that bit of PHP I mentioned in place of <body>, ideally use it with Pathauto setup (also see part of one of my guides on that), and you'll get your Body IDs. From there it's largely just CSS work as usual, just simply within the bounds of the output code Drupal puts out for you (you can change that too, but not really necessary in most cases and that does require a touch of programming sometimes).

Good luck.

-- David
absolutecross.com

gulliver’s picture

gulliver commented

>Good luck.

I think I'll need it.

I'll be back - but not sure when. ;-)