Redoing a site with Modx

Hi

I am the web master at www.spirituellfilm.no a Norwegian film club site for spiritual movies.

The site is old and needs to be redone.

Do I need to redo the html before I proceed with Modx?
and then go to http://bobsguides.com/porting-your-site-to-modx.html.

What do you recommend? How is the best way to proceed?

Thanks.

ps
I feel like I am asking the "How Do I use Modx?" question over and over. Asking for a clear cut approach to using this cms. I have noticed that I am holding back from taking the plunge, and when I finally do, I would really like to create a beginners (video) tutorial to help others also jump in. So even though I have been told and know about the docs, they are not informative enough for me. I need a 10 point list saying do this and this and this, and there is your site. (or so I feel) Something that is quick and easy to follow. Something that gets a hold of me and pulls me in not pushes me away with too many words. Give me this and I am right on Modx creating my own tutorials that I can share.

First, is your current site built with just HTML/CSS? Then you probably don’t need to change the HTML. You will just need to port the template into MODx by replacing the dynamic parts with the appropriate MODx tags, and adding in the snippets for navigation, search, and other functionality that you want.

If you’re planning on using MODx Evolution, I have written a series of step by step tuts for beginners http://codingpad.maryspad.com/beginner-tutorials/ as well as recorded a couple for screencasts. There are also a lot of other MODx Evolution tutorials and screencasts that should have you flying in no time

If you’re using MODx Revolution, there are also numerous tutorial out there and the docs are pretty comprehensive. The best way I’ve found is to just dive in, get started, ask lots of questions as you go... the forums here are amazing and people are very knowledgeable and very generous with their knowledge.

There is no one clear-cut guide on how to use this CMS, because MODx is very flexible and versatile, and there are often several ways to approach the same task, also everyone has a different learning style and approach. But most of the knowledge you need to get started and running with MODx (Evolution and Revolution) is out there.

Dive in, the water’s just fine

Diving in with a huge belly splash.....the ones that shows how new one is to diving... feeling kinda stupid since "everyone" else are "perfect" divers.

I need diving lessons here on the forum, and I am starting with a simple test site made with Dreamweaver. It contains 4 html pages, 2 images linked to the first page, and a css file. No navigation between them has been created yet.

I decided to create a template folder and site name folder inside the assets folder, as it seemed like the best logical approach.

I would like the "best" practices approach (yes I know it depends on the individual):

/assets/templates/test
and an images folder
/assets/templates/test/images

I am not finding a clear-cut (as close as possible to one) approach from here. Many documents are saying many different things.

---- please ---- a couple of lines how you proceeded from here would be nice. It should be a breeze for someone who has done this many times before.

Thank you.

When you create a template in MODx, it lives in the database so you shouldn’t need a templates folder. The images can go anywhere you like as long as you remember where they are.

assets/images is a common location, but if you will have a lot of images, you might want to put them in separate folders.

As for your HTML code, unless it has PHP code in it, it should be fine as is, although you’ll probably want to move the parts that are repeated on more than one page into chunks (e.g., headers, footers, etc).

Quote from: BobRay at Sep 03, 2010, 03:32 AM

When you create a template in MODx, it lives in the database so you shouldn’t need a templates folder. The images can go anywhere you like as long as you remember where they are.

assets/images is a common location, but if you will have a lot of images, you might want to put them in separate folders.

As for your HTML code, unless it has PHP code in it, it should be fine as is, although you’ll probably want to move the parts that are repeated on more than one page into chunks (e.g., headers, footers, etc).

What about creating an assets/mysite/ ---- (mysite = placeholder for name of site) placing html and css into that?
and the images folder (and as you say for lots of images these can be placed into separate folders).

The mysite is for keeping a good structure for creating (if I create) multiple sites.

So the header containing images, left menu, main content should be placed into a chunk of code which is reused likely by inserting a code. So do I right click chunks and choose new chunk, and then just do a copy and paste of header with images, etc to create the various chunks? What do I do then?


Edit....
Moving onward

In elements I Right clicked chunks -> new chunk
Name: header
Description: header containing images
Category: ---- I right clicked category menu on the left side and picked new Category. I called the category folder test.
I had to do it over again since the Category dropdown list did not contain the test folder. So I right clicked Chunks again -> new chunk. Filled in the above info and picked the test category.

Went into Dreamweaver and picked the div header tag code. Copied and pasted it into the new chunk. Tried to save the chunk with the name header, but there was already one with that name, so I renamed it header-test. Saved.


Right clicked new chunk again.
Name: left menu-test
Description: This is the left menu containing link names
Category: test

