Beginner- Basic template

Quote from: AMDbuilder at Jul 31, 2010, 11:26 PM

Have you looked at demo.amdbuilder.net? Do you have a template in mind you would like to use? If so i’m sure someone can convert it for you.

I suppose I could do that, but I need something built fast. I may have to hit you up for another project. I was trying to test run this for a non-profit and do not have the time to code out for them nor spend a lot of dough on it. For a real client, I may just call on you. But not this.

Quote from: Photowebmax at Aug 06, 2010, 12:34 PM

[re: templates]
The crux though is that the general background information on how to do this is lacking. With time there will be new guides, tutorials and blogs highlighting this area. But it can be a waiting game for many new users.

One of the things that we heard for years with MODx is that the development came before the documentation. It was a long process, but some good documentation was made available.

It’s no different than Evo, except the tag syntax is slightly different (and actually more logical for newcomers). The basic Evo type snippets have been ported or have replacements readily available, only PHx-like filters are now baked into the core and you don’t have any issues with incompatibility there or any restrictions on nesting snippets at all. Revo is actually much easier to get working right for building sites, and more flexible/robust.

That being said, our official documentation at http://rtfm.modx.com is incredibly better than anything we ever had for Evo.

But now the whole MODx world has changed focus and the new Revolution product is the future. It may be a leap forward but the collective mass of well written and nicely explained documentation is lagging behind once again. Then there is the confusion of making sure the information one is reading is applicable to Evolution, Revolution or both.

Specific feedback about where things are confusing would be tremendously appreciated!

But getting back to the OP’s question: it might be more direct to build a template from scratch or adapt a template from somewhere else. Waiting for Revo specific templates might take more time than its worth, and like I say, those templates might suffer from their very own popularity...

Take any html template, even the html version of a WordPress template like on my blog at http://thrash.me, and swap out things like the menu for tags. That being said, I certainly understand folks wanting a plug and play experience. We’re going to work on a better solution for getting front-end templates showcased and packaged for Revo in the (hopefully near) future.

The way i first started out was to create a flat html page outside of modx, this included hard coding some of the nav items. I add what ever styles to a css. Then pasted all the html directly into modx template, making sure my reference to the CSS file was correct.

Now when viewing a page with this new template select it should look exactly the same as your flat page did, this way you know all CSS and html is working correctly.

Then bit by bit I removed some of the html and replaced it with the modx bits. I’d normally start with the menu. I’d remove all the html that is needed for the menu and replaced it with a wayfinder call, amending as needed so it’s rendering exactly the same as the flat html. The i’d remove the main content and replace with the content tag, add some content to page and check it’s rendering ok and so on.... I found doing bits of the html at a time helped easly identified any things i may of done incorrectly. Once you’ve done a few site you’ll then actually be able to code your flat html with all the modx tags already in it. It’s so quick to modx a site once you get use to it. Do stick with it, it’s by far the most flexible CMS i’ve used!

If your new to HTML/CSS try modxing one of the Free templates here, some really nice designs:
http://www.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/

Enjoy

Ben

I have the "Environmental brand" already ported to MODx http://sottwell.com/eco.html

These are all nice; if I port one a week it’ll only take me two years to port them all! Definitely going into my "templates" bookmark.

Quote from: bennyb at Aug 12, 2010, 10:56 AM

making sure my reference to the CSS file was correct.

I like your approach to starting with flat HTML - as I’m currently considering moving an existing site to modx this is the way I intend to operate - however, the above quoted line regarding the css is where I get confused. Could you be more specific? I have an HTML file and a CSS file...now what?

I like your approach to starting with flat HTML - as I’m currently considering moving an existing site to modx this is the way I intend to operate - however, the above quoted line regarding the css is where I get confused. Could you be more specific? I have an HTML file and a CSS file...now what?

Lets say you have a static project file folder called mySiteTest. Inside that folder are your html files and a CSS folder for your CSS files and an Images folder for your layout & design images. If that site functions, validates and has the correct doctype then you are good to go for using this as your MODx template.

If you are new to MODx I would have a go at creating test site projects on your computer locally. I am a Mac user and I use MAMP for this purpose. Once you have MODx installed (talking about Evolution here but Revo is very similar) you will notice that inside the archive (main MODx) folder is a sub folder called "assets". Inside that folder is folder called "templates". Most people will use this folder to contain their own template files. Create a new folder called "templateName" (obviously you will use a more descriptive real name). Then copy your CSS and Images folders from your project mySiteTest folder you have been working on into this templateName folder. With me?

You then need to create a MODx template from within the MODx Manager. The template will not contain any content, just the main html tags like head, body and so forth. Inside the head area of your template you need to tell the MODx template where to find the supporting files (CSS, images and scripts etc. ) The code for that will look something like this:


There are a few built in placeholders that MODx uses. These are called Template Variables or TV’s. You need to get used to the convention of how they get used. They control all the dynamic power of the MODx system along with some executed PHP functions that MODx calls Snippets.

The thing to remember is that you can use any design & layout structure from an existing site or a static XHTML project and make that the basis of your custom MODx template. There are a few simple steps to achieve this but this is one of the great things about MODx. Other systems are more rigid in this regard.

I suggest you read and follow Mary’s wonderful tutorials that can be found here: http://codingpad.maryspad.com/2009/03/28/building-a-website-with-modx-for-newbies-part-1-introduction/

Good luck!

<link rel="stylesheet" href="/assets/templates/templateName/CSS/styles.css" type="text/css" media="screen" />

may not work - in fact it definitely won’t work if MODx was installed in a subdirectory of the webspace, as it often is when working locally. It should be

Note the leading / is removed, making the URL relative to the index.php file.

Quote from: sottwell at Aug 20, 2010, 02:01 AM

<link rel="stylesheet" href="/assets/templates/templateName/CSS/styles.css" type="text/css" media="screen" />

may not work - in fact it definitely won’t work if MODx was installed in a subdirectory of the webspace, as it often is when working locally. It should be

<link rel="stylesheet" href="assets/templates/templateName/CSS/styles.css" type="text/css" media="screen" />

Note the leading / is removed, making the URL relative to the index.php file.

But also be careful if you are using Friendly URLs as this could also break when viewing child documents.

Noted! That path is actually from a live site...

Work for my in yaml templates
<base href="localhost" />
<link href="manager/templates/notesex/css/my_layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="assets/nortesex/css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />