Cchost/concepts/Skins - Revision history

Fourstones: /* Compliant Layout */

2008-11-17T16:51:03Z

‎Compliant Layout

Fourstones: /* Compliant Layout */

2008-11-17T16:21:54Z

‎Compliant Layout

Fourstones: /* Compliant Layout */

2008-11-17T16:11:39Z

‎Compliant Layout

Fourstones at 16:09, 17 November 2008

2008-11-17T16:09:43Z

Fourstones: New page: Category:ccHost Category:ccMixter Category:Developer Category:Software Category:Technology {{cchost_head}} {{lowercase}} =Components of Skin= A skin is a composite of ...

2008-11-12T10:38:47Z

New page: Category:ccHost Category:ccMixter Category:Developer Category:Software Category:Technology {{cchost_head}} {{lowercase}} =Components of Skin= A skin is a composite of ...

New page

[[Category:ccHost]]
[[Category:ccMixter]]
[[Category:Developer]]
[[Category:Software]]
[[Category:Technology]]
{{cchost_head}}
{{lowercase}}

=Components of Skin=
A skin is a composite of several template components. The main controlling file for a skin is a ''profile'' file that specifies what the different pieces are. For examples of skin profiles see '''ccskins/shared/profiles'''

{|
|-
|'''Attribute'''
|'''Description'''
|'''Example'''
|-
|skin-file
|The main skin template which initializes any skin specific variables.
|ccskins/commons/skin.tpl
|-
|head-type
|Generates the <nowiki><head></nowiki> section of a page.
|ccskins/shared/head.tpl
|-
|string_profile
|Determines strings to use for forms, prompts, page titles, etc.
|ccskins/shared/strings/audio.php
|-
|list_file
|Template to use for an upload page.
|ccskins/shared/formats/upload_page_wide.php
|-
|list_files
|Template to use for query results.
|ccskins/shared/formats/upload_list_wide.tpl
|-
|form_fields
|Template (macro) to use for laying out single column form fields.
|ccskins/shared/form_fields.tpl/form_fields
|-
|grid_form_fields
|Template (macro) to use for laying out multiple column form fields.
|ccskins/shared/form_fields.tpl/grid_form_fields
|-
|tab_pos
|Template with tab position settings and styling.
|ccskins/shared/layouts/tab_pos_header.php
|-
|box_shape
|Template that controls box shape and styling.
|ccskins/shared/layouts/box_round.php
|-
|page_layout
|CSS template that determines position and size of content area, menus, extras (widgets) and footer.
|ccskins/shared/layouts/layout024.php
|-
|font_scheme
|CSS template that controls font family.
|ccskins/shared/colors/font_verdana.php
|-
|font_size
|CSS template that controls font size.
|ccskins/shared/colors/fontsize_px11.php
|-
|color_scheme
|CSS template that controls color selectors.
|ccskins/shared/colors/color_mono.php
|}

=Create a Skin Profile=
You can create a new Skin Profile composed of existing skin components. To new create a new custom skin profile:
*Log in as admin (if not already)
*Click on ''Manage Site'' then ''Skin'' (or browse to '''admin/skins''')
*Select options in the ''Basic Settings'', ''Layouts'', and ''Color, Font, Text size'' sections.
*Click on ''Save this Skin Profile'' (or browse to '''admin/skins/profile/save''')
*Fill out the form and click the ''Save this Skin Profile'' button.

=Customizing Components=
You can create customized version of the Upload Page and Upload Listing as described in the [[Cchost/How_User_Content_is_Displayed|How User Content is Displayed]] section of this documentation.

You can create customized versions of many of the skin components like color schemes, string profiles and page layouts [[Cchost/admin/config_customize|as described here]]. The other components (like tab_pos, font_scheme, etc.) follow the same model as the components mentioned in that section.

=Customizing skin.tpl and body.tpl=
In order to customize the raw CSS for ''body.tpl'' template you'll need to generate a new skin template based on an existing one.

