How to Convert a HTML Template into Joomla!

Save

Joomla! is an open-source CMS, or content management system, that allows you to publish websites. Besides posting content to your website, it also allows you to design your website using a template. A template is a set format that creates the layout of a website. Joomla! offers many templates for you to use, but if you have designed your own template using HTML or are switching your website to Joomla! but want to keep your HTML layout, you can install it in Joomla! after making small changes in your HTML template's coding.

Things You'll Need

  • ZIP compressor
  • Word processor
  • Save the HTML for the template and any other files associated with it, including any images and CSS files, in one folder.

  • Open the HTML file in a word processor.

  • Search for index.html in the file. You can search by pressing "Control" and "F." Replace it with index.php.

  • Type the name of your template where it says your_template_name in the HTML coding. Also switch your_CSS_directory to the name of your CSS directory and your_CSS_file.css to the name of the CSS file associated with the template.

  • Enter the position for each module—each box or section on the template—into the coding. The code for this is as follows:

    <div id="header_r">
    <div id="logo"></div>
    <jdoc:include type="modules" name="top" />
    </div>
    <jdoc:include type="component" />

  • Enter the coding for a manifest file. The manifest file includes all the files associated with your template—if you do not include all of them, the template will not work. The code is as follows:

    <?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&quot;>
    <install version="1.5" type="template">
    <name>your_template_name</name>
    <creationDate>19/12/2009</creationDate>
    <author>your</author>
    <authorEmail>your email address</authorEmail>
    <authorUrl>your URL</authorUrl>
    <copyright></copyright>
    <license>GNU/GPL</license>
    <version>1.0.0</version>
    <description>a description of your template</description>
    <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>images/arrow.png</filename>
    <filename>images/logo.png</filename>
    <filename>css/template.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>
    <position>debug</position>
    <position>syndicate</position>
    </positions>
    </install>

  • Open an image of your template and take a screenshot of it. You can take a screenshot on Windows by pressing the "PrtScSysRq" key and on Macs by pressing "Command," "Shift" and "3" simultaneously.

  • Open the screenshot in an image editing program. Resize the screenshot so it is 206 pixels by 150 pixels to create a thumbnail. Save the thumbnail to the template folder.

  • Create a ZIP file of the template to install it into Joomla! Popular programs for creating ZIP files are WinZip, 7-Zip and ZipItFree.

  • Log into your Joomla! account.

  • Click Extensions. Select Install/Uninstall from the drop-down menu.

  • Select the ZIP file you created and click "Upload Package File" to upload it to Joomla!

References

Promoted By Zergnet

Comments

Resources

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!