Member Avatar for Member #700441

Hello Daniweb fellows!

I'm looking for a good guide to learn step by step how to convert an HTML/CSS layout with positions to a Joomla 3x Template!

I design web interfaces but now I'd like to learn about this convertion for my future web projects! I don't like free templates...

I look forward to hearing from you!

Thank you all in advance!

Edited by Member #700441
  • 2 Contributors
  • 4 Replies
  • 253 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #700441

Dani AI

Generated

Short, version-specific plan for converting a static HTML/CSS layout into a Joomla 3.x template — a direct follow-up to and 's hint to search. The process is essentially: put your HTML into a template folder, replace static content areas with Joomla jdoc statements, declare module positions in the manifest, and reference assets using Joomla template variables. The official Joomla docs are the canonical reference for the required files and steps. (docs.joomla.org)

Practical workflow (do these in order): audit your layout and map module positions (header, nav, sidebar, footer); create /templates/yourtemplate with folders css/ and images/ and two required files index.php and templateDetails.xml; move your HTML into index.php and replace the head/component/module areas with jdoc includes; declare the module positions in templateDetails.xml; reference CSS/JS using $this->baseurl and $this->template; conditionally render sidebars with $this->countModules('position'). Minimal examples to copy-start:

<?php defined('_JEXEC') or die; ?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<head>
  <jdoc:include type="head" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" />
</head>
<body>
  <jdoc:include type="modules" name="top" style="xhtml" />
  <jdoc:include type="component" />
  <jdoc:include type="modules" name="footer" style="xhtml" />
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
  <name>yourtemplate</name>
  <files>
    <filename>index.php</filename>
    <folder>css</folder>
    <folder>images</folder>
  </files>
  <positions>
    <position>top</position>
    <position>sidebar</position>
    <position>footer</position>
  </positions>
</extension>

See the index file and module-position docs for exact tags and examples. (docs.joomla.org)

Tips/troubleshooting: copy the stock Protostar template to use as a base if you need Bootstrap-compatible scaffolding, or copy Protostar’s structure and replace markup with your HTML. Install your template either by zipping and using Extensions → Install, or upload the folder to /templates and use Extensions → Manage → Discover to register it. Test module counts, responsive breakpoints and JS conflicts (Joomla 3 bundles older Bootstrap/jQuery). (docs.joomla.org)

Important note: Joomla 3.x is now legacy — official support ended and the Extended LTS window has closed (eLTS ran until Feb 17, 2025). For new projects prefer Joomla 4/5+; if you must maintain a J3 site, isolate it, keep strict security controls, and plan a migration. (elts.joomla.org)

Recommended Answers

All 4 Replies

Member Avatar for rtrethewey

Did you try Google? I was able to find several articles that looked promising (including one from Joomla's online documentation) with a single search.

Member Avatar for Member #700441

I did but were for j1. Most of them explain just custom html module. This is not what I'm looking for...

Member Avatar for rtrethewey

In the end, it probably doesn't matter much. You need to start with a good foundation in HTML and CSS, and then simply find a tutorial on creating a template for the version of Joomla that you're using so that you can learn how to customize it.

Member Avatar for Member #700441

I do design in HTML & CSS but I am looking for an actual good guide to convert to joomla 3x.
Any other suggestions from anyone else?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.