Where to get help on templates?

OK, firstly I am very new to CMS’s and MODx so please bear with me I have searched the site but couldn’t find any answers tha were relevant (and sorry if I missed them)

I have downloaded the admin Guide for TP3 but couldn’t find anything that really helped on the basics of changing the template.

What I would like to try out first is creating something that looks like this http://csszengarden.com/?cssfile=/175/175.css&page=0

The HTML page and CSS are downloadable so I’m hoping that will give me a bit of a head start

Can someone please point me in the right direction.

Cheers
Briggsy

Steps to create a template.

1. Login to the manager.

2. Click on resources.

3. Click on new template.

4. Use a standard html file but add special tags for where the [*content*] and [*pagetitle*] should appear + outher snippets (such as menu builder).

6. Click on System Configuration

7. Go to default template and choose the new template you have created.

8. Check Reset all pages to use Default template to set the template for all of your pages.

This should get you started.
Let me know If you need more help

WOW.. thanks for the fast response and easy steps, you’re a legend

I have uploaded it to my development server and will now start playing, see if I can make sense of it all. Thanks again for your fast response (and to my other post).

Cheers.

Quote from: briggsys at Jul 26, 2005, 11:12 PM

WOW.. thanks for the fast response and easy steps

Your welcome!

you’re a legend

Thanks, but I have to give all the credit to Alex (origional writer of etomite) and Raymond + Ryan (developers of modx and all of its exceptional features).

I have uploaded it to my development server and will now start playing, see if I can make sense of it all. Thanks again for your fast response (and to my other post).
Cheers.

HINT: If you noticed certain tags in the template, (for example [*content*] ) they will be replaced when the page is rendered. Most are in Modx by default but {{description}} needs to be added as a chunk...... (in the resources manager, new chunk, type in the text you want to appear in html and save). Just remember this from the CSS Zen Garden Code

Hi folks... as an occassional commuincator with Dave of Mezzoblue (creator of Zen Garden) I gotta say that it has LOTS of potential to make me really uncomfortable with what’s going on here. Let’s hope that potential doesn’t turn into a material reality.

I definitely appreciate the enthusiasm and am all for great CSS-based sites, though!

Quote from: rthrash at Jul 27, 2005, 03:09 AM

Hi folks... as an occassional commuincator with Dave of Mezzoblue (creator of Zen Garden) I gotta say that it has LOTS of potential to make me really uncomfortable with what’s going on here. Let’s hope that potential doesn’t turn into a material reality.

I definitely appreciate the enthusiasm and am all for great CSS-based sites, though!

I have removed the code now that I found the warning in the CSS file. I was previously unfarmiliar with CSS Zen Gardens Policies as I have only browsed through the library and never downloaded anything prior to this thread. But, I think this should be made a lesson that everything on the internet is not free and we should be thankful that....

MODx is FREE

As per Zen Gardens webpage "The Zen Garden aims to excite, inspire, and encourage participation" and thats exactly what its doing. I’m not wanting to rip off the page, just learn how to make something like that, it needs to be different to suit the website being created.

I do accept your comment though that licenses and copyrights need to be respected, and I ensure you they will be. When you next communicate with Dave, perhaps you can thank him on my behalf for providing such a wonderful range examples.

As MARKSVIRTUALDESK said, thankfully MODx is FREE

Quote from: rthrash at Jul 27, 2005, 03:09 AM

Hi folks... as an occassional commuincator with Dave of Mezzoblue (creator of Zen Garden) I gotta say that it has LOTS of potential to make me really uncomfortable with what’s going on here. Let’s hope that potential doesn’t turn into a material reality.

Ok, So I started from scratch but using what I could understand from the Zen Garden template, however I’m having trouble (due to lack of knowledge) with postioning DIVS and also getting the menubuilder to look right.

Have a look at [REMOVED}, I have the CSS in the html files so you can see what I have done. I have included the body at the bottom so you can see the server side version of this too.

One is no matter what I use to postion the menu builder it never moves from where it is. As you can see from the section below, I set it to 400px from top of the container its nested inside (being HTML)

#Nav
{
position: absolute;
top: 400px;
left: 0;
width: 210px;
}


The other issue is that the links are listed side by side and not under each other, whys this?


<body id="EMINZ">

<div id="html">

<div id="header">
</div>

<div id="nav">
[[MenuBuilder?id=0]]
</div>

<div id="pagetrail">
[[PageTrail]]
</div>

<div id="content">
[*content*]
</div>

<div id="footer">
Document retrieved from [^s^] in [^t^]
</div>

</div>
</body>

One is no matter what I use to postion the menu builder it never moves from where it is.

This is a very common problem and very easy to do. CSS id selectors are case-sensitive so you just need to change #Nav to #nav

The other issue is that the links are listed side by side and not under each other, whys this?

In CSS every element have a display property. There are lots of different display types but the two basics are inline and block. Anchors are inline by default, which basically means that they display side by side within the text instead of in a box of it’s own like a p or a div. Thankfully you can easily override this with the display property. Such as



CSS can be very tricky to learn especially with the many quirks in different browsers. Here are a couple of resources that I found very helpful.

http://www.brainjar.com/css/positioning/
A great CSS positioning guide that really helped me understand the concepts of css positioning.

https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=60
If you aren’t already using it, I highly suggest this Firefox extension. It has too many amazing features to mention here but the Edit CSS feature should be especially helpful to you. It saves you tons of Save/Refresh time.

If you look at the default style.css you will see the style for the " .navigation a " elements. Personally, I prefer to use a list-generating menu snippet; lists are much easier to manage than a block of links.

http://www.alistapart.com/articles/taminglists/

An excellent source of tutorials and articles on site design.