My First MODx Template

40 Posts

whitesphynx Reply #1, 15 years, 6 months ago

Well surprisingly I did not find any posts similar to mine, and if there is one I apologize and please link me.

Now, I am new to making templates in general but I have used Joomla and Wordpress to publish web pages with pre-built templates. I’m also trained and fairly good with HTML and CSS and have built static sites, and I can get by with Javascript and PHP as well.
I researched extensively on CMS systems before picking the one I wanted to master and use for my business. MODx Revolution is that one.

So now to the meat of my problem:
I got my database setup, MODx installed and then followed this tutorial http://wiki.modxcms.com/index.php/Beginner%27s_Guide_to_MODx, I believe it is actually for Evo but I found where I needed to get to in the new manager interface with a little research. I did not however try and build this sample template. Instead I have built my own HTML/CSS template in Dreamweaver, just a shell atm, and substituted all pertinent information from the tutorial with my own. I have the correct template selected and applied to the one HOME page that I just typed some random text on.
The problem seems to me to be the CSS file is not linked properly, but it could be something else related to the tutorial guideline usage.
Here is my test site where I have MODx installed: swdtest.net
The problem is obvious after you see the link. I am getting the "replaced markup" showing up visually on the page and no CSS layout.

Here is my code, fyi I have tried multiple variations for the BASE tag and CSS link URLs and keep getting the same same results.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://swdtest.net/"></base>
<title> [*pagetitle*] | [(site_name)]</title>
<link href="http://swdtest.net/manager/templates/MODx_1/css/root.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-wrap">
<div id="content-holder" class="CTR">
<div id="branding">
<div id="logo"></div><!--END logo-->
</div><!--END branding-->
<div id="menu">
	[!Wayfinder?startId=`0`!]
</div><!--END menu-->
<div id="content-main">
<div id="graphic-column"></div><!--END graphic-column-->
<div id="ad-column">
<div id="ad-holder"></div>
<div id="social-links"></div>
</div><!--END ad-column-->
<div id="content-text">
	[*content*]
</div><!--END content-text-->
</div><!--END content-main-->
<div id="content-sub">
<div id="inner-sub-wrap" class="CTR">
<div id="navigation">
	[!Wayfinder?startId=`0`!]
</div><!--END navigation-->
<div id="site-info">
	{{site-info}}
</div>
<div id="sub-graphic"></div>
</div><!--END inner-sub-wrap-->
</div><!--END content-sub-->
</div><!--END content-holder-->
</div><!--END page-wrap-->
</body>
</html>

Upon pasting this I see an error in the TITLE tag. I’m not positive what is supposed to be in place of [(site_name)] as far as quotes or exact syntax. I would assume "http://swdtest.net" but correction appreciated along with any other errors you see.

I’m sure that this is some simple mistake or oversight because it seems fairly easy to build templates with MODx from HTML/CSS markup. Maybe there is something different in Revo that the tutorial is not mentioning or has me doing wrong.

Thanks in advance for your time and information, and of course for the cutting edge CMS grin

MODx helps me stay in the white

3 Posts

bobanrosic Reply #2, 15 years, 6 months ago

You are using Evo tags for Revo site

http://rtfm.modx.com/display/revolution20/Tag+Syntax

40 Posts

whitesphynx Reply #3, 15 years, 6 months ago

Ah great that helped! Much thanks.

The only error now is with the Wayfinder calls and the title. They still show up as text. The wayfinder was listed as

[!Wayfinder?startId=`0`!]

and I’m not sure the new syntax for those form the list as I don’t see anything wrapped in [!!] listed. Would it just be double brackets like so?

[[!Wayfinder?startId=`0`!]]

And then can you tell me what the syntax for the TITLE tag is supposed to be, whether it needs the [()] and no quotes or not, and really the whole call of

<title> [[*pagetitle*]] | [(swdtest.net)]</title>

is correct.

Thanks BlinkB

MODx helps me stay in the white

3 Posts

bobanrosic Reply #4, 15 years, 6 months ago

[[Wayfinder? &startId=`0`]] is the call, and i’m not sure what your question about title is...
<title>[[*pagetitle]] | swdtest.net</title> should work

40 Posts

whitesphynx Reply #5, 15 years, 6 months ago

Ahhhhh there it goes.
Thanks very much. I knew it was something simple and I appreciate your patience. I obviously have a lot more reading to do on MODx and templating. Just wanted to make sure I could get the site skeleton up and running before I moved any deeper into it.

Works like a charm now. Someone should put some notes in that wiki for Rev users because it is a great tutorial.

Cheers! laugh

MODx helps me stay in the white

284 Posts

novolo Reply #6, 15 years, 6 months ago

If you’re familiar with HTML5Boilerplate or with HTML5,CSS3,jQuery and js-loaders you could user my template framework as a code-base for your template layout:

Blogpost: http://www.novolo.de/en/know-how/blog/2011/free-template-modx-boilerplate
forums-post: http://modxcms.com/forums/index.php?topic=60841.0
Wiki: https://github.com/smooth-graphics/modx-boilerplate/wiki
Code: https://github.com/smooth-graphics/modx-boilerplate

I don’t really know who’s maintaining this MODX-Wiki but it isn’t an official channel (I think). You can use the RTFM.modx.com documentation with tons of reading stuff…

MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)