How do the templates work?

[Pekka]

This is mainly for template designers.

Templates in EE 2 are quite simple: EE 2 provides page content without any other xhtml code than links and form items as php variables and you print them out in template page mixing html or xhtml and php to create pages for browsers.

CSS is linked or embedded (your choice). Embedded layout templates are moved to body section when page is rendered (for validator compliance).

A VERY IMPORTANT NOTICE:
Because templates can use any scripting language, as a security measure do not use templates received from unknown sites/persons without knowing exactly what they do.

EE 2 provides templates for maximum separation of content and presentation, but you can choose to use them in any way you like. Templates available are:

Global Color Stylesheet
Global Font Stylesheet
Global Stylesheet

Index Content template
Index Layout stylesheet

Photo Content template
Photo Content template for photo page slideshow
Photo Content template for unavailable photo page
Photo Layout stylesheet

Exhibition Browser Content template
Exhibition Browser Layout stylesheet

Sitemap Content template
Sitemap Layout stylesheet

News Content template
News Layout stylesheet

Comments Content template
Comments Layout stylesheet

EE Commerce Content template
EE Commerce Layout stylesheet

Guestbook Content template
Guestbook Layout stylesheet

Gear Content template
Gear Layout stylesheet

Embedded group listing in index: Content template
Embedded group listing in index: Layout stylesheet

Embedded exhibition listing in index: Content template
Embedded exhibition listing in index: Layout stylesheet

Embedded comment item: Content template
Embedded comment item: Layout stylesheet

Embedded guestbook item: Content template
Embedded comment item: Layout stylesheet

Embedded camera item: Content template
Embedded camera item: Layout stylesheet

Embedded lens item: Content template
Embedded lens item: Layout stylesheet

Embedded accessory item: Content template
Embedded accessory item: Layout stylesheet

Embedded rating item: Content template
Embedded rating item: Layout stylesheet

Embedded news item: Content template
Embedded news item: Layout stylesheet

Embedded news excerpt: Content template
Embedded news excerpt: Layout stylesheet

Comment input form: Content template
Comment input form: Layout stylesheet

Guestbook input form: Content template
Guestbook input form: Layout stylesheet

Login input form: Content template
Login input form: Layout stylesheet

Custom A content : Content template

Please note that default template is an "overkill", its goal is to have every item and item group in divs for maximum layout flexibility - you may design much simpler if required. All contributions are welcome.

In simplest form you can use

Global Stylesheet for all CSS
"Content template" templates for page layouts.

In default EE 2.0 style "Gray XHTML" all above are used so that

Global Color Stylesheet holds all color CSS
Global Font Stylesheet holds all font family and size CSS
Global Stylesheet holds header and footer CSS plus few common items
Content templates hold individual page's semantic layouts
Layout stylesheets hold CSS positioning data for respective content pages

This means, with default style:
You can change fonts without affecting anything else
You can change colors without affecting anything else
You can change layout without affecting content.

[Pekka]

In many parts of code I have added CSS classes so that it is possible to give declarations for items like forms and links. You do not have to use them, they are there for convinience. All those internal classes are named ee_css_xxxxxx, e.g.:

ee_css_hyperlink
ee_css_select_exhibition_and_group
ee_css_select_exhibition
ee_css_select_group
ee_css_select_link
ee_css_select_sort_field
ee_css_select_sort_direction
ee_css_select_perpage
ee_css_select_category
ee_css_select_output
ee_css_select_page_dropdown
ee_css_navigation_microthumb_current
ee_css_navigation_microthumb_current_link
ee_css_navigation_microthumb_previous
ee_css_navigation_microthumb_previous_link
ee_css_navigation_microthumb_next
ee_css_navigation_microthumb_next_link
ee_css_slideshow_button_on
ee_css_sitemap_id
ee_css_sitemap_class
ee_css_sitemap_index_li
ee_css_sitemap_index_link
ee_css_sitemap_exhibition_li
ee_css_sitemap_exhibition_link
ee_css_sitemap_group_li
ee_css_sitemap_group_link
ee_css_sitemap_link_li
ee_css_sitemap_link_link
ee_css_sitemap_ul
ee_css_thumb
ee_css_thumb_link
ee_css_comment_select_sort_direction
ee_css_comment_select_perpage
ee_css_comment_input_name
ee_css_comment_input_email
ee_css_comment_input_homepage
ee_css_comment_input_country
ee_css_comment_input_textarea
ee_css_rating_cell
ee_css_group_route_link
ee_css_guestbook_select_sort_direction
ee_css_guestbook_select_perpage
ee_css_guestbook_select_page_dropdown
ee_css_comment_input_name
ee_css_guestbook_input_name
ee_css_guestbook_input_email
ee_css_guestbook_input_homepage
ee_css_guestbook_input_country
ee_css_guestbook_input_textarea
ee_css_select_search_field
ee_css_select_keyword_list
ee_css_select_keyword
ee_css_keyword_input
ee_css_submit_search
ee_css_reset_search
ee_css_sitemap_photolink
ee_css_ouputstyle_thumb
ee_css_ouputstyle_microthumb_link
ee_css_ouputstyle_thumb_link
ee_css_ouputstyle_microthumb
ee_css_counter_graph_image
ee_css_detaillist_sort_row_highlight
ee_css_detaillist_header_row
ee_css_detaillist_row_even
ee_css_pageselector_previous_image_link
ee_css_pageselector_previous_image
ee_css_pageselector_next_image_link
ee_css_comments_pageselector_previous_image_link
ee_css_comments_pageselector_previous_image
ee_css_comments_pageselector_next_image_link
ee_css_guestbook_pageselector_previous_image_link
ee_css_guestbook_pageselector_previous_image
ee_css_guestbook_pageselector_next_image_link
ee_css_quicksearch_textarea
ee_css_quicksearch_submit
ee_css_pageselector_next_image
ee_css_comments_pageselector_next_image
ee_css_guestbook_pageselector_next_image

[PrimaPhoto]

I found how to change the header file but when browsing a gallery on viewing a photo the header (my menu) has the shadow, how can I ge this on the main index page?
The gallery can be found at: http://www.primaveraphoto.com/photodbase/index.php

[josdesign]

I found how to change the header file but when browsing a gallery on viewing a photo the header (my menu) has the shadow, how can I ge this on the main index page?
The gallery can be found at: http://www.primaveraphoto.com/photodbase/index.php

do you mean this here: http://www.josdesign.co.at/photos/index.php
i found an workaround! i did a screenshot of the shadow in my photo.php page and uploaded a cropped shadow.gif to /templates/graphs

In the index-template (templates/index/default_XHTML_content.php) i added style="background:url(templates/graphs/simulate_shadow.gif) top left repeat-x;" to the three <td>-Tags in the Middle of the indexsite.

[jeronimo]

Looks like a good solution for the shadow problem. Only you should remove the code for the shadow table from the index template. Now you have a onepixel line inbetween the header and the side sturcture of your site

[josdesign]

Yeah! I tried to comment out (include("./" ."templates/extra_components/vertical_shadow.php"); // shadow) But then my workaround-shadow also is not visible. arrrrggg