Forums

Footer nav

Permalink
Hello all.

My footer nav has the same styling as the nav in the sidebar. I can make a new nav style (calling it footer-nav) in the default.css file, but not sure how to call it from the footer.php file.

The footer.php is as follows:
<?php
defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php
    Loader::element('footer_required');
 ?>
<div id="footer" class="shadow">
      <p>© 2012©@AnaKwaAna |
      Web design by Asbjørn Sundal</p>
 <?php
$a = new GlobalArea('Footer Nav');
$a->display();
?>
</div>
</body>
</html>


Also, there is talk about going into blocks->autonav->css

When I enter autonav, the only folder there is sooperfish (wich I am not using)

The url to the site (under construction) ishttp://www.anakwaana.com/akatest...
djoniba
 
djoniba replied on at Permalink Reply
djoniba
Not sure if I explained clearly that what I want, is for the footernav to be the brown background color and horizontal layout
JohntheFish replied on at Permalink Reply
JohntheFish
Rather than messing with the default css, consider creating a block template that you can apply to the autonav block in your footer.

A template usually comprises a php and a css, though the php may well be the same as the regular view.php (or for autonav, Jordanlev's improved view.php)

Jordan's write up:
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...

This links to github source and many forum threads.

In your footer element code, the 'footer_required' would normally be the last thing in the file before the closing /body.
djoniba replied on at Permalink Reply
djoniba
Great.

I am figuring it out. Decided for now to just add a menu like this; #footer ul and #footer li

The problem I am having is to style it as a horizontal menu with the subpages showing (like the footer menu on the concrete5.org pages). I see the menu here is styled inside column divs. Do I have to do that, or can it all be done using css? I have been unable to find any css source for this on the internet.
JohntheFish replied on at Permalink Reply
JohntheFish
With css you can style it inside almost anything. For navigation, the usual semantic markup is nested 'ul' elements, where each 'li' of a 'ul' can contain another 'ul' or an 'a' (or both). Then use css to make a ul go horizontal or vertical. So your 2 levels would be a horizontal ul for the first level with a vertical ul for each second level.

I think C5 has the column divs to make it all line up neatly.

If you look up things like 'menu css' on Google you should get plenty of examples. There are some sites dedicated to pure css menu examples.

For a static structure you should be able to show this without any JavaScript. Even some simple dropdown menus can be done in pure css using ':hover' selectors.

From a C5 point of view, use the autonav to generate the nested list structure, then use css in a view template to make it layout as you want. The template I mention above is just the cleanest point to start on that. If you decide column divs makes more sense in your situation, you can also use this, but replace the top level of ul code with div code.
djoniba replied on at Permalink Reply
djoniba
Thanks. The problem I had wasd figuring out how to style a menu that is both horizontal and vertical. Makes more sense now.

Is there any practical reason why you consider it better to use the view.css file? It seems to me to be easier to style everything in default.css
JohntheFish replied on at Permalink Reply
JohntheFish
Each alternate template for a block can have its own view.css.

If you are only working with 1 site with 1 theme, then you could just put your css in whatever file suits you.

If you may want to change your theme later, or use the same block template for another site, then it helps to structure the css between that which is specific to your theme, css which lays out a block, and css specific to a particular block template. There is a large decision grey area between these.
djoniba replied on at Permalink Reply
djoniba
Great. Makes sense. For now I will just use the one css file then. Last question. trying to make out the nav in the footer. I found a tutorial on listmatic (actually vertical menu with horizontal subitems, but that is easy to change). The problem is that in the navigation in my defauklt.css file, I have ".nav li" and ".nav li a". No "ul".

What is the difference? Trying to figure out if I can use the listmatic directly in my footer navigation. The listmatic is as follows: 
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>
</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
Viewing 15 lines of 85 lines. View entire code block.