By Marshcast on

Hey,

First, Just a quick word to say how much I'm enjoying and appreciating Drupal and the opertunities it brings for me to learn and create, and a BIG thank you to all those who contribute here.

I mean it - this is a great example of a way that people can work together for a better future :D.

Second, I'm none too high up on the technical knowledge of things, so hope I'm not dragging anyone backwards in asking my questions.

Third... the issue:

I'm using the superfish module to display my main menu (customising a zen theme). I've got the menu in place, centered it (it's horizontal) and am in the process of 'theming' it, but I need it to add

's (or possibly 's) so that I can 'dress' the menu (ie: put a left and right image around it). I need it to look like the menu at www.wpa-play.com (this is Joomlas 'pill' menu.

I've tried looking for superfish in all the text files, tried adding div's in page.tpl.php in various places around the navigation section, but am at a bit of a loss.

Am struggling to understand the javascript, and that's making it really difficult to see what's going on or how to effect it.

can anyone offer any advice for me?

thanks in advance,

Marsh :)

⋅ Categories: Drupal 7.x

Comments

peterjlord’s picture

peterjlord commented

You need to overide the function theme_superfish_build($variables) {} in the superfish.module files
It's quite a large function but that's where the required html is.

Peter J Lord
http://peterjlord.co.uk

Marshcast’s picture

Marshcast commented

Thanks Peter....

I'm having a bit of a getting-to-grips-with-css (or maybe html) thing (or more that I just can't seem to get some concepts :/... I've put 3divs into the code to make container, with three div's inside (one for the left 'pill', one for the menu and one for the right 'pill' (by pill
i mean the end-cap for the menu).

I've got these to fit using css, but if either of the pill divs have a width of more then 1px then the menu is being 'wrapped', so it appears vertical I'm assuming this is because the menu div is fixed width, but cannot see anywhere that it is set.

Is there a standard way to do this? it's a task many people must have done, but I'm not seeing any solutions (online or experimental).

the (rather messy) site is at http://www.marshcast.co.uk/wpa (user:user - pass:pass1word

Also - you'll notice if you do take a look, that looking at any children (hover over 'what we do') the child is encapsulated in the pill caps :(

Am I heading in the right direction, or am I on completely the wrong track?

peterjlord’s picture

peterjlord commented

I couldn't get to site to see.

Peter J Lord
http://peterjlord.co.uk

Marshcast’s picture

Marshcast commented

sorry.... my fault.
marshcast.co.uk/wpa

user: marsh
pass: pass1word

it's a bit of a mess... :(

peterjlord’s picture

peterjlord commented

You should be able to recreate the menu functionality of www.wpa-play.com without really modifiying any html and do with css. I've not usered superfix with drupal 7 but I think it looks similar.
You need to choose one of the styles in the block and change the colours. The css files are in
"sites/all/libraries/superfish/style/" copy one of them into your theme and change the css.

You will need to change 

.sf-sub-indicator {
  background: url('../images/arrows-ffffff.png') no-repeat -10px -100px;
  display: block;
  height: 10px;
  overflow: hidden;
  position: absolute;
  right: 0.75em;
  text-indent: -999em;
  top: 1.05em;
  width: 10px;
}

To get the image changed

Peter J Lord
http://peterjlord.co.uk