I’m new to EE. Have not built a site under EE yet but have a lot of design and programming experience. I understand the basis behind tags and templates in general, but where I’m being held up is bringing a design into EE. Let me start off by asking what is your process from design to EE?

My assumed EE process would be to design in Photoshop, transfer that to HTML with CSS and all like I would with a regular site, then create the proper templates in EE, copy paste the html code and update with EE tags where necessary.

Having a 3 step process seems overkill, as I could cut out the middle process; but just starting out with EE I think that may help out more with the transition.

Following this EE blog post I see this as my goal when setting up my templates.

And if someone could explain the differences between these 2 methods of uploading a new template and why there is the need to upload the template in 2 separate locations?

Thanks.

How To Install a Template
There are two ways to go about installing ExpressionEngine Templates. I can’t say one method is better than the other simply because it all depends on your current configuration/situation, but I can say that both are equally easy. So, without further babble, here we go! (Just a note: Ocean Mist is being used here as an example. Remember to change things accordingly)

First Method: Create a new blog and import the entire template in one swell foop (that was intentional…).
1. Upload the folder named “ocean_mist” to your “/root/themes/site_themes/” folder (ignore the tpl folder for now).
2. Create a new weblog in your Admin panel. Set up the blog as you normally would, with the exception of the templates.
3. In the template section of creating a new blog, select “use one of the default themes” and pick “ocean_mist” from the drop down box.
4. Still in the template section of creating a new blog, be sure you select “Include RSS Templates.”
5. Next, enter a template group name like “myblog” or whatever you wish to name the group.
6, Finally, click “Submit.” Your blog will be created and all of the page templates will be imported and linked automagically.

Second Method: Import the individual .tpl files.
1. Upload the folder named “ocean_mist” to your “/root/themes/site_themes/” folder and upload the contents of the “tpl” folder to your “/root/system/templates/” folder.
2. Create a new template group that you would like to use Ocean Mist in.
3. Select the new template group that you just made and click on “New Template.”
4. Type in “about” for the template name and then select “use a template from your library.” Use the drop down to find the “about” template and select it. Leave the template type as “web page.”
5. Click “Submit.”
6. Repeat steps 4 and 5 for every template. Remember to type the name of the template exactly as it is in the template file, without the .tpl extension. The remaining templates should all be “web page” types with the exception of “site_css.” This should be set as a “CSS Stylesheet.”

ChrisRM - 14 December 2008 04:43 PM

My assumed EE process would be to design in Photoshop, transfer that to HTML with CSS and all like I would with a regular site, then create the proper templates in EE, copy paste the html code and update with EE tags where necessary.

That’s the way I do it. I approach it the same way I would if I was making a site with PHP includes. Use a static .html file for working on the HTML/CSS and testing in various browsers, then split it up into the relevant includes/embeds and then create templates to pull in those embeds and information from weblogs.

I avoid design (sorry, not a designer gene) but usually find it much easier to take a Photoshop page layout, break it into regions of XHTML and CSS which go into templates, then {embed} templates to re-create the pages. Works great. Easily modified.

I do those 3 steps whether i’m using EE, Movable Type or any other CMS. That way you have full control of your code and fully understand what’s going on with the output and structure.