*Log in as admin (if not already)
*Click on ''Manage Site'', then ''Skin'', then ''Create Skin Template'' (or browse to '''admin/skins/create''')
*Fill out the form
**Select the skin to clone
**Select a target directory (really, this should be '''<local_files>/skins'''
**Enter name (NOTE: Because of a little, er, anomaly in 5.x only use ''lower case'' letters for you name. Trust us.)
*Click on the ''Create a new skin'' button

This process creates a clone of a skin in '''<local_files>/skins''' directory.

In order to get you going, a new Skin Profile file was also created in '''<local_files>/skins/profiles''' and automatically selected as the current profile.

When your skin executes on a page request, the [[cchost/concepts/Templates|template engine]] is initialized with your ''skin.tpl''. This is your chance to initialize any skin specific variables or mappings. (This would be a good time to get a deep understanding of how the template engine [[Cchost/concepts/Templates#Searching_for_Files|finds templates]]. The template engine then executes your ''page.tpl'' which should call ''body.tpl''.

===body.tpl===
''body.tpl'' is responsible for the contents of the <nowiki><body></nowiki> section of the page.

A properly authored body.tpl will respect the expectations of the various Skin Profile attributes. For example the ''tab_pos'' variable which suggests where the navigator tabs are to be positioned. Another example would be keeping to the CSS selectors in the ''color_scheme'' template. Perhaps the most important of these are the position selectors in the ''page_layout'' attribute in order to honor the admin's layout preferences.

The content section of the page is filled by executing the ''macro_names'' array. In order to allow templates to dynamically add items to the end of the content list you should the array_shift function in case the list changes during execution:

if( !empty($A['macro_names'] ) )
while( $macro = array_shift($A['macro_names']) )
$T->Call($macro);

← Older revision		Revision as of 16:51, 17 November 2008
Line 137:		Line 137:

	If you do need your own positioning that isn't one of the pre-canned ones, you should still use the layout above and [[Cchost/admin/config_customize#Page_Layout\|create your own layout]] sytle.		If you do need your own positioning that isn't one of the pre-canned ones, you should still use the layout above and [[Cchost/admin/config_customize#Page_Layout\|create your own layout]] sytle.
		+	==Compliant Color Scheme==
		+	Instead of hard coding colors into your style sheets and templates you should use the following selectors:
		+
		+	.light_bg
		+	.light_border
		+	.light_color
		+	.dark_bg
		+	.dark_border
		+	.dark_color
		+	.med_dark_bg
		+	.med_dark_color
		+	.med_dark_border
		+	.med_bg
		+	.med_color
		+	.med_border
		+	.med_light_bg
		+	.med_light_color
		+	.med_light_border
		+
		+	If you want specific color you should definitely [[Cchost/admin/config_customize#Creating_a_new_color_scheme\|make it into a color scheme]]. See '''ccskins/shared/colors/color_mono.php''' for that looks like.
		+	==Compliant Font Family and Style==
		+	Instead of hard coding font family and sizes into your skin should use leave that to the profile's font settings. If what you're looking for isn't there, you should [[Cchost/admin/config_customize#Creating_font_schemes\|create your own font schemes]].

	==Compliant Navigation Tab Positions==		==Compliant Navigation Tab Positions==

@@ Line 135: / Line 135: @@
    <nowiki><div id="footer"></nowiki>
    <nowiki></div></nowiki>
 ==Compliant Navigation Tab Positions==

@@ Line 125: / Line 125: @@
 Ideally you should maintain the following layout after your header section:
-   <div id="wrapper">
+   <nowiki><div id="wrapper"></nowiki>
-      <div id="content">
+      <nowiki><div id="content"></nowiki>
-      </div>
+      <nowiki></div></nowiki>
-   </div>
+   <nowiki></div></nowiki>
-   <div id="navigation">
+   <nowiki><div id="navigation"></nowiki>
-   </div>
+   <nowiki></div></nowiki>
-   <div id="extras"
+   <nowiki><div id="extras"></nowiki>
-   </div>
+   <nowiki></div></nowiki>
-   <div id="footer">
+   <nowiki><div id="footer"></nowiki>
-   </div>
+   <nowiki></div></nowiki>
 ==Compliant Navigation Tab Positions==

@@ Line 99: / Line 99: @@
 When your skin executes on a page request, the [[cchost/concepts/Templates|template engine]] is initialized with your ''skin.tpl''. This is your chance to initialize any skin specific variables or mappings. (This would be a good time to get a deep understanding of how the template engine [[Cchost/concepts/Templates#Searching_for_Files|finds templates]]. The template engine then executes your ''page.tpl'' which should call ''body.tpl''.
-===body.tpl===
+=Profile Compliant Skinning=
 ''body.tpl'' is responsible for the contents of the <nowiki><body></nowiki> section of the page.
-A properly authored body.tpl will respect the expectations of the various Skin Profile attributes. For example the ''tab_pos'' variable which suggests where the navigator tabs are to be positioned. Another example would be keeping to the CSS selectors in the ''color_scheme'' template. Perhaps the most important of these are the position selectors in the ''page_layout'' attribute in order to honor the admin's layout preferences.
+Before you start hacking at body.tpl you have decide whether your skin will be compliant with the profile settings that an admin can make. In other words, you can easily create a page that does nothing else but display the contents:
-The content section of the page is filled by executing the ''macro_names'' array. In order to allow templates to dynamically add items to the end of the content list you should the array_shift function in case the list changes during execution:
+   <nowiki><?</nowiki>
+       if( !empty($A['macro_names'] ) )
            while( $macro = array_shift($A['macro_names']) )
                $T->Call($macro);