Joomla 4 Cassiopeia template  includes Bootstrap 5.1, and a very basic Bootstrap grid layout with a sidebar and a few module positions.

 Joomla 4 Blank Template - j4starter

This template works with Joomla 4 and is designed to act as a starting point for developers and hobbyists to start building their own custom templates on. I have tried my best to add tons of comments so you know exactly what does what.

ust download the zip and install it with the extension manager. You should then be able to go to the templates/j4starter directory and start making changes.

overview image of the layout of this template j4starter 


The most important part of the template, where you can edit the HTML output and PHP used, can be found in the site_root/templates/j4starter directory.

As of Joomla 4.1, the convention has changed to store all template images, js, css, and scss in the MEDIA folder. This means when you install the template, a new folder under your_site_root/media/templates/site/j4starter will be created. All the template media files your template uses will come from here. So if you need to create/edit the CSS, JS, or images your template uses, do so with the files in the media folder.

The same logic applies to the languages folder. Your site uses the files under site_root/language/en-GB when reading language definitions. If you need to make changes to the language files, you must do it there.

Here's a summary of where to find each file after the template's been installed, and what you might need to edit it for.

  • /joomla
    • /templates
      • /j4starter
        • index.php - contains the HTML output of the template itself, this is where you may add custom HTML/PHP code to your template
        • joomla.asset.json - contains a list of the template assets (scripts, stylesheets), you will need to edit this file if you change the name of your template or add additional files
        • templateDetails.xml - this is where you can add user configurable template style settings (fields), tell Joomla where your files and folders are, and set details like the template title and author information
    • /language
      • /en-GB
        • tpl_j4starter.ini - your templates language files, where it pulls label text and such from
        • tpl_j4starter.sys.ini
    • /media/templates/site/j4starter
      • /css
        • template.min.css - the final output css file used by the template
      • /images - where you place your templates image files
      • /js - where the templates javascript goes
        • template.min.js - the default js file used in the template
      • /scss - where you can edit the stylesheets, with the help of SASS


شارك الموضوع

مواضيع ذات صلة