First template

31 Posts

zelky Reply #1, 16 years, 7 months ago

Hi,

I was creating a simple template in Dreamweaver, and decided to finally take the plunge and try to use it for MODx. I’m really glad I did!

I have used another CMS before (windows server) and it’s OK but...I really couldn’t do much with it. There was no way I would have been able to implement my own template!

It really didn’t take me very long to do what I did in MODx before I got stuck with HMTL/CSS and new MODx stuff.

This is the template as HTML/CSS:
Click Here

And this is what I have so far in MODx:
Click Here

I’m going to continue to try to work out the problems with the navigation/menu tomorrow but if anyone has any tips I really appreciate hearing them.

Cheers and thanks.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 7 months ago

Easy! just stick a [[Wayfinder? &startId=`0` &level=`1`]] where you want the menu to appear. This will presume that you have these resources as top-level documents in the Resource Tree. By default, Wayfinder creates nested unordered lists, so you’ll be all set.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

31 Posts

zelky Reply #3, 16 years, 7 months ago

Thanks for your reply.

I already did that, but I think my markup has an error. And I think I may have to add some more code to the wayfinder for it to use my nav/menu correctly.

I read it here:
http://wiki.modxcms.com/index.php/Beginner’s_Guide_to_MODx

31 Posts

zelky Reply #4, 16 years, 7 months ago

I can’t work it out. Can someone please have a look?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>[(Mod X Template)] - [*First Mod X Template*]</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="assets/templates/firstmodxtemplate/mainstyle.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="../new/rss-articles" /> 
<base href="[(site_url)]"></base>
</head> 
<body> 
<div id="header"></div> 
<div id="nav">
<div id="tabsH"> 
  <div id="navigation">
	[!Wayfinder?startId=`0`!]
</div><!-- end of navigation -->
</div></div> 
<div id="wrap">
  <div id="left">
</div>
<div id="content">
		[*content*]	
</div> <!-- end content-main -->

<div style="clear:both;"> </div> 
 
</div>
<div id="site-info">
 	{{footer}}
</div> <!-- end of site-info -->
</body>
</html>

CSS

/* --------------------------------- XXX --------------------------------- */
html { 
	min-height: 100%; 
	margin-bottom: 1px; 
}
body {
	background-image: url(images/);
	background-color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 11px;
	line-height: 18px;
	color: #666666;
}
p {
	margin: 8px 0 8px 0;
}
/* --------------------------------- XXX --------------------------------- */
#wrap {
	width: 960px;
	margin: 0 auto;
	background: #fff;
	border-right: 1px solid #999; 
	border-left: 1px solid #999;
}
#header {
	height: 140px;
	margin: 0 auto;
	width: 960px;
	background: #fff;
	border: 1px solid #999;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-left-radius:	10px;
	-webkit-border-top-right-radius: 10px;
}
#nav {
	width: 960px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	background: #fff;
	text-align: center;
	letter-spacing: .3em;
	padding: 0;
}
#content {
	width: 645px;
	float: right;
	background: #fff;	
	padding: 5px 20px 5px 20px;
	text-align: justify;
}
#left {
	width: 250px;
	float: left;
	padding: 10px;
}
#site-info {
	width: 960px;
	margin: 0 auto;
	background-color: #fff;
	text-align: center;
	font-size: 11px;
	border: 1px solid #999;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	padding: 7px 0 7px 0;
}
/* --------------------------------- LEFT BOX --------------------------------- */
.lefttop {
	width: 235px;
	border: 1px solid #999;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-left-radius:	10px;
	-webkit-border-top-right-radius: 10px;
	padding: 3px 5px 3px 10px;
	background-color: #999;
	font-size: 14px;
	color: #fff;
}
.leftcontent {
	width: 240px;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 3px 5px 3px 5px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}
