Printable View
Hi.
I'm kinda new to this, and have only done simple html in dreamweaver. But now i got this Contao CMS installed on my server.. And want to get up my custom webdesign on it.. but i got no clue what so ever..
In the admin panel, its says upload template etc.. but yeah..how do i convert my photoshop design, into an template? please help me :)
// Reinf
Well, depending on how fast you learn it will take you somewhere between 1 day and say 1 month get this figured out. That also depends on your design.
Step 1....
Because Dreamweaver is unlikely to generate code that is near enough to the standard Contao code it might be easiest to first build a single page with all the functional elements (menu, content, whatever textual content). Do not worry about how it looks, but get the locations right. (navigation in the header if your design placed it there as well). Keeping that in mind build your basic non-styled website page. You do this by creating a new layout and mark it as the default. Then add modules to it that you can create in the themes part as well. You need at least one navigational module.
Copy the source html that Contao generated when you viewed the finished non-styled page result and safe it somewhere you can use dreamweaver on it. I would use dreamweaver to build your photoshop design into a template if that is all the html you've ever done. You should start editing the html file you saved because this might help in better compatible code after dreamweaver changed the original. Getting this one static html page styled locally on your computer would be step nr 2.
If you have the template done the new stuff starts. You need to get the php parts of the fe_page.tpl file into your template. You will recognize the php parts by the <?php ?> markers. Place them in the correct parts! Please note that you'll need to place the css files and images in the correct (relative/absolute) location to the Contao root directory. You can also change the locations in the html of course. Later on you need to import the css files and remove the references in this template file. That concludes step 3, a big step... It might be a good idea to combine this with step 4, and make one change at a time. Start with the title tag contents?
When the template is altered place it in the ROOT/templates folder. You can now choose that file as the template to use in every layout, or name it fe_page.tpl. Now you can also see if the changes worked out and try to make changes where needed. Step 4 completed :)
Step 5 would to be fine tuning the html and css because some differences in code will have occurred.
Finally you should import the css files you used, and include them into your layout after the import. You must then remove the references to the css files you've imported from them template file. Also you can remove the css files.
What you probably can't get right directly from the start is the differences that came forth from letting Dreamweaver loose on the original html. But you could practice these steps one time with an easy layout that just does some column widths and background colors. Just trying it out and see if it works at all :lol:
The better option is to style everything by hand. It might take longer or not, it depends on how skilled you are and how fats you can learn html and css. ;)
Thanks for a good answer. I will probably fail, but it's worth a try.
http://img830.imageshack.us/img830/2369/nnweb.jpg
This is the template i want to use btw.
hi,
this is the way I normal work, hope it adds something.
1. first i install contao en set up the page layout, so collums and footer settings. and make all needed modules.
2. I put all the modules into the correct part of the site in the page layout module. so in this case for example mod_navigation into, left.
3. Now you have a working site, which is ugly cause there is no css.
4. now I add a css file between the <head> tags, and open that file in an editer like espresso, notepad or contao itself.
5. Open the page in a browser like chrome or mozila, checkup the styles en start writing css!
After this your site is how you want it! (depending on your css skills ;-)
Good luck!