Images as Menu Titles

psbpsb / 2008-10-02 12:10:05   

Hellooo. I'm rather new to the coding of things but everything has gone well so far and my site works great thanks to Indexhibit.

One thing I'm trying to do however is with the menu. I'd like to replace the text with Images; jpeg, gifs for example.

And then possibly get this into an expandable menu! But that will come later i suspect.

I've read on the forum about having images instead of text menus and have even seen one indexhibit that uses this altought I've forgotten which it was. From what I've read I think that this may be a feature in the new indexhibit?

If it's possible to do now, where would I start? Or is this something for advanced coders?

Thanks very much.

Paul

Vaska A / 2008-10-02 12:22:53   

It's advanced...to put it simply.

psbpsb / 2008-10-02 12:43:25   

damn.

What about the update of indexhibit, will that have a simplified way of doing it?

I've seen some pretty complicated things people have done on here for it so if not I'll try and figure out what they've done.

redhood / 2008-10-02 17:23:16   

Psbpsb, you're just looking to change the section title right? If so check out this link: Tutorial: images as navi-titles.

psbpsb / 2008-10-02 18:35:29   

Hi Redhood. Thanks for the link, I had stumbled across this before. It's a shame they haven't provided images of what they're talking about.

also Dr_Osimo's link to what theyve doesn't have the images as titles right?

I'm going to have a crack at the first example with a new sample CSS and see what happens.

psbpsb / 2008-10-02 20:27:11   

Redhood, I've added this to my index.php in the plugin folder, edited the CSS as that Tutorial says but still cant seem to get it to work.

  1. foreach($order as $key => $out)
  2.     {
  3. ¬†¬†¬†¬†¬†¬†¬†¬†$s .= "<ul class='$key'> n";
  4.         
  5. ¬†¬†¬†¬†¬†¬†¬†¬†if ($out[0]['disp'] == 1) $s .= "<li class='section-title-$key'> <span> " .$key. " </span> </li>n";
  6.         
  7. ¬†¬†¬†¬†¬†¬†¬†¬†foreach($out as $page)
  8.         {
  9. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†$active = ($rs['id'] == $page['id']) ? " class='active'" : '';
  10.                 
  11. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†$s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick="do_click();">" . $page['title'] . "</a></li>n";
  12.         }
  13.         
  14. ¬†¬†¬†¬†¬†¬†¬†¬†$s .= "</ul>nn";

any ideas?

redhood / 2008-10-02 20:41:57   

Hm, looks correct. Try deleting the spaces after/before the span and li tags. Can you post a link to the site?

redhood / 2008-10-02 20:44:59   

Actually you're missing some slashes on all the "/n" as well.

psbpsb / 2008-10-02 21:00:32   

I tried the doing what you said redhood but it still doesnt seem to work! Must be doing something wrong.

here's the site

psbpsb / 2008-10-02 21:06:12   

Ok I seem to have got it working after adding an exhibit to the actual section!

So, as for these image as titles can I add links to them so they can be linked to a page?

redhood / 2008-10-02 21:12:24   

I see what you did. You used the examples section-title-news, (design, about, etc) from the tutorial. But that is not what your section titles are named. It looks like you named your section titles with a bunch of underscores "_________."

You should give them real titles then change the css to reflect those. If you want borders above the lists you can do that via css (border-top {}). But, we'll work on that after.

Understand?

psbpsb / 2008-10-02 21:47:58   

Excellent, yeah I began to realise that's what I'd done!

So there it is for now, I'll change the titles eventually but they'll stay whilst I work on other things.

Cheers redhood, also do you know if it is possible to have these images as links or will that not work as they seem to be fixed to the background?

Vaska A / 2008-10-02 22:37:03   

Great job guys!

Instruct / 2008-12-12 10:45:15   

Sorry to bump this back up but this is exactly what i want to do for a site, i wanted to simple change the text to an image of a font (avant garde) I see Paul has done it on his site perfectly, did anyone follow Dr.Osimo's guidance or was it more customised?? im struggling which advice to follow

psbpsb / 2009-02-06 21:43:09   

Hey Instruct,

Where did you get to so far? What's the site?

Vaska A / 2009-02-08 14:47:33   

Why don't you try sIFR instead? You could apply it to the li.section-title class and use whatever font you need.

Yeah...need to make a kind of plugin for this one...but it's not so hard to implement.

martijnlambada / 2009-04-12 22:29:29   

Hello,

First of all, thank you for creating such a simple clear cms.

I'm trying to implement the "Images as Menu Titles" code,
but until now, no luck.

I've uploaded screenshots of the code in the index & css files:

style.css
index.php

Url to the test site: http://www.martijnlambada.com/site

Help is very much appreciated.

Kind regards,
Martijn

willharris200 / 2011-08-07 11:09:31   

if you just change the image heading title in exhibits. and use img src= 'http://www.yourdomain/thesrestoftheimagepath' then it will display the image as the title header.

rickykappa / 2011-08-08 03:37:17   

@will - nice that you're willing to help, but did you realize the question was over 2 years old?
;-)

guitaryf / 2011-08-10 00:08:46   


Pretty post. I just found your site and wanted to say that I have really enjoyed browsing your posts.In any case[url=http://www.loveslife.net]coach handbags[/url] I'll be subscribing to your blog and I hope you post again soon

guitaryf / 2011-08-10 00:13:12   

Edited by Vaska: spam

This thread has been closed, thank you.