Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeTemplate Supporter
Template Supporter

Template Supporter

Friday, 09 September 2011 17:43

Tag "layout"

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
Tagged under
Saturday, 10 September 2011 10:48

Introduction

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"...

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

Tagged under
Saturday, 10 September 2011 11:24

Customize Content block with some special cases

Example1:

Case1:



Case2:



Case3:



Case4:

Tagged under
Saturday, 10 September 2011 11:08

Customize a block with position tag

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
Friday, 09 September 2011 18:18

Tag "position"

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.
Tagged under
Friday, 09 September 2011 17:54

The Tags at Level 1 in the Blocks Tag

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
Friday, 09 September 2011 17:54

Tag "groups", tag "group"

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/)

Tagged under
Friday, 09 September 2011 17:52

Tag "head"

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/
Tagged under

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes