EXAMPLE:

ATTRIBUTES OF "LAYOUT" TAG

• Type attribute: This attribute specifies types of layout which layout_name.xml file forms. There are 6 basic layout types. The fundamental difference of them is how to arange components of block or "content" tag (the special tag). Following parts will bring to you nearer eyes with 6 layout types.

1. Left-main-right:
   
   
   • "Position" tags in "Content" tag:
   
2. Left-right-main:
   
   
   • "Position" tags in "Content" tag:
   
3. Main-left-right:
   
   
   • "Position" tags in "Content" tag:
   
4. Left-main
5. Main-right
6. Full

• Customization layout: From 6 basic layout types, you can customize to suit your demand. Following example is used for customization layout is Left-Main-Right:

Width of Group left = 220*n

Width of Group right = 220*m

Position" tags in "Content" tag:

• Width attribute: This attribute specifies width of main part (div.yt-main) in block
• Customization Layout width: If you want to do the main part (div.yt-main) in any blocks (e.g.: id of example block is yt-example) bigger than other blocks, you could do like as:

1. Style: #yt-example .yt-main{width:1100px }
2. Add Autosize=”0”
3. Style positions in that block

1. GENERAL DEFINITION:

Layout type:

This is the Type attribute of tag. It rules layout type which layout_name.xml file specifies

Template Width:

This is param of template. It rules width of blocks' main (div.yt-main).

2. METHOD OF FRAMEWORK:

3.  HOW TO USE LAYOUT FILE (layout_name.xml)

Please read in ascending order

4. HOW TO OVERRIDE LAYOUT, OVERRIDE CSS MODULES

5. HOW TO USE FEATURES

Example1:

Case1:



Case2:



Case3:



Case4:

Example 1:

Do you want the width of position in the block is equal?

You will declare tags like as fllowing:



The result is positions: user3, user4, user5, user6 will has width = Layout width / 4. HTML of block spotlight1 is:

Example 2:

Do you want to create some positions in block has specific width and rest of positons are equal width?

You will declare tags like as fllowing:



The result of user3 has width is 400px and user4, user5, user6 has width is (Layout width – 400) / 3. HTML code of spotlight1 like as following:

Example 3: The block example declares "offset":

The user3, user4, user5, user6 has width=(Layout width - 50 )/4. HTML code of spotlight1 like as following:

Example 4: The block example declares "group":

HTML code of footer2 like as following:

Attributes of Position:

• Width attribute: This is width of position.
• Height attribute: This is height of position.
• Type attribute: There're 5 types: modules, component, message, html, feature

1. Module type: The position contains modules which is enable in there.
   
2. Component type: The position contains component which system is calling.
   
3. Message type: The position will show messages of system if it sees specific case.
   
4. HTML type: The position will contain HTML code which is declared. HTML code will be declared in
   
5. Feature type: The content of position will be rendered from function that was declared. Those functions are in yt_template.class.php file on the path: root_site/template/your_template/includes/
   @menu - getMenu()
   @logo - getLogo()
   @linkFooter - getLinkFooter()
   @fontsize - getControlFontSize() 
   @copyright - $this->getCopyright();
   @switch_modes - getSwitchModes()

• Group attribute: This attribute declared which group is of position
• Style attribute: This attribute just only used for position tag which has type="module". It declares style of module in position. Style of module is defined in root_site/template/system/html/modules.php or root_site/template/your_template/html/modules.php.
• Colspan attribute: This attribute just only for positions of and positions of block which declares group. Colspan has two 2 values: 0 and 1. The default value is 0 and it's unnecessary to declare. When colspan="1", width of positon is 100%.
• Column attribute: This attribute use for position of . It has two values: yt_col1 and yt_col2 which correspond to div#yt_col1 and div#yt_col2 in div#content. Usually, div#content is divided two big columns: div#yt_col1 và div#yt_col2. The position will be in the column which it is declared.

Example Image for Document Tree of blocks tag:

The "block"(header1, header2, menu, ...) is ordered from top to bottom of the site with "order" attribute. The width of body of blocks is equal "Template Width"

Blocks' name:

You can declare the same or diffirence names. You must use "content" tag and that is unique "content" tag to used.

Attributes:

• Id attribute: This is id of div html tag. Don't declare coincided id.
• Order attribute: This attribute must be declared. It is used for ordering blocks follow increased arrangement. The ordering to show blocks is from top to bottom site.
• Autosize attribute: This attribute can be declared or not. It has two values: 0 and 1. The default value is "1". The block which can't calculate width of positions automaticlally will declare autosize="0".
• Offset attribute: If you want to calculate width of positions base on general width which is Layout width minus some quantities, you have to declare minus quantities by "offset" attribute.
  E.g.: general width = 1024 – 50 --> declare: offset=”50px”
• showDivTop attribute, showDivBottom attribute:  These are two separate attributes of "content" tag. It has two values: 0 and 1. The default value is "0". Three html div tags is added "div#content" tag and they're used for template which has complicated style.
  

  Example:

  

The "groups" tag has child group tags. They're used for declaring group of positions. The group tag has following attributes:

• Width: This is width of group and used for calculating width of positions in that group.
• Height: This is limited height of group. Usually, group will declare height=""

Declare the group: left, right, main in the file layout_name.xml (your_template/layouts/layout_name.xml) ...

Will have priority in administrator(Administrator/Template Manager/your_template/)

The "Head" tag has two child tags: "stylesheet" and "script". They're used for declaring stylesheet and javascript which you want to add into your template besides available others in Yt Framework.

Example:

• "stylesheet" tag: file .css(style1.css) in the path : root_site/templates/your_template/css/
• "script" tag: file .js(script1.js) in the path: root_site/templates/your_template/js/