custom class for each li in autonav
Permalink 3 users found helpful
Hi,
I want to use the autonav, but each li in my nav has a custom class. Each li pulls in a different image.
Any suggestions?
cheers,
Anthony
I want to use the autonav, but each li in my nav has a custom class. Each li pulls in a different image.
Any suggestions?
cheers,
Anthony
I'd just create a custom autonav template.
1. mkdir /blocks/autonav
2. mkdir /blocks/autonav/templates
3. cp /concrete/blocks/autonav/view.php /blocks/autonav/templates/<name_of_custom_autonav>.php
4. Edit the output generation code in <nave_of_custom_autonav>.php with the logic necessary to do what you're asking, which is adding a unique class for each nav item generated at the appropriate level.
5. In Concrete5 editor, add a new autonav block where you want the nav.
6. Once you've added the new block, and still in Concrete5 editor, click on it and choose "Custom Template", then apply your new custom template.
7. Tada!
Of course you could use jQuery to accomplish this as well. Create an array map of elements -> images. Have jQuery add the appropriate classes to the specified elements.
1. mkdir /blocks/autonav
2. mkdir /blocks/autonav/templates
3. cp /concrete/blocks/autonav/view.php /blocks/autonav/templates/<name_of_custom_autonav>.php
4. Edit the output generation code in <nave_of_custom_autonav>.php with the logic necessary to do what you're asking, which is adding a unique class for each nav item generated at the appropriate level.
5. In Concrete5 editor, add a new autonav block where you want the nav.
6. Once you've added the new block, and still in Concrete5 editor, click on it and choose "Custom Template", then apply your new custom template.
7. Tada!
Of course you could use jQuery to accomplish this as well. Create an array map of elements -> images. Have jQuery add the appropriate classes to the specified elements.
Hi Anthony,
I think I understand what you're trying to do, and so I don't think 12345j's answer will work (because that would apply the same class to all of the <li>'s). creatovisguru is correct about the approach, but doesn't actually provide the updated code you'd need. I am attaching a template you can use to achieve this (I had to do this same thing for a client recently). To install it, download the attachment and unzip it. Then follow creatovisguru's steps 1 and 2. Now copy the "list_item_classes.php" file (the unzipped attachment) into that new folder you created in step 2. Now continue with steps 5, 6, and 7 (in step 6, the name of the custom template will be "List Item Classes").
Note that it is impossible to specify exactly what the names of each class should be, so it only outputs "nav-page-#" (where # is the page ID of that particular nav item). What that means is that you will have to add the autonav block with that custom template to your site first, then view source to see what the actual class names it uses are, then write your CSS accordingly. It is simply not possible to do it any other way because that autonav block dynamically outputs list items based on the pages in your site, which could be different all the time because you could add/remove/change pages in your site at any time.
ALSO NOTE that those class names will only work on the site that you first built it for. If you use this template on another project, you'll need to go through the same process of adding the autonav block first and checking what the class names are by "viewing source" -- it will be different from the first site you tried!
Hope this makes sense -- let me know if you run into trouble.
EDIT: Removed this attachment because it had bugs. See followup comment below for new attachment.
I think I understand what you're trying to do, and so I don't think 12345j's answer will work (because that would apply the same class to all of the <li>'s). creatovisguru is correct about the approach, but doesn't actually provide the updated code you'd need. I am attaching a template you can use to achieve this (I had to do this same thing for a client recently). To install it, download the attachment and unzip it. Then follow creatovisguru's steps 1 and 2. Now copy the "list_item_classes.php" file (the unzipped attachment) into that new folder you created in step 2. Now continue with steps 5, 6, and 7 (in step 6, the name of the custom template will be "List Item Classes").
Note that it is impossible to specify exactly what the names of each class should be, so it only outputs "nav-page-#" (where # is the page ID of that particular nav item). What that means is that you will have to add the autonav block with that custom template to your site first, then view source to see what the actual class names it uses are, then write your CSS accordingly. It is simply not possible to do it any other way because that autonav block dynamically outputs list items based on the pages in your site, which could be different all the time because you could add/remove/change pages in your site at any time.
ALSO NOTE that those class names will only work on the site that you first built it for. If you use this template on another project, you'll need to go through the same process of adding the autonav block first and checking what the class names are by "viewing source" -- it will be different from the first site you tried!
Hope this makes sense -- let me know if you run into trouble.
EDIT: Removed this attachment because it had bugs. See followup comment below for new attachment.
Hey Jordan,
Thanks for the input. I applied your new template but now the page outputs this:
I'm not a php person so it is not obvious to me what in the list_item_classes.php file needs to change.
cheers,
Anthony
Thanks for the input. I applied your new template but now the page outputs this:
<li nav-page-<?php echo $_c->getCollectionID(); ?>>
I'm not a php person so it is not obvious to me what in the list_item_classes.php file needs to change.
cheers,
Anthony
Hi Anthony,
Oops -- I had some major issues in there (that's what I get for banging out code without testing it!).
Sorry about that.
Im attaching an updated version that should work as advertised.
Thanks for letting me know!
-Jordan
Oops -- I had some major issues in there (that's what I get for banging out code without testing it!).
Sorry about that.
Im attaching an updated version that should work as advertised.
Thanks for letting me know!
-Jordan
Hi Jordan,
This is the current error:
Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /concrete_stable/blocks/autonav/templates/list_item_classes.php on line 68
cheers,
Anthony
This is the current error:
Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /concrete_stable/blocks/autonav/templates/list_item_classes.php on line 68
cheers,
Anthony
Ugh... I am not having a good day :-/
Okay here's a new one that doesn't have even more typos in it.
Okay here's a new one that doesn't have even more typos in it.
perfect.
this is exactly what I needed and could not do myself.
thanks,
Anthony
this is exactly what I needed and could not do myself.
thanks,
Anthony
Hi Jordan,
I know this is an older thread, hopefully you'll respond.
I've followed the instructions here and they workrd fine for giving my individual list items seperate classes.
However, two of the list items had a dropdown sub-menu that no longer works with the new changes.
The way I added the nav area in the header was:
The code that this replaced was a lot more complicated, and made references to 'displaySubPages'.
I have tried to include this in various ways, to no avail. Any help would be much appreciated.
Thanks.
P.S. The dropdowns work if I'm on one of the pages the dropdown lists.
Weird....
I know this is an older thread, hopefully you'll respond.
I've followed the instructions here and they workrd fine for giving my individual list items seperate classes.
However, two of the list items had a dropdown sub-menu that no longer works with the new changes.
The way I added the nav area in the header was:
<div id="nav"> <?php $a = new Area('Navbar'); $a->display($c); ?> </div>
The code that this replaced was a lot more complicated, and made references to 'displaySubPages'.
<div id="nav"> <?php $bt = BlockType::getByHandle('autonav'); $bt->controller->displayPages = 'top'; $bt->controller->orderBy = 'display_asc'; $bt->controller->displaySubPages = 'all'; $bt->controller->displaySubPageLevels = 'custom'; $bt->controller->displaySubPageLevelsNum = '1'; $bt->render('templates/main_menu'); ?> </div>
I have tried to include this in various ways, to no avail. Any help would be much appreciated.
Thanks.
P.S. The dropdowns work if I'm on one of the pages the dropdown lists.
Weird....
Sorry, I don't quite understand what the problem you're having is :(
It looks like you replaced a hard-coded autonav block with an "Area". Did you then add an autonav block to that area via the web interface? Did you add it to every page (or put it in the Page Defaults and then "Setup on Child Pages")?
What settings do you have for the autonav block? Did you tell it to show all sub-pages?
It looks like you replaced a hard-coded autonav block with an "Area". Did you then add an autonav block to that area via the web interface? Did you add it to every page (or put it in the Page Defaults and then "Setup on Child Pages")?
What settings do you have for the autonav block? Did you tell it to show all sub-pages?
To be honest Jordan, I'm not entirely sure what I'm doing myself.
The autonav that was originally part of the 'Luminous Theme' from C5 mix. I took that out & replaced it with an Area. I then added an Autonav to that area.
Next I just followed the steps on this page to create custom classes for each list item.
I then styled my list items and copied to the scrapbook for the other pages on the site.
This worked fine, but as I said, the dropdown menu no longer works.
Probably not the most effective, or efficient way to do it, but I'm still at the steep end of my concrete5 learning curve.
Thanks for the reply.
The autonav that was originally part of the 'Luminous Theme' from C5 mix. I took that out & replaced it with an Area. I then added an Autonav to that area.
Next I just followed the steps on this page to create custom classes for each list item.
I then styled my list items and copied to the scrapbook for the other pages on the site.
This worked fine, but as I said, the dropdown menu no longer works.
Probably not the most effective, or efficient way to do it, but I'm still at the steep end of my concrete5 learning curve.
Thanks for the reply.
I'm assuming you put the custom classes cod into a custom template for the autonav block -- did you choose that custom template after you put the block on the page?
That's the code you gave in the attachment?
Yes, I done that.
Scratching my head at this point...
Yes, I done that.
Scratching my head at this point...
Can you provide a link to the site? It's really hard to tell because it could be any of a number of things. I imagine it's probably an issue with your CSS not styling the template html properly, but I'd have to see the site to know for sure.
I think the problem is you have "dropdown level" set to "1". The autonav is tricky in a lot of ways (as you know), one of which is that it sometimes treats the home page as being on "top" of all other site pages, and other times treats the home page as being "above" all other site pages. Since you've set your menu to show items 1 level deep, when you're on the home page it interprets that as meaning all of the top-level pages of your site (look at your sitemap in the dashboard to see what I'm talking about -- notice how the home page is actually above everything else). I think to work around this schizophrenic behavior you'll need a different autonav setting depending on if you're on the home page or not. Could try changing this line:
...to this:
(or you could use this code which does the same exact thing -- just more compact):
What we're doing here is saying that if the user is on the home page, show the menu 2 levels deep (which will be the top-level pages and their sub-pages), but if not on the home page then only show 1 level deep (which is how it's currently working on your interior pages, which is correct).
-Jordan
$bt->controller->displaySubPageLevelsNum = '1';
...to this:
if ($c->getCollectionID() == HOME_CID) { $levelNum = 2; } else { $levelNum = 1; } $bt->controller->displaySubPageLevelsNum = $levelNum;
(or you could use this code which does the same exact thing -- just more compact):
$bt->controller->displaySubPageLevelsNum = ($c->getCollectionID() == HOME_CID) ? 2 : 1;
What we're doing here is saying that if the user is on the home page, show the menu 2 levels deep (which will be the top-level pages and their sub-pages), but if not on the home page then only show 1 level deep (which is how it's currently working on your interior pages, which is correct).
-Jordan
Hi Jordan,
I'm working on this site menu with Michael and although we are following your instructions, and they logically make sense - we can't seem to get them working.
This is our auto nave at the minute. Hard coded in, options set up almost identical to how they were for the standard autonav that was coded into the theme we hacked to pieces to make this theme.
At this stage I'm thinking that we may just knock off the dropdown menu from the auto nav altogether as it is only used on the two very end tabs and there is info that the client wants users to read on the parent pages anyway. Is there anything in the code supplied at the top of this post that could be removed to get it working or is it just one of things we'll have to do without.
Thanks for all the help so far with this.
I'm working on this site menu with Michael and although we are following your instructions, and they logically make sense - we can't seem to get them working.
This is our auto nave at the minute. Hard coded in, options set up almost identical to how they were for the standard autonav that was coded into the theme we hacked to pieces to make this theme.
<?php $bt_main = BlockType::getByHandle('autonav'); $bt_main->controller->displayPages = 'top'; // top, above, below, second_level, third_level, custom (Specify the displayPagesCID below) $bt_main->controller->orderBy = 'display_asc'; // display_asc, display_desc, chrono_asc, chrono_desc, alpha_desc $bt_main->controller->displaySubPages = 'relevant'; // none, relevant, relevant_breadcrumb, all $bt_main->controller->displaySubPageLevels = 'custom'; //custom, none $bt_main->controller->displaySubPageLevelsNum = ($c->getCollectionID() == HOME_CID) ? 2 : 1; // Specify how deep level $bt_main->render('templates/list_item_classes'); // Specify your template or type "view" to use default ?>
At this stage I'm thinking that we may just knock off the dropdown menu from the auto nav altogether as it is only used on the two very end tabs and there is info that the client wants users to read on the parent pages anyway. Is there anything in the code supplied at the top of this post that could be removed to get it working or is it just one of things we'll have to do without.
Thanks for all the help so far with this.
Sorry, but unfortunately I don't know how to solve the problem you're having -- there are just too many variables involved and it could be any of a number of things.
If I recall correctly, the menu is working fine in terms of layout/design, but the dropdown isn't dropping down on the homepage. The code I gave you should have fixed that, so I'm not sure if you're having another problem now or if that just didn't do anything. If it doesn't work it might be due to caching -- you might want to try clearing the C5 cache (Dashboard -> Sitewide Settings) and see if that fixes it.
Otherwise I'm out of ideas :(
-Jordan
If I recall correctly, the menu is working fine in terms of layout/design, but the dropdown isn't dropping down on the homepage. The code I gave you should have fixed that, so I'm not sure if you're having another problem now or if that just didn't do anything. If it doesn't work it might be due to caching -- you might want to try clearing the C5 cache (Dashboard -> Sitewide Settings) and see if that fixes it.
Otherwise I'm out of ideas :(
-Jordan
Iv been looking for a solution to this ...
the easiest method i found for this was to create a new page attribute "text" call it "customclass" and add the class for each page.
Create a new autonav template and use this .. changes to lines 29 &
78
the easiest method i found for this was to create a new page attribute "text" call it "customclass" and add the class for each page.
Create a new autonav template and use this .. changes to lines 29 &
78
<?php defined('C5_EXECUTE') or die("Access Denied."); $aBlocks = $controller->generateNav(); $c = Page::getCurrentPage(); $containsPages = false; $nh = Loader::helper('navigation'); //this will create an array of parent cIDs $inspectC=$c; $selectedPathCIDs=array( $inspectC->getCollectionID() ); $parentCIDnotZero=true; while($parentCIDnotZero){ $cParentID=$inspectC->cParentID; if(!intval($cParentID)){ $parentCIDnotZero=false; }else{
Viewing 15 lines of 75 lines. View entire code block.
I've actually included this functionality in a template that can replace the built-in autonav template -- it has a bunch of different class options (including the one you mention), and also the html is easier to untangle and modify if that's something you need to do:
https://raw.github.com/jordanlev/c5_clean_block_templates/master/aut...
https://raw.github.com/jordanlev/c5_clean_block_templates/master/aut...
Great stuff .. cheers
Have you seen the cleaned up autonav view?http://www.concrete5.org/community/forums/customizing_c5/new-cleane...
Great job.
you'll have to change the wrapper start and end values, but I think it should work- either that or you could use a custom template.