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?
The view.php file is below. I assume I have to reference my ids in here (#header, #home, #about, #news, #involved, #services, #links).
My current test site is here:
http://www.tirzah.ie/concrete5/...
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{
Viewing 15 lines of 73 lines. View entire code block.
My current test site is here:
http://www.tirzah.ie/concrete5/...
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?
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?
using firebug i can see
/concrete5/themes/ttest/style.css
use that stylesheet and you shoud be fine.
/concrete5/themes/ttest/style.css
use that stylesheet and you shoud be fine.
.nav is the class of the unordered list that forms your navigation.
you can do
etc
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
Thanks, I'll try this and report back.
If you find this usefull mark it as helpfull or best anwser.
Will do! Though I have a feeling I'll be back for more help :S
OK, I'm just not getting this.
#header is the name of the containing 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.
#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>
remove the ul within #header.
Auto nav wraps already in ul with class nav.
At the moment you have
and you should have
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>
I haven't yet set anything to have a class called nav so I'm not sure how where I change
to
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.
<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.
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.
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.
Your work didn't go unnoticed, I found it incredibly helpful.
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?
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?
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
and replace it with
and the CSS for the nav is as follows
Thanks to both of you for the help.
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.
Your have a class of "nav" so all your really need is to override your styles in your style.css