Workflow from PSD to MODx

I am about to start working on my first modx website.

I don’t want to hack a website and would prefer to design a psd - convert it to valid code and then eventually to offer it as a template for the modx community.

I have no idea about modx but am willing to learn.

Will post more on this in due course.

RM ;-)

This should give you some help... http://www.sottwell.com/how-templates-work.html

Thanks very much for this - Can’t access it as I am at work but will check it out when I get home.

Thanks again.

M

RM
As a designer it took a short while to get my head wrapped around MODx, especially after Joomla!. But it really isn’t that difficult. Design any page like it’s a static site. Once finished you replace things like menu lists with the proper snippet calls. My suggestion, based on my experience, would be to start with menus first and learn how to order items and get them to show properly. Once you’re comfortable move on to other features. The learning curve for MODx isn’t that big - especially compared to Joomla! and Drupal.

Good luck!

Yes, I think you are right.

I’ve looked at it once or twice lost interest and left it alone.

I can hand code comfortablly in html and css (although I do like to have my reference book to hand.)

Thanks for stpping by and leaving your input.

;-)

See also the site in my sig. Especially the "Getting Started" part.

i´m still pretty new to this as well but i´ve done about 10 sites now in modx and it really is amazing.
This is my workflow... don´t know if it´ll help:

-Design in photoshop
-Code the html and css for an example page in dreamweaver/notepad whatever your preference
-Put the whole of the html into the template in modx, content and all and check it on a sample page, here you can start to fix browser bugs etc.
-Methodically start chopping out all the stuff that shows on all the pages the same and stick em into `chunks´ (think of em like .inc files if you know anything about php!) this would typically be all the script in the <head>, the header, the footer etc.
-Add in the snippets and modx specific bits, replacing all your content for [*#content*], replacing your nav bar with a wayfinder call, replacing the page title with <title>[(site_name)] | [*pagetitle*]</title>, creating template variables where needed etc. and more stuff like that.

By the end of it your template should really look nothing like a normal html template, instead just a few container divs and a bunch of chunks, my nav is normally a chunk as well with the wayfinder call in the chunk, that way if you want to add something to the wayfinder call like &hideSubMenus=`true` but the site is pretty much finished you only need to add it to one chunk...not every template. In my opinion its better in the long run to have your template pretty much empty of actual content, just calls to chunks and a bunch of container divs.

Hope this saves you a bit of the trial and error and wasted hours cursing myself for not having made chunks from the start! Good luck, Dan

I work in pretty much the same way as dangw.
However, I’ve done some work on a site originally coded by Rachel Black and the default template is :

which illustrates how far you can go with chunks, TV’s etc.
The main problem I’ve found with this method is you have to keep looking at the chunks to see what’s happening!

Quote from: bunk58 at Sep 25, 2008, 08:57 AM

<h1>[*longtitle:ifempty=`[*pagetitle*]`*]</h1>

I love that part and I just started implementing something similar. Here’s mine:

Here’s why mine is different, or rather, how mine works...

• it checks to see if the longtitle is blank (like yours)
• if it is blank, then display something else (like yours)
• if it’s not blank, then display it this way (slightly different approach)
• I put my HTML tags inside this call because if the titles (or description or whatever you are calling here) are both blank, then I don’t want anything displayed. This is different than bunk58’s call since his would leave the <h1> tags on the page and thus possibly take up space, right?

No matter what your approach is, there’s a ton of different ways to do a task in MODx (which is the beauty of it). Is there a page or post that documents these different ideas... kinda like a ’best practices’ (e.g. here’s the best way to display a title if you want to do X)?

Useful comments from Bunk and ER! I like those different ways of inserting the title, gonna have to get more creative with that...
Its a good idea, we should really have a wiki for best practices or "this is how I do this...... but does anyone know a better way?" kind of things
Bunk - I know what you mean about having to remember which chunks do what and not having your code all in one place, i now use the description for chunks and split things up into sections way more than I did at the beginning