html/css to Contao templates

[pagou]

hello

Am a graphic designer, and normally i design static html/css sites, but i need a stable cms -obvious WP is not the answer- that will allow me to develop sites faster.
From what i had read and the videos i saw, Contao its very close to what i want, so i decide to convert a html/css site to Contao templates, to see if fits to me.

What i want to ask if there is any good tutorial in English,to understand the convestation proccess.

thanks for your time

[Medianomaly]

I'm not aware of there being a complete, step-by-step tutorial for what you're looking for.

A big reason for that is this -- to really take full advantage, you have to get used to the notion of NOT hand-coding your HTML each time.

If you come from a place where you're used to doing that, or developing in WP where usually you'd start with a static template and plug stuff in where needed, it seems a little inside out. But in the long run it's awesome.

It also seems on the surface to imply that you don't have as much control of your code -- actually not true. It just means you don't have to reinvent the wheel each time.

You do have an "outer shell" template -- kind of like a WordPress template in a way. And you can have as many as you want (but I've never needed more than one). But most of the magic happens in little mini templates -- modular snippets of code that are connected to Contao "modules".

What I would do is start by building a Contao site in the backend -- add your pages, your content, and create your modules for the features you want the site to have. Then add those to your layouts and/or content as needed. It will help you understand how things work, i.e. how HTML is treated and what templates it comes from.

Then I'd take a look at the front-end, see what the generated HTML looks like, and write my CSS off of that. Along the way, if you see any HTML that you want to tweak to your liking, copy the template over and make those changes.

Over time, you'll come to a point where you have a set of "boilerplate" templates that are customized exactly how you want them and you'll rarely need to touch them -- you can just deploy for each project. Instead you can mostly focus on writing CSS to create your designs. Then you'll find ways to streamline your CSS too, for example creating "skeletons" that you can just fill in for each project. If you want to develop sites faster you'd be hard press to find a better solution.

Each template's data is stored in a PHP array. Inside any template, you can get a glimpse of the available data with:

<?php showTemplateVars(); ?>

That'll output a list and you can pick and choose which you want to include in your template.

[xchs]

I totally agree with all what Medianomaly said before.

Inside any template, you can get a glimpse of the available data with:

<?php showTemplateVars(); ?>

That'll output a list and you can pick and choose which you want to include in your template.

However, to output the template variables you have to add the pseudo-variable $this as a reference to the calling object:

<?php $this->showTemplateVars(); ?>

[pagou]

i had no previews experience with cms templating.
from what i had found, Contao has lot of books, but none of them in English.
any good --English-- starting point?

[thyon]

You can read the online website documentation and it's pretty easy to understand. The best option would be to try the demo first, then also of course install it yourself and then try things out.

I would start installing it, setup a 3 page website:
These are the basic steps you will need to follow

• Create a ROOT point in the Site Structure[/*:m:fz22bj0j]
• Setup 4 pages under that ROOT, called SITE (hidden from navigation and unpublished), HOME, BLOG, CONTACT[/*:m:fz22bj0j]
• Then on the SITE page, create 2 x Articles: Header Article and Footer Article[/*:m:fz22bj0j]
• Add the Extension [includes][/*:m:fz22bj0j]
• Create a default Theme[/*:m:fz22bj0j]
• In that Theme create a single css file[/*:m:fz22bj0j]
• Then go back and Create the following 5 x Modules: Navigation Module, Header (Article) Module (point to Header Article), Footer (Article) Module (point to Footer Article), News List (for latest stories), News Archive, News Menu[/*:m:fz22bj0j]
• Then Create a new Default Layout, set your Header, Footer, Right column up, select the CSS file you created, in the modules section put the Header Module in the HEADER, Footer Module in the FOOTER and Articles in the MAIN section, and Blog List (latest) Module in the RIGHT Section.[/*:m:fz22bj0j]
• Copy the layout above and call it Blog Layout for the Blog page and then modify the layouts to have Blog Archive (instead of Articles) in the Main and Blog Archive Menu in the RIGHT (instead of Blog List).[/*:m:fz22bj0j]
• Go to Site Structure and then edit the ROOT point page and assign the Default Layout to the ROOT point[/*:m:fz22bj0j]
• Edit the Blog Page and assign the Blog layouts to that page[/*:m:fz22bj0j]
• Once you have that setup, you can now add content to the Header Article, Footer Article[/*:m:fz22bj0j]
• Edit the Articles in Home, Blog, Contact to show at least a headline with some text (lorem ipsum stuff)[/*:m:fz22bj0j]
• Now you can go through the pages in the front end preview to see what you've done. You will see that the blog page article is completely ignored (since we don't have that in the layout at all). This will help you understand how layout, css and other parts work together.[/*:m:fz22bj0j]
• You can now add some CSS using the editor to add color/margins/controls [/*:m:fz22bj0j]

After having setup many websites, after I click install, I don't use ANY FTP programs to add files, images or other content to the site, I completely user Contao for all that, CSS, templates, everything. Only when I have to add code, or develop something, do I actually need to FTP. I do everything in Contao.

Best is to play with release 3.x because it's a major departure for the core (all for the better).