Went into dreamweaver and picked the div left menu tag code. Copied and pasted it into the new chunk. Saved the chunk.


right clicked new chunk again.
Name: maincontent-test
Description: Here is where the main content will go.
Category: test

I pasted the maincontent div tag code into the chunk and removed the text I had inside the maincontent area. Saved chunk.


right clicked new chunk again.
Name: topmenu-test
Description: This is the area for the top menu links.
Category: test

Pasted the topmenu div tag code into the chunk. Saved chunk.


Where do I go from here?

I may be misunderstanding you, but I think you’re struggling with the concepts we all wrestled with when first moving to a CMS from straight HTML/CSS.

Pretty much everything in MODx lives in the DB except CSS files and images, so you have to stop thinking in terms of files and directories and start thinking of MODx objects like resources, chunks, templates, template variables, etc. -- all of which are in the DB.

It might help to go to the site in my sig and re-read the section on "How MODx Works."

Basically, you create the various MODx objects in the Manager, they get stored in the DB, and you put MODx tags where you want them to appear.

For example, your header chunk will appear where you put a chunk tag referring to it in your template:

[[$ChunkName]]

When MODx parses the template (which is also in the DB), it will see the chunk tag, and look in the chunks table of the DB for a chunk with that name, pull the HTML code from the chunk, and use it to replace the tag.

Hope this helps . . . and Welcome to MODx.

This is how I understand it. Please correct/adjust me.

There is no need to create a assets/sitename - since the html files will not be used. Because these files will be saved as a template. Because the div tags I have used header, left menu, top menu and main content will be a part of the template created in Modx. But I could though create the folder for my site letting it contain an images folder and the css file.

Chunks contain content (text, html, flash, javascript, snippets, etc no php though) that can be used on any page. Naming scheme is {{MyChunk}}

Snippets contain dynamic (changes) php or javascript code that can be used on any page.
For instance the Wayfinder snippet (that is a part of the snippet library in Modx) creates menues.

I read that you created a chunk for your header and footer. I am thinking about creating perhaps my topmenu and header as a chunk leaving the left menu and main content within the template.


Starting over:
assets/test --- removed the html files from here, leaving only the css file, and the images folder.

Manager -> Elements -> right clicked Templates -> new template
Name: test
description: This is the template containing left menu and main content. Header and top menu I am placing into a chunk to see how that works.
Category: test

Went into Dreamweaver and copied the code for leftmenu and maincontent. Pasted it into the template and removed the content inside the maincontent div. Saved the file.

Went into the Chunks folder and found my header-test and topmenu-test.
Went back into the template I just created pasted {{$header-test}} right above the leftmenu div, and {{$topmenu-test}}. Saved the file.

Went to Resources. Right clicked web -> create -> create a new document here

Uses Template: mine is called test
Title for my page: test
Long Title: I am testing this to see how it works.

Wrote some text in the Resource Content area. Saved the file and previewed. Hmm it looked strange. I am obviously missing a few steps.


EDIT:

I have figured out a few things I did wrong.
I corrected the template.

This is what the new template now looks like:

<html>
<head>
<link rel="stylesheet" href="assets/test/styles.css" type="text/css" />
</head>

<body>

{{$header-test}} --------> [[$header-test]] ---- My brackets were the wrong type.
{{$topmenu-test}} -------> [[$topmenu-test]]

<div id="leftmenu">
<p>Velkommen</p>
<p>Om OSF</p>
<p>Månedens Film</p>
<p>Påmelding</p>
<p>Meldemskap</p>
<p>Nyhetsbrev</p>
<p>Siste Nytt</p>
<p>Film Arkiv</p>
<p>Kontakt</p>
<p>&nbsp;</p>
</div>
<div id="maincontent">[[*content]]</div>

</body>
</html>

--

I right clicked web to create a new document. Wrote something inside the resource content. Saved and previewed. Images were in place and the file looked as I wanted it to. This is a good beginning!

There are Norwegians here to help if you wan’t to. I can. I know MODx.

(In Norwegian: Jeg kan assistere hvis du vil. Jeg kjenner MODx).

Thank you Sylvaticus (takk for tilbudet!)

I am gradually moving forward and documenting the steps that I take so that I can share my progress with others. I have a thread on requests for barebones tutorials going, so I’ll paste my findings from today into it. I will hopefully continue on Monday progressing further into Modx Revo.

http://modxcms.com/forums/index.php/topic,53501.msg309950.html#msg309950

Have a great weekend! Thank you very much for your help Bob Ray! It helped a lot!

Got a question.

New documents show up on the left side seemingly by random.
I would like to create a folder called test or whatever and have my various documents within it. How do I create a folder for them?