/* --------------------------------- MENU TABS --------------------------------- */
	#tabsH {
	float:left;
	width:100%;
	background:#000;
	font-size:93%;
	line-height:normal;
}
    #tabsH ul {
	margin:0;
	padding: 3px 5px 0 5px;
	list-style:none;
}
    #tabsH li {
	display:inline;
	margin:0;
	padding:0;
}
    #tabsH a {
	float:left;
	background:url("images/tableftH.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}
    #tabsH a span {
	float:left;
	display:block;
	background:url("images/tabrightH.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
	color:#FFF;
}
    #tabsH a:hover {
	background-position:0% -42px;
}
    #tabsH a:hover span {
	background-position:100% -42px;
}
/* --------------------------------- IMG --------------------------------- */
img { 
	border: none; 
}
/* --------------------------------- NORMAL NAV --------------------------------- */
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
	letter-spacing: .3em;
}
a:hover {
	text-decoration: underline;
	color : #00CCFF;
}
.current {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: underline;
	color: #00CCFF;
}
/* --------------------------------- HEADINGS --------------------------------- */

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #666666;
	letter-spacing: .3em;
	padding : 5px 0 5px 0;
}
.smallfont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color: #666666;
}
/* --------------------------------- TABLE --------------------------------- */
td {
	border: solid 1px #ccc;
	padding-top: 5px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 3px; 
}
/* --------------------------------- XXX --------------------------------- */

31 Posts

zelky Reply #5, 16 years, 7 months ago

I think I’ve jumped a bit to far.

I might pull it back a bit with a new template. I can’t work out what the problem is with the nav and wayfinder among other little things. I don’t think I know enough to solve the problem...I only seem to know enough to start problems.

If I get the same problem with a new template it’s because of my coding/markup skills, not MODx. Which I suspect anyway.

Thanks for the help so far.

607 Posts

einsteinsboi Reply #6, 16 years, 7 months ago

I always recommend reading through the free wayfinder ebook by Kongondo... it really fills in a lot of knowledge gaps when it comes to using wayfinder. You can find it on the first post on this thread -> http://modxcms.com/forums/index.php/topic,34176.0.html

The Coding Pad - MODx MODx Beginner Tutorials
MODx Video Tutorials
MODx Development

31 Posts

zelky Reply #7, 16 years, 7 months ago

Thanks for that. I’m a bit overwhelmed atm...I guess I assumed Wayfinder would just build my menu/nav the way it was in the original template. Looks like I’ve got a lot of reading ahead.

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 16 years, 7 months ago

Here is what you want:

<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Link 4"><span>Link 4</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
  </ul>

The only difference here from a default Wayfinder output is the span tags around the link text. So you’ll need a rowTpl.

<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]"><span>[+wf.linktext+]</span></a>[+wf.wrapper+]</li>

Make a chunk named rowTpl with this. Then your Wayfinder call will look like this:

[!Wayfinder? &startId=`0` &level=`1` &rowTpl=`rowTpl`!]

The [+wf.classes+] will automatically get you a classname of "active" on the active link and "last" on the last one, in case you want to style those differently. The [+wf.wrapper+] probably isn’t necessary for a single-level menu, but it doesn’t hurt anything.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

31 Posts

zelky Reply #9, 16 years, 7 months ago

Quote from: sottwell at Mar 26, 2010, 11:14 PM

Here is what you want:

<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Link 4"><span>Link 4</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
  </ul>

The only difference here from a default Wayfinder output is the span tags...

Ah the span tags. Silly me I’m not looking at the work closely enough. Thanks for taking the time to have such a definitive look Susan. I will do as you have suggested and post results.

I’ve just read the first few pages of the wayfinder pdf suggested above also...that is making "things" a little easier to understand.

Again thank you very much for your time and guidance.

EDIT:

I kiss the ground upon which you walk Susan! Thanks so much it works now.
Click Here

31 Posts

zelky Reply #10, 16 years, 7 months ago

I added a new chunk to add the left content box too. I just have to work out how to make it editable?

{{leftcontent}}

<div class="lefttop">Left Content Heading</div> 
<div class="leftcontent">Left Content</div>
<br />

I think I need to put something in to replace the "Left Content Heading" and "Left Content" parts so that I can make it editable by the text editor? I’m going to keep reading up.