I’ve started using MODx again with MODx Revolution. But I’ve forgotten most of what I learnt using my first test/play site using Evolution.
I’ve started a new site to play with and (again) am having problems with the navigation and wayfinder. I think I found it easier last time because a whole bunch of chunks and snippets installed by default in the package of MODx I was using.
I have installed Wayfinder, and I think I need some snippets. I also think I am having real problems understanding wayfinder...I might just be a little bit too green. I can’t quite work out how to reference the CSS...among other stuff. I’m having problems progressing from HTML and CSS I guess. I’m having a more difficult time this time around...but not because of MODx.
http://zelky.com.au/modx/
But here is my code:
HTML
<html>
<head>
<title> [[*pagetitle*]] | [[++site_name]]</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="[[++base_url]]manager/templates/Zelky/mainstyle.css" />
<link rel="stylesheet" type="text/css" href="[[++base_url]]manager/templates/Zelky/chrometheme/chromestyle.css" />
<script type="text/javascript" href="[[++base_url]]manager/templates/Zelky/chromejs/chrome.js"></script>
<base href="[[++site_url]]"></base>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="chromestyle">
[[!Wayfinder? &startId=`0` &level=`1` &rowTpl=`rowTpl`!]]
<!-- end of navigation -->
</div>
<div id="wrap">
<div id="left">
[[$leftcontent]]
</div>
<div id="content">
[[$content]]
</div> <!-- end content-main -->
<div style="clear:both;"> </div>
</div>
<div id="footer">
[[$footer]]
</div> <!-- end of site-info -->
</body>
</html>
CSS
.chromestyle{
width: 894px;
font-family: verdana;
font-size: 10px;
font-weight: 400;
border-left: solid 3px #eee;
border-right: solid 3px #eee;
margin: 0 auto;
letter-spacing: .3em;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border-bottom: 1px solid #999999;
width: 894px;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font-family: verdana;
font-size: 10px;
font-weight: 400;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
Chuck - rowTpl
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
Chuck - Navigation
<li[+wf.classes+]><a href="[+wf.link+]"<[+wf.linktext+]></a>[+wf.wrapper+]</li>
☆ A M B ☆
☆ A M B ☆