Header Nav magic / or How to apply css to auto nav block
Permalink 2 users found helpful
Hey c5 gurus! I am trying to put a navigation block into the footer of my theme AND have it use css settings from the theme's css file.
By reading the docs/forums, and looking at some of the free themes I have been trying variations of this php block in the footer.php file:
My first question is about the 'magic' of using 'Header Nav' as the new Area name - it will put in a navigation area with links to the sites pages. If I change it to something else, like 'Footer Nav' or 'Auto Nav', then the area will be blank when the page is viewed. What is special about 'Header Nav'???
The answer to the above may also solve my second question - once I get c5 to output the nav block, how do I get it to apply the css rules I want??? If I implement the above code and view the source of the resulting page I see the following:
(note: the php at the first and last lines are not in the output, the code tags must have done that...)
So it seems that 'Header Nav' is magically (at least to me) applying the css rules for nav-header - where I wish to use the rules for wrap.
I have been working on this for days and have learned a lot about css, but still slow with the php part. Any pokes to get me in the right direction will be greatly appreciated. Thanks.
By reading the docs/forums, and looking at some of the free themes I have been trying variations of this php block in the footer.php file:
<div class="footer">
<div class="wrap">
<?php
$a = new Area('Header Nav');
$a->display($c);
?>
</div>
</div>My first question is about the 'magic' of using 'Header Nav' as the new Area name - it will put in a navigation area with links to the sites pages. If I change it to something else, like 'Footer Nav' or 'Auto Nav', then the area will be blank when the page is viewed. What is special about 'Header Nav'???
The answer to the above may also solve my second question - once I get c5 to output the nav block, how do I get it to apply the css rules I want??? If I implement the above code and view the source of the resulting page I see the following:
<div class="footer"> <div class="wrap"> <ul class="nav-header"><li class=" first"><a href="/">Home</a></li><li class=" "><a href="/index.php/new-home/">New Home</a></li><li class=" "><a href="/index.php/gallery/">Gallery</a></li><li class=" "><a href="/index.php/footer1/">footer1</a></li><li class="nav-selected "><a class="nav-selected" href="/index.php/footer2/">footer2</a></li></ul><div class="ccm-spacer"> </div> </div> </div>
So it seems that 'Header Nav' is magically (at least to me) applying the css rules for nav-header - where I wish to use the rules for wrap.
I have been working on this for days and have learned a lot about css, but still slow with the php part. Any pokes to get me in the right direction will be greatly appreciated. Thanks.
Awesome info!! I get the Header Nav magic now, and I understand more about page types as I did some more reading to understand how C5 makes it easy to customize templates with page types instead of creating multiple template files - More C5 awesomeness!
On the css workings, I see now that Header Nav uses header_menu.php, and other places that have the autonav default to /concrete/blocks/autonav/view.php (although I can't figure out where the css file it references is located...) And I see how to copy/create a new template (php and css file), place it into /blocks/autonav/templates AND then select that area and choose 'Customize Template' to apply the new settings.
BUT I am not a php programmer and the /concrete/blocks/autonav/view.php is not coming to me clearly. Are there any tutorials or other help to give me some direction with this? Or is it possible to apply css styles to this area another way that is easier?
I am trying to achieve a menu style like the one in the attached image... Thanks again for the help.
On the css workings, I see now that Header Nav uses header_menu.php, and other places that have the autonav default to /concrete/blocks/autonav/view.php (although I can't figure out where the css file it references is located...) And I see how to copy/create a new template (php and css file), place it into /blocks/autonav/templates AND then select that area and choose 'Customize Template' to apply the new settings.
BUT I am not a php programmer and the /concrete/blocks/autonav/view.php is not coming to me clearly. Are there any tutorials or other help to give me some direction with this? Or is it possible to apply css styles to this area another way that is easier?
I am trying to achieve a menu style like the one in the attached image... Thanks again for the help.
I was finally able to get what I wanted by playing with the default view.php and by comparing it with the info athttp://www.codeblog.ch/2009/04/concrete5-drop-down-menu/3/... and a lot of trial and error.
I wasn't able to center the navigation in the area - I had to pad the left side to center it on the page. The content area is centered, but the autonav list is left justified. You can see it athttp://www.avauthorityne.com/index.php/footer2/... so if anyone has a suggestion please toss me a hint! Thanks again.
I wasn't able to center the navigation in the area - I had to pad the left side to center it on the page. The content area is centered, but the autonav list is left justified. You can see it athttp://www.avauthorityne.com/index.php/footer2/... so if anyone has a suggestion please toss me a hint! Thanks again.
If you didn't want it, you could delete it from that area in the page type defaults. Or, you could create a new area called "Footer Nav" and edit your page type to display the autonav in that area.
With regards to the css, the default Autonav block in the Header Nav area is using a custom template. You can find that template in concrete/blocks/autonav/templates/header_menu.php
If you copy that file to /blocks/autonav/templates, you can edit it there and it will override the current one. Or you could create a whole new template and call it whatever you want and put it in the same place.