Abortion Clinic in Germiston +27791653574 WhatsApp Abortion Clinic Services i...
crtical points for customizing Joomla templates
1.
2. Template File Components
Within the directory of a template, there are two key files:
/element/templateDetails.xml
/element/index.php
This is an XML-format metadata file that tells Joomla what other
files are needed when it loads a web page that uses this
template.
index.php - This file is the most important in a Joomla template. It
lays out the site and tells the Joomla CMS where to put the
different components and modules. It is a combination of PHP
and HTML.
4. Main components of index.php
• <?php echo $this->language; ?>
--pulls the language from the site's language setting in
Global Configuration.
• $app = Jfactory::getApplication();
--A variable that allows you to grab various parameters,
like the name of the site and use them in the template.
5. More header Info.
<jdoc:include type="head" />
--includes more header information
Some codes inside HEAD section :
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/<?php
echo $this->template ?>/css/template.css" type="text/css" />
6. More HEAD Info …
<?php echo $this->template ?>
returns the name of the current template.
7. Browser Detection
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template
?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
-- following code detects and adds an additional CSS
file that targets the quirks of Internet Explorer 6
<link rel="stylesheet“ href="/templates/960TemplateTutorialStep1/css/red.css"
type="text/css" />
8. The <BODY> Tag
<body>
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="debug" />
</body>
The jdoc statement inserts various types of HTML
output
9. CSS Template
There are three main types of web page layouts –
- fixed
- fluid
- jello
10. .class define
Table structure are slower to load so it can be managed with using grid
structures .
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,
.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_12
{
display:inline;
float:left;
position:relative;
margin-left:10px;
margin-right:10px;
}
.grid_11 {
width:860px;
}
11. <div> style for rounded edges.
OPTION="horz" makes the modules appear horizontally. Each module
is output in the cell of a wrapper table
OPTION="xhtml" makes modules appear as simple div elements, with
the title in an H3
OPTION="rounded" makes modules appear in a format that allows, for
example ,stretchable rounded corners
<div class="clear"></div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div>
12. Thank 4 watching
These are the basic things we need to consider in order
to create a joomla site .
