How to creat joomla template 3.0 step by step: joomla module positions

How to add module position to joomla 3.0 template as previous tutorial about How to creat joomla template 3.0 step by step: basic template now we will use JDOC joomla document to add joomla position and joomla component area

<jdoc:include type="message" />

This element should only appear once in the <body> element of the Template to render system and error messages that occurred in the request.

CSS styles for system messages can be found in templatessystemcsssystem.css

<jdoc:include type="modules" name="debug" />
<jdoc:include type="modules" name="icon" />
<jdoc:include type="modules" name="left" style="rounded" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="status"  />
<jdoc:include type="modules" name="syndicate" />
<jdoc:include type="modules" name="title" />
<jdoc:include type="modules" name="toolbar" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="user1" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="user4" />

The style attribute

The optional style=”” attribute is available for the module and modules types of <jdoc:include /> statements.

<jdoc:include type="component" />

This element should only appear once in the <body> element of the Template to render the main content of the page with respect to the current page being viewed.

 

Add to your template

Open your index.php file with your editor and add code

YOUR_NEW_TEMPLATE_NAME/INDEX.PHP code

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" href="css/style.css" type="text/css" />

</head>

<body>

<!-- main container -->
<div class='main_container'>

<!-- header -->
<div class='header'>Header</div>

<!-- mid container - includes main content area and right sidebar -->
<div class='mid_container'>

<!-- main content area -->
<div class='main_content_area'>
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
</div>

<!-- right sidebar -->
<div class='right_sidebar'>
<jdoc:include type="modules" name="position-7" style="well" />
</div>

<div style='clear:both;'></div>

</div>

<!-- footer -->
<div class='footer'>
Footer
</div>

</div>

</body>

</html>

Leave a comment