Creating New Themes for Joomla

To create a new theme for joomla, you should create a new folder with your theme name and the directory should contain the following,

 

index.php

templateDetails.xml

css->template.css

images->blank.jpg

js->main.js

 

Note: First of all these are basic files that need to be in the template. The css,js and jpg files may be empty or may contain some elements/codes. These files are included for the future modifications in the theme and improvements.

Other two files are important.

Copy and paste the below code in index.php

 


 

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”css/template.css” type=”text/css” />
<script src=”js/main.js” type=”text/javascript”></script>
</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’>

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

 


 

Copy the below code and paste it in the templateDetails.xml file

 


 

<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE install PUBLIC “-//Joomla! 2.5//DTD template 1.0//EN” “http://www.joomla.org/xml/dtd/2.5/template-install.dtd“>
<extension version=”3.0″ type=”template” client=”site”>
<name>your_template_name</name>
<version>1.0</version>
<creationDate>Date_Created</creationDate>
<author>Author Name</author>
<authorEmail>Author Email ID</authorEmail>
<copyright>Copyright (C) 2014</copyright>
<description></description>
<files>
<filename>index.php</filename>
<folder>css</folder>
<folder>js</folder>
<folder>images</folder>
</files>
<positions>
<position>debug</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
<position>position-4</position>
<position>position-5</position>
<position>position-6</position>
<position>position-7</position>
<position>position-8</position>
<position>position-9</position>
<position>position-10</position>
<position>position-11</position>
<position>position-12</position>
<position>position-13</position>
<position>position-14</position>
</positions>
<config>
</config>
</extension>

 


 

Now the basic template is complete. If you want to improve it, you can add code to css and js files.

 

Installation of Template:

  • After completing, zip the folder.
  •  Go to the administrator panel and go to extension->extension manager->Upload new template.
  •  Browse the zip file and click on “upload and install” button. This will install the new template.

 

Applying the new Template:

To apply your go to extension->template manager and then select the checkbox corresponding to your template and click on set default button.

 

 

Error: Jinstaller: Install cannot find the XML setup file

Inference: This means either there must be some error with the xml file or the directory hierarchy.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s