Forums

Graphical Autonav

Permalink 1 user found helpful
Hi
I am trying to replicate a graphical menu. I have built a bog standard HTML site and am converting it to C5 theme - or trying, with varying success.

Attached is a screengrab of how the menu should look (correct.gif). It is an <ul> with bckground images attached with css to the <li> elements.

I can't seem to get the bg images to show up on the autonav, although I have managed to get it in the right position and spacing etc. see other attached file: c5.gif - only 3 pages added so far, that's why there are only 3 'buttons' and I have given them a red bg colour with css so I can see where they are.

Would I be better off just adding the images for the buttons to the sidebar and adding links to the pages from them instead? It's just that I would like an <ul> because that's more correct for accessibility and W3C standards.

Thanks
Al

2 Attachments

mexicanred
 
sebastienj replied on at Permalink Best Answer Reply
sebastienj
You can create a template for your autonav.

in the template you can add class to your <li>. these class take the name of your page. like :
<li class="about">...</li>
to do that just change in the view.php of your autonav block 

if ($c->getCollectionID() == $_c->getCollectionID()) { 
            echo('<li class="' . $ni->getName() . ' nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
         } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
            echo('<li class="' . $ni->getName() . 'nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
         } else {
            echo('<li class="' . $ni->getName() . '"><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
         }


It's one of many solution possible..
LucasAnderson replied on at Permalink Reply
LucasAnderson
Good answer sebastienj, just wanted to let you know that the code tags are like this:

[c0de][/c0de]

Replace the '0' with a lowercase 'o'.

Thanks!
sebastienj replied on at Permalink Reply
sebastienj
in the same time :-)
mexicanred replied on at Permalink Reply
mexicanred
Fab - thanks!
I'll give it a go and let you know.
:)
mexicanred replied on at Permalink Reply
mexicanred
OK I have tried and it doesn't seem to be working.
I followed the instructions in the Primer: Auto-Nav Block Article at the bottom "Further Experimentation" and made a file called testing.php which is a duplicate of concrete/blocks/autonav/templates/view.php
I pasted the new code in there and added it to the root blocks dir and applied as a template to my autonav.
My css looks like this for the home button:

li a.home {background:url(images/home.gif) no repeat;}
li a:hover .home {background:url(images/home-on.gif) no-repeat;}

I also tried .home li a as a selector but that's not working either.
Any ideas what I am doing wrong?
Thanks
Al
ThemeGoodness replied on at Permalink Reply
ThemeGoodness
You might try using cufon for the nav will depend on the license if you can generate it or not.
http://cufon.shoqolate.com/generate/...

Steph
stromberg replied on at Permalink Reply
stromberg
Hi,

there's at least a typo in your CSS, and your problem in general is most probably related to a wrong CSS selector.

You should change this...
li a.home {background:url(images/home.gif) no repeat;}
li a:hover .home {background:url(images/home-on.gif) no-repeat;}


...to this:

li a.home {background:url(images/home.gif) no-repeat;}
li a.home:hover {background:url(images/home-on.gif) no-repeat;}


In case this isn't enough please post a) the generated HTML from your browser's source code view and b) more from your CSS - maybe you can attach both files to your next post.

HTH!

Regards,
stromberg
mexicanred replied on at Permalink Reply
mexicanred
Very embarrassed about the schoolgirl error on the CSS - it was genuinely a typo though, after typing and re-typing this again and again in different combinations!
Thank you everyone for your help.
This is what finally worked:

li.home {background:url(images/home.gif) no-repeat;}

li.home a:hover {background:url(images/home-on.gif) no-repeat;}

And for the currently selected page:
li.home .nav-selected {background:url(images/home-on.gif) no-repeat;}

Thanks again for all your patience and advice.
Cheers
Al