HELP! How to: Create a template that will look like this...

Hi I’ve just installed Revolution and trying to kick start my dev. But I’m having trouble with putting together a template I have created.

I have included a picture of the layout. Ideally the layout will be able to be updated with content boxes. These boxes could include texts, images or a mixture of the two.

The html I have written realise on a css file and j-query script. I’m not sure where to start on this with Modx I have looked over the web, but found nothing that makes sense.


I’m using MODx Revolution 2.0.4-pl2 on os x 10.6.4

Do you have a working version of your template?

If you do then it’s a matter of breaking it up into chunks or snippets, so basically your header would be one chunk and each content box would be a chunk each.

Think of it as separate web pages being all merged into one via includes or frames.

It’s very simple once you get the hang of it.

Here are a few tutorials that might help.

From XHTML/CSS to MODx part1

Good Luck and have fun.

Looks like you are having a CSS problem, not a MODx problem! The process of creating a site is:

1. Create a mock-up in photoshop, fireworks, etc.
2. Then come up with an approach to do your css (always there are different ways to do things)
3. After you have your html, you add your jquery, mootools, prototype, etc.
4. And then, you bring that into MODx

Good luck!

For a layout like that the easiest thing is to use a CSS Framework,
there are tons of them out there...

Read http://www.modxperience.com/modxperi/experience/developer-guide/how-to-use-a-css-framework.html this
article and see if it helps. Then select a framework and replicate
your layout using it... it is not as hard as you think...

Thanks for your replies.

I will have a try and let you know how I go.


Thanks

Quote from: benmarte at Nov 03, 2010, 06:24 PM

Do you have a working version of your template?

Do you?

As charliez said, your best option are the CSS Frameworks and they are very easy to use. This is a 960 css framework screen cast:

http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/

http://960.gs/

and the YUI framework my favorite

http://developer.yahoo.com/yui/grids/

Have fun!

Or try YAML: http://www.yaml.de/en/home.html Very well documented!

I have read and found some important information here. I was having a hard time creating template and now seems like I came to a right place. Thanks for this.

Actually for that layout a simple css grid may be better than the larger grid systems: