Styling auto-nav with css

Permalink 1 user found helpful
I'm pulling my hair out here trying to get C5 to recognise my CSS file. After a little bit of research, I found that I should copy concrete/block/autonav/view.php over to block/autonav/templates/my_test/view.php. I also placed my css file in the my_test folder.

It's just a simple horizontal menu with a two state rollover button - nothing special. However, I believe I have to change the view.php file to somehow reference my CSS. The problem is that I don't know php and I'm lost.

My css is fairly simple. I've cut the relevant css below out of themes/super_theme/style.css, and as mentioned above, placed it into block/autonav/templates/my_test/style.css. Perhaps as I already have a css file called style.css (in the themes folder) I should call this something else?

@charset "utf-8";
/* CSS Document */
#header{margin-top:280px; float:left; width:900px; display:block;  cursor:hand;}
#header ul{margin:0; padding:0 0 0 150px;}
#header li{float:left; height:30px; width:80px; list-style-type:none; margin:10px 10px 0 10px;}
#home, #about, #news, #involved, #services, #links {background:url(images/button2.gif) no-repeat 0 0;}
#home:hover, #about:hover, #news:hover, #services:hover #services:hover, #links:hover {background-position:0 -30px;}
#home span, #about span, #news span, #involved span, #services span, #links span {position:absolute; top: -9999px;}


The view.php file is below. I assume I have to reference my ids in here (#header, #home, #about, #news, #involved, #services, #links).

<?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{


My current test site is here:

http://www.tirzah.ie/concrete5/...

 
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
Add this to your style.css
.nav li{
   display:inline-block;
   list-style:none;
   padding:5px 0px!important;
}   
.nav li a{
   color:#fff;
   text-decoration:none;
}   
.nav li.nav-selected a , .nav li a:hover{
   color:#2e66c4;
   border-bottom:2px solid #2e66c4;
}

Your have a class of "nav" so all your really need is to override your styles in your style.css
Squibs replied on at Permalink Reply
Thanks for the reply. Just a little bit of clarification.

1) I have two CSS files, one in "themes" and the other in "templates" - both named style.css. Should I change the name of one of these?
2) I'm a little confused where the code you listed will go into my CSS (Sorry, I'm a little slow in the head ;P). Are you suggesting getting rid of the #header stuff and replacing this with .nav?
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
using firebug i can see

/concrete5/themes/ttest/style.css


use that stylesheet and you shoud be fine.
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
.nav is the class of the unordered list that forms your navigation.
you can do
#header ul.nav li {your styles}
#header ul.nav li a{your styles}
#header ul.nav li a:hover{your styles}

etc
Squibs replied on at Permalink Reply
Thanks, I'll try this and report back.
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
If you find this usefull mark it as helpfull or best anwser.
Squibs replied on at Permalink Reply
Will do! Though I have a feeling I'll be back for more help :S
Squibs replied on at Permalink Reply
OK, I'm just not getting this.

#header is the name of the containing div.

<div id="header">
          <ul>
<?php
    $a = new Area('header nav');
    $a->display($c);
?>
       </ul>
</div>


#home, #about, #news, #get (I changed this from #involved), #services, #links are the names of the various pages I've created via C5.

I don't get why I would be setting <ul> <li> and <a> values of the containing div (#header). Surely if I want to position #header on the page I shouldn't be selecting <ul>, <li> and <a>?

I also don't get how I can select individual gifs for the rollover images (e.g. home.gif, about.gif etc) if I'm using classes.

Perhaps this my confusion arises because I only ever created a nav bar in what I would consider to be a traditional static html way and written the css for that.

<div id="header">
       <ul>
       <li id="home"><a href="#"><span>Home</span></a></li>
       <li id="about"><a href="#"><span>About</span></a></li>
       <li id="news"><a href="#"><span>News</span></a></li>
       <li id="get"><a href="#"><span>Get Involved</span></a></li>       
       <li id="services"><a href="#"><span>Services</span></a></li>
       <li id="links"><a href="#"><span>Links</span></a></li>
       </ul>
 </div>
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
remove the ul within #header.
Auto nav wraps already in ul with class nav.
At the moment you have
<div id="header">
<ul>
<ul class="nav">
</ul>
</ul>
</div>

and you should have

<div id="header">
<ul class="nav">
</ul>
</div>
Squibs replied on at Permalink Reply
I haven't yet set anything to have a class called nav so I'm not sure how where I change

<div id="header">
<ul>
<ul class="nav">
</ul>
</ul>
</div>


to

<div id="header">
<ul class="nav">
</ul>
</div>


do you mean in the view.php?

Even though I really like the look of C5 and features of C5, I'm thinking of just knocking it on the head. I've spent two fruitless days trying to figure out how to style a simple nav bar (links to 6 pages with two rollover states) and I don't think I'm getting much closer to solving my issue. (I appreciate the help all the same, revolutiumstudio.)

Perhaps this is all due to my stupidity, but surely there should be a straightforward way of doing styling a nav? Sorry about getting moany but I'm just getting frustrated now.

I'll have a proper look at the CSS when I don't feel like flushing my mouse down the toilet.
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
Look,
Do the following:
got to edit mode, click on your navigation block
choose templates and use header menu.

in the css that i have sent to you change the class .nav to nav-header.

Your navigation should work fine after that.

If cant do that attach you template file and I will take a look at it.
sambrody24 replied on at Permalink Reply
sambrody24
Your work didn't go unnoticed, I found it incredibly helpful.
Steevb replied on at Permalink Reply
Steevb
Hey Squibs,
As long as you stick a couple of simple rules all runs smooth......
In your theme head you call the style sheet and in your theme body you call the nav.......
<head>
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/style.css">
<?Loader::element('header_required'); ?>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="topnav">
<? $a = new Area('Header Nav');$a->display($c);?>
</div>
<content>
<? $a = new Area('Main');$a->display($c);?>
</content>
<footer>
footer content
</footer>
</body>

OK?
Squibs replied on at Permalink Best Answer Reply
I began with that coed but it wasn't picking up the CSS. Perhaps this was because of my crappy coding. As this is only my second attempt at a real website such a thing seems likely. The good news is that I've managed to find a solution. For posterity's sake here it is.

I got rid of

<div id="header">
<? $a = new Area('Header Nav');$a->display($c);?>
</div>


and replace it with

<div id="header">
        <ul class="nav-header">
            <li class=" "><a href="/concrete5/"  ><span>Home</span></a></li>
            <li class=" "><a href="/concrete5/index.php/about/"  ><span>About</span></a></li>
            <li class=" "><a href="/concrete5/index.php/news/"  ><span>News</span></a></li>
            <li class=" "><a href="/concrete5/index.php/get/"  ><span>Get Involved</span></a></li>
            <li class=" "><a href="/concrete5/index.php/services/"  ><span>Services</span></a></li>
            <li class=" "><a href="/concrete5/index.php/links/"  ><span>Links</span></a></li></ul>
       </div>


and the CSS for the nav is as follows

#header{margin-top:280px; float:left; width:900px; display:block;}
#header ul.nav-header {margin:0; padding:0 0 0 150px;}
#header ul.nav-header li {float:left; list-style-type:none; margin:10px 10px 0 10px;}
#header ul.nav-header li a {background:url(images/button2.gif) no-repeat 0 0;text-decoration:none; height:30px; width:80px; float:left;}
#header ul.nav-header li a:hover {background-position:0 -30px;}
#header ul.nav-header li a span {position:absolute; top:-9999px;}


Thanks to both of you for the help.