Showing posts with label Joomla. Show all posts
Showing posts with label Joomla. Show all posts
Dec 15, 2012
Website content management system – what is it all about?
CMS or the Content management system, in simple words can be explained as PC
software that helps you to amend, alter, make public and maintain the contents from
the central interface end. Initially CMS was designed with the purpose of simplifying
the complex task of writing codes of various versions and to ease up the development
process more flexible and handy. This type of software helps to manage system that
controls and manages the complete content with the help of a workflow procedure
including a collaborative environment.
CMS helps to centralize data edit, publish and modify at the single back end interface.
This web CMS technique is best used to be in charge of active set of web materials that
are made available online such as websites, media files and document.
Different types of CMS
We have three major types of Content Management System (CMS) namely, online
processing, offline processing and hybrid systems. These processes are being used
in the implementation procedure to describe the deployment pattern for Web CMS via
presentation templates that provide a structural content pattern for your web page.
Online processing system is all about implementing templates requisite condition.
Usually a web page HTML is being generated during a visitor’s entry or when the
page is being pulled off from web cache. It is known that most of the open source web
content management system has the capability to support add-ons that offers the
required support including blogs, forums, web stores, etc. It’s being referred to as add-
ons, widgets, modules, or extensions with open source of paid license model.
Offline processing system is something that is also termed as static site generators.
Pre-process all the content by implementing the right templates ahead of issuing to
generate your web pages. As pre-processing system does not call for server to make
use of the templates at the right time, they subsist as design-time tools.
Hybrid systems
There are systems where both online and offline techniques are being implemented.
Some systems write their exec codes to move on with dynamic HTML condition where
CMS is not deployed on all servers. While the other types of Hydrid systems are either
offline or online base on the functionality.
Jul 12, 2011
Create A Template In Joomla 1.5 | How to make template in Joomla
So you decided to make your first Joomla template, good idea, Follow the steps below:-
Explanation of Files
index.php - This file specifies the module positions and the path to your CSS stylesheet file. This is the main and important section of your template.
templateDetails.xml - This file provides the information of your new template to joomla.
css/template.css - As the name suggests, it is used to store your style sheets.
After the above steps go to your administrator>template manager, you will find your new created template displayed there. Just make it as default. and follow the next steps.
The files which we created, now we are going to fill them with codes.
The index.php should contain:
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
[/php]
The lines which we wrote now, is used to specify the beginning of HTML output.
Next we will add the head php code of joomla, which adds all the head section like title, meta etc etc to your output.
[php]
<jdoc:include type="head"/>
[/php]
Now we will add the body.
[php]
<body>
<jdoc:include type="component" />
</body>
</html>
[/php]
The
[php]<jdoc:include type="component" >[/php]
is used to display the main component or content of each page
After the above steps, lets have a look to our new template, so save the file and check your website in browser, to how it looks.
The above output is just displaying articles with no modules and css, so lets add them.
Open your index.php file and add the following code to body section
[php]
<div id="container">
<div id="header"> <jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left"> <jdoc:include type="modules" name="left" /> </div>
<div id="content"> <jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div>
<div id="footer"> <jdoc:include type="modules" name="footer" /> </div>
</div>
[/php]
The jdoc:include type="modules" name="left" is used to include module with a left position.
So after the above step, the final index.php should contain the following code:
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
</head>
<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left"><jdoc:include type="modules" name="left" /></div>
<div id="content"><jdoc:include type="component" ></div>
<div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" />
</div>
<div id="footer"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>
[/php]
Now its time to edit templateDetails.xml file, so open it, add the following code:
[php]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>first_template</name>
<creationDate>07/2011</creationDate>
<author>Webs Tutorial</author>
<authorEmail>ntechi@webstutorial.com</authorEmail>
<authorUrl>http://www.webstutorial.com</authorUrl>
<copyright>WebsTutorial</copyright>
<license>webstutorial.com TOS</license>
<version>1.0.0<version>
<description>First Joomla Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>
[/php]
I think its quite understandable from the above xml code, we have used this file to pass some information to joomla, like author of template, date created, template name, description etc etc.
We have used files and filename tag to declare the files we have used.
Position tag is used to give position to modules. This is the actual place to declare a position for module in joomla.
Now finally give some looks to your template, so in css>template.css file, add the following code
[php]
<?xml version="1.0" encoding="utf-8">
* {
padding: 0;
margin: 0;
}
img {
border: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float {
float: left;
}
.clear {
clear: both;
}
.overall {
background-color: #fff;
}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
background: #FFFFFF;
}
#container {
width:960px;
margin: auto;
background-color: #f4f9fc;
border: 1px solid #e2e2e2;
text-align: left;
}
#header {
text-align: center;
background-color:#f4f9fc;
height: 80px;
}
#content {
width: 598px;
text-align: left;
background-color:#f4f9fc;
padding: 5px;
}
#sidebar_left {
text-align: center;
background-color:#f4f9fc;
width: 165px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#sidebar_right {
background-color:#f4f9fc;
text-align: center;
width: 165px;
border-left: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#footer {
background-color:#f4f9fc;
text-align:center;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
[/php]
So after this edit, save everything and check your website now, it will look something like this:
Your final layout might differ from mine cause of module position.
But you have successfully created your own Joomla template 1.5
Further just edit the css and give an outstanding looks to your template.
- Go to your joomla directory>templates, here create a folder named as first_template(You can keep any name, as per your choice)
- In this new folder, create a file named as "index.php" and one more named as "templateDetails.xml". Then create a folder and named it as "css" and inside this folder make a new file named as "template.css".
You can create these files using a normal text editor like notepad.
- The files and folder which we created are the basic and mandatory files which joomla needs.
Explanation of Files
index.php - This file specifies the module positions and the path to your CSS stylesheet file. This is the main and important section of your template.
templateDetails.xml - This file provides the information of your new template to joomla.
css/template.css - As the name suggests, it is used to store your style sheets.
After the above steps go to your administrator>template manager, you will find your new created template displayed there. Just make it as default. and follow the next steps.
The files which we created, now we are going to fill them with codes.
The index.php should contain:
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
[/php]
The lines which we wrote now, is used to specify the beginning of HTML output.
Next we will add the head php code of joomla, which adds all the head section like title, meta etc etc to your output.
[php]
<jdoc:include type="head"/>
[/php]
Now we will add the body.
[php]
<body>
<jdoc:include type="component" />
</body>
</html>
[/php]
The
[php]<jdoc:include type="component" >[/php]
is used to display the main component or content of each page
After the above steps, lets have a look to our new template, so save the file and check your website in browser, to how it looks.
The above output is just displaying articles with no modules and css, so lets add them.
Open your index.php file and add the following code to body section
[php]
<div id="container">
<div id="header"> <jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left"> <jdoc:include type="modules" name="left" /> </div>
<div id="content"> <jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div>
<div id="footer"> <jdoc:include type="modules" name="footer" /> </div>
</div>
[/php]
The jdoc:include type="modules" name="left" is used to include module with a left position.
So after the above step, the final index.php should contain the following code:
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
</head>
<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left"><jdoc:include type="modules" name="left" /></div>
<div id="content"><jdoc:include type="component" ></div>
<div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" />
</div>
<div id="footer"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>
[/php]
Now its time to edit templateDetails.xml file, so open it, add the following code:
[php]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>first_template</name>
<creationDate>07/2011</creationDate>
<author>Webs Tutorial</author>
<authorEmail>ntechi@webstutorial.com</authorEmail>
<authorUrl>http://www.webstutorial.com</authorUrl>
<copyright>WebsTutorial</copyright>
<license>webstutorial.com TOS</license>
<version>1.0.0<version>
<description>First Joomla Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>
[/php]
I think its quite understandable from the above xml code, we have used this file to pass some information to joomla, like author of template, date created, template name, description etc etc.
We have used files and filename tag to declare the files we have used.
Position tag is used to give position to modules. This is the actual place to declare a position for module in joomla.
Now finally give some looks to your template, so in css>template.css file, add the following code
[php]
<?xml version="1.0" encoding="utf-8">
* {
padding: 0;
margin: 0;
}
img {
border: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float {
float: left;
}
.clear {
clear: both;
}
.overall {
background-color: #fff;
}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
background: #FFFFFF;
}
#container {
width:960px;
margin: auto;
background-color: #f4f9fc;
border: 1px solid #e2e2e2;
text-align: left;
}
#header {
text-align: center;
background-color:#f4f9fc;
height: 80px;
}
#content {
width: 598px;
text-align: left;
background-color:#f4f9fc;
padding: 5px;
}
#sidebar_left {
text-align: center;
background-color:#f4f9fc;
width: 165px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#sidebar_right {
background-color:#f4f9fc;
text-align: center;
width: 165px;
border-left: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#footer {
background-color:#f4f9fc;
text-align:center;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
[/php]
So after this edit, save everything and check your website now, it will look something like this:
Your final layout might differ from mine cause of module position.
But you have successfully created your own Joomla template 1.5
Further just edit the css and give an outstanding looks to your template.
Subscribe to:
Posts
(
Atom
)