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

Hi Community,

I have looked at all these tutorials and I’m still not getting any where. I’m not understanding the basic concepts used in ModX to setup a template and insert content. Most of the guides discuss installation and user guides other revolution.

I have put included a zip with HTML, CSS and JS, If there is anyone willing to give me some assistance to get me going using the files I provide. It would be much appreciated.

The zip contains two HTML files (a home page with content boxes and a page with more detail look at the content)
My HTML layout is supported by Jquery which is also included.

Cheers

Tej

Hey man! You already have your layout ready to roll. Now what you need is to grasp the MODx concept of how to do things. I’m sending you a few links just for beginners.

http://codingpad.maryspad.com/2009/03/28/building-a-website-with-modx-for-newbies-part-1-introduction/

http://codingpad.maryspad.com/2009/11/23/xhtml-css-to-modx-template-1/

http://wiki.modxcms.com/index.php/Category:HOWTO

http://wiki.modxcms.com/index.php/Beginner%27s_Guide_to_MODx

Good luck!

Kudos to everyone for the fantastic share. Noob like me can take advantage to upgrade my skill sets.

Hi labanino,

Thanks for the links they have been really useful.

Although, I have still having a problem and wonder if you or anyone else can help?

If you look at the HTML I pasted below I have set DIVS to contain content next to each other in one page. I want each document created within MODX to output as the HTML below. But I’m having trouble achieving this.

------------------------------------------------------------------------------------------------------------------------------------------------

<div class="post col2"><a href="portpage.html" target="_self"><img src="assets/img/2-col-sec.gif" width="363" height="255" border="0"/></a>
<div class="postsnip"><p class="sniptxt">Here’s more of a description of what we have <a href="#">going</a> on here. Much more.<p></div></div>

<div class="post col1"><a href="portpage.html" target="_self"><img src="assets/img/1-col-sec.gif" width="174" height="120" border="0"/></a>
<div class="postsnip"><p class="sniptxt">Here’s more of a description of what we have <a href="#">going</a> on here.<p></div></div>

------------------------------------------------------------------------------------------------------------------------------------------------

Hope this makes sense

Tej

Hi Tej! MODx is a CMS, it looks like you have a css issue. Actually you don’t say what kind of problems you are having, also you sent the html but no the css that is the one doing the trick. Anyways, read this post:http://modxcms.com/forums/index.php/topic,56649.msg326426.html#msg326426 and if you still have problems write back and I’ll help you.

Hi labanino

Thank for you reply

I don’t think it is a css issue and I also think I’ve not explained my problem clearly.

I have set up my HTML and CSS to layout my site as I desire. My problem lies in figuring out how to link the DIVS I use to contain content i.e. image and additional text to the MODX resources used to create a document.

I basically I want each new document I create in MODX to create a new DIVS with an image and additional text. Similar to a blog post, each post keeps the same style/layout features set in the CSS and HTML.

This may not be the right way about doing this and I’m happy for any suggestions that will help me find a soltuion.

I have attached the HTML and CSS files for you to have a look at.

Thanks

you can use the getResources-snippet to print-out the divs from your resources.

Hi Bruno17

Could you show me an example of this in relation to my problem?

Thanks

doku is here:
http://rtfm.modx.com/display/ADDON/getResources

try’nd err by yourself!

if you still have probs you can post again what you have tried.