Template Supporter
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.
- Left-main-right:
- "Position" tags in "Content" tag:
- Left-right-main:
- "Position" tags in "Content" tag:
- Main-left-right:
- "Position" tags in "Content" tag:
- Left-main
- Main-right
- 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:
- Style: #yt-example .yt-main{width:1100px }
- Add Autosize=”0”
- Style positions in that block
Tagged under
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:
A website will be separated into blocks from the top to footer. Width of the main block (div.yt-main) is "". Width of positions in block will be calculated to base on that "".
Yt Framework use .xml file (layout_name.xml) to arrange blocks, positions ... by xml tags which Framework rules like as: "block", "position"...
Yt Framework use .xml file (layout_name.xml) to arrange blocks, positions ... by xml tags which Framework rules like as: "block", "position"...
3. HOW TO USE LAYOUT FILE (layout_name.xml)
Please read in ascending order4. HOW TO OVERRIDE LAYOUT, OVERRIDE CSS MODULES
5. HOW TO USE FEATURES
Tagged under
Saturday, 10 September 2011 11:24
Customize Content block with some special cases
Published in
Yt-FrameWork
Example1:
Case1:
Case2:
Case3:
Case4:
Tagged under
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:
Tagged under
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
- Module type: The position contains modules which is enable in there.
- Component type: The position contains component which system is calling.
- Message type: The position will show messages of system if it sees specific case.
- HTML type: The position will contain HTML code which is declared. HTML code will be declared in
- 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.
Tagged under
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:
Tagged under
The "groups" tag has child group tags. They're used for declaring group of positions. The group tag has following attributes:
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/)
- 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/)
Tagged under
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:
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/
Tagged under
