Archives

How to convert PSD into Joomla Template

Joomla Comments Off on How to convert PSD into Joomla Template

Hire Joomla Developer Hire Joomla Designer

Joomla CustomizationWelcome to Joomla!, a leading open source Content Management System (CMS) platform. Joomla! is a well-tested, extensible and effective tool supported by a very active and friendly community of developers and users.

To convert PSD in Joomla Template you need to create XHTML/CSS from PSD then you need to integrate that design in you joomla template.

Our expert Joomla designer can directly integrate PSD into Joomla template.  To Convert HTML into Joomla Template you need  to follow below steps

  • Setup Joomla Directory Structure
    Create New folder for your template in template folder in Joomla with index.php file and templateDetails.xml
  • mynewtemplate/
    • css/
      • style.css
    • images/
    • index.php
    • component.php
    • templateDetails.xml
  • Create Basic templateDetails.xml file
    The templateDetails.xml file is essential. Without it, your template won’t be seen by Joomla!. The file holds key “metadata” about the template. Here is sample file
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0
//EN" "http://www.joomla.org/xml/dtd/1.5/template-install
.dtd">
<install version="1.5" type="template">

        <name>mynewtemplate</name>
        <creationDate>2008-05-01</creationDate>
        <author>John Doe</author>
        <authorEmail>john@example.com</authorEmail>
        <authorUrl>http://www.example.com</authorUrl>
        <copyright>John Doe 2008</copyright>
        <license>GNU/GPL</license>
        <version>1.0.2</version>
        <description>My New Template</description>
        <files>
                <filename>index.php</filename>
                <filename>component.php</filename>
                <filename>templateDetails.xml</filename>
                <filename>template_thumbnail.png</filename>
                <filename>images/background.png</filename>
                <filename>css/style.css</filename>
        </files>
        <positions>
                <position>breadcrumb</position>
                <position>left</position>
                <position>right</position>
                <position>top</position>
                <position>user1</position>
                <position>user2</position>
                <position>user3</position>
                <position>user4</position>
                <position>footer</position>
        </positions>
</install>
  • Creating Basic index.php file
    The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place PHP code where the content of your site should go. Here is the bare-bones code ready for you to cut and paste.

Lets start at the top:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >

The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.

Now the header for real:

<head>
<jdoc:include type="head" />
<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/style.css"
type="text/css" />
</head>

The first line gets Joomla to put the correct header information in. This includes the page title, meta information as well as system JavaScript. The rest creates links to two system style sheets and to your own style sheet (if it’s named style.css and is located in the css folder).
Now for the main body:

<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

Amazingly, this will suffice! Yes, its a very basic layout, but it will do the job. Everything else will be done by Joomla!. Note: you will need to ensure your menu is set to go into the “top” Module Position.

Finish it off – one last bit:

</html>

Full template source code:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/mynewtemplate/css/style.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>
  • Package Joomla Template for Installation

Hire Our Joomla Expert developer/ Designer for complex PSD to Joomla template conversion or HTML to Joomla Template Conversion.

Tags: Hire Joomla developer, Hire Joomla Designer, PSD to Joomla Conversion, PSD to Joomla Template Conversion, Joomla Expert, HTML to Joomla, Joomla web Design, PSD to XHTML