Forums

nav-path-selected Individual css styling

Permalink
Hi C5 gurus,
This is my second site being built with Concrete5 so please forgive my question.
I want to be able to style each individual nav-link in the auto nav or side nav. In other words, I want to write classes for each link based on the page ID.
Right now the default main.css states: 

<ul class="mainmenu">
<a href="/dev2/"></a>
<li class=" first">
<li class="nav-selected ">
<a class="nav-selected" href="/dev2/index.php/about/">About</a>
</li>
<li class=" ">
<li class=" ">
<li class=" ">


As you can see there are empty li classes (those are actual links) without style sheets but I want to apply a different style sheet for each one.

For example from the above I want to have a different class for about us instead of just nav-selected. I want to be able to call the style based on the page id's which I already have since I figured that's the way the 'home' class link is called i.e 
<li class=" first">
.

I believe I need to modify this just don't know where to go next 

if ($isFirst) $isFirstClass = 'first';
         else $isFirstClass = '';
         echo '<li class="'.$navSelected.' '.$isFirstClass.'">';
         if ($c->getCollectionID() == $_c->getCollectionID()) { 
            echo('<a class="nav-selected" href="' . $pageLink . '"  ' . $target . '>' . $ni->getName() . '</a>');
         } else {
            echo('<a href="' . $pageLink . '"  ' . $target . '>' . $ni->getName() . '</a>');
         }


I'm really NOT a php guru either so any guide to this will do. I intend to write the css for each id so I can have the flexibility to change the images on the navigation buttons themselves just as it was done on this sitehttp://www.manhattancomedyschool.com/...

Thank you all for your help.
Kehnee
 
SVijay replied on at Permalink Reply
SVijay
Hi,

For writing css for each page, create a page attribute and add the class or id name you want for each page. Get this attribute value in auto-nav/view.php and addd this to li tag. For creating a page attribute go to dashboard/pages and themes/attribute.
I hope this will help you.

Regarding page attribute, visit the below links -

http://www.concrete5.org/community/forums/customizing_c5/using_page...

http://www.concrete5.org/documentation/developers/attributes/overvi...

Thanks
Vijay
kehnee replied on at Permalink Reply
Thank you Vijay..I'll give it a try.
stromberg replied on at Permalink Best Answer Reply
stromberg
There's an even simpler way:

You can add an id="name_of_your_page" to every <li> that your custom view.php puts out by editing the following (in view.php):

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

and change that to

if ($c->getCollectionID() == $_c->getCollectionID()) { 
      echo('<li id="' . $ni->getName() . '" class="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 id="' . $ni->getName() . '" class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
   } else {
      echo('<li id="' . $ni->getName() . '"><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
   }


The only difference is that I added this to the <li> elements:
id="' . $ni->getName() . '"


Vijay's solution sounds "cleaner", but this has worked well for me. The only drawback being that you have to edit your CSS ID names if you change a page name later on (e.g. "About us" to "Company Info" or whatever).

Cheers,
stromberg
kehnee replied on at Permalink Reply
Thanks for the reply Stromberg.

Can you please just clarify how the page name will be written for the CSS ID?

Thanks again.
kehnee replied on at Permalink Reply
Thanks Stromberg. I finally got it working. Appreciate it.
kehnee replied on at Permalink Reply
Hi Vijay,
I'm still interested in your own solution, so could you please help provide some more clarification on what needs to be changed where?

I am willing and open to learn this new exciting CMS and will appreciate any guide or directions.
jordanlev replied on at Permalink Reply
jordanlev
Sounds like the OP solved the problem. But for future reference see this:
http://www.concrete5.org/community/forums/themes/custom-class-for-e...

(you'll want to download the attachment to that forum post, and if you want to understand what it's all about, scroll up to the top and read the thread)
kehnee replied on at Permalink Reply
Thanks Jordanlev