Custom Classes for Each Element in Autonav
Permalink
Hello,
I am new to Concrete5 and know very little php. I would like to be able to customize the autonav block by adding a separate class to each <li> element. After some poking around, I have found that I need to create a custom template with a customized view.php file and also a view.css file within the template directory. Unfortunately, I am unable to figure out which parts of the php I need to edit since I don't understand the code. Is there a way I can see a completed example of a view.php file that accomplishes this so I can apply it to my site and gain an understanding of how the php works?
This is what I want to do:
<ul class="navBar">
<li class="home"><a href="index.php">HOME</a></li>
<li class="services"><a href="services.php">SERVICES</a></li>
<li class="gallery"><a href="gallery.php">GALLERY</a></li>
<li class="about"><a href="about.php">ABOUT US</a></li>
<li class="contact"><a href="contact.php">CONTACT</a></li>
</ul>
I am new to Concrete5 and know very little php. I would like to be able to customize the autonav block by adding a separate class to each <li> element. After some poking around, I have found that I need to create a custom template with a customized view.php file and also a view.css file within the template directory. Unfortunately, I am unable to figure out which parts of the php I need to edit since I don't understand the code. Is there a way I can see a completed example of a view.php file that accomplishes this so I can apply it to my site and gain an understanding of how the php works?
This is what I want to do:
<ul class="navBar">
<li class="home"><a href="index.php">HOME</a></li>
<li class="services"><a href="services.php">SERVICES</a></li>
<li class="gallery"><a href="gallery.php">GALLERY</a></li>
<li class="about"><a href="about.php">ABOUT US</a></li>
<li class="contact"><a href="contact.php">CONTACT</a></li>
</ul>
That's okay. What I'm trying to do is assign a different width for each menu item so that they are evenly spaced depending on their size. So if one has a long name, it has a longer box, etc. Is there a way to do this?
Okay - well actually then what Steveb posted will do that really well without having to use a custom template to assign unique classes - just give your li's a width of 'auto' in your css file - ie:
But, to go back to the original post question - if you did want to manually assign a different width for each item, the file I attached would give you a unique class for each menu item, it just wouldn't be in the format you have specified.
It would look something like this:
You would then add this to your CSS:
NB: There are many more class options that you can add via Jordans code - as well as extending to include your own, which give you all sorts of options to cover most bases.
ul.navBar li {width:auto;}
But, to go back to the original post question - if you did want to manually assign a different width for each item, the file I attached would give you a unique class for each menu item, it just wouldn't be in the format you have specified.
It would look something like this:
<ul class="nav"> <li class="nav-item-1"><a href="/" class="nav-item-1">Home</a></li> <li class="nav-item-2"><a href="/services/" class="nav-item-2">Services</a></li> <li class="nav-item-3"><a href="/gallery/" class="nav-item-3">Gallery</a></li> <li class="nav-item-4"><a href="/about-us/" class="nav-item-4">About us</a></li> <li class="nav-item-5"><a href="/contact/" class="nav-item-5">Contact</a></li> </ul>
You would then add this to your CSS:
ul.navBar li.nav-item-1 {width:100px;} ul.navBar li.nav-item-2 {width:80px;} ul.navBar li.nav-item-3 {width:110px;}
NB: There are many more class options that you can add via Jordans code - as well as extending to include your own, which give you all sorts of options to cover most bases.
If you have hard coded the 'navbar' then just apply the class changes to your css.
etc.
Does that help?
.home{color:#000}.services{color:#f00}.gallery{color:#ff6}
etc.
Does that help?
Whoops, we seemed to have overlapped!
Just your 'li' a width of auto.
Just your 'li' a width of auto.
https://github.com/jordanlev/c5_clean_block_templates...
It has lots of options to add all sorts of v.useful classes to it, and is really clearly annotated, which makes it helpful to get your head around if you're new to C5. You basically just need to un-hide the relevant bits of code - in this case on line 214, I have un-hidden the code that writes out a unique class for each menu item.
I've attached it here for your ref.
Hope that helps!
ps - You'll need to change the file extension from .txt to .php on the attached file.
* Edit * Just re-read your post, and actually, this won't do quite what you want... it will give you a unique class on each menu item - Apologies if this isn't quite what you were after.