Joomla 4 templates book guide

Learn how to make your own Joomla 4 template with this guide. The book includes a discover of the basis for the HTML and CSS method to use, then you will get all needed informations about the Joomla 4 template in the technical documentation and you will get a step by step tutorial to show you how to create a nice template.

The package contains the following :

  • The basis of templating, HTML / CSS
  • The technical documentation which explains all the features of the Joomla 4 template
  • A step by step tutorial to create a template
  • the complete template in a ZIP file
  • The PDF of the book in English and French language

 

If you want you can have a look at the demo template

Click here to see the 1870j4 template demo

 

I want to get the Joomla 4 templates guide, you can download it here. The price of the package (including the book in PDF format and the demo template) is 16 € (excl. VAT).

 

Download the Joomla 4 template book

 

 

If you have any question or something to report, you can use the forum :

https://forum.joomlack.fr/index.php/divers-miscellaneous/17983-joomla-4-templates-book-livre

 

 

If you want more informations, you can have a look at the content table :

 

 

Introduction to the Joomla template ......................................................................................... 9
A. What is a template? ..................................................................................................... 10
B. Why make my template myself? .................................................................................. 12
C. How a Joomla template works ..................................................................................... 13
HTML and CSS – The basics ...................................................................................................... 15
A. HTML and CSS basics .................................................................................................... 16
1. Set HTML ............................................................................................................................... 16
2. Base code of an HTML page .................................................................................................. 17
3. Basic HTML tags ..................................................................................................................... 17
4. HTML 5 tags ........................................................................................................................... 19
5. The box model ....................................................................................................................... 20
6. Use CSS .................................................................................................................................. 24
7. It's !important ........................................................................................................................ 25
8. Align blocks ............................................................................................................................ 26
9. CSS selectors .......................................................................................................................... 31
B. Some CSS variables ....................................................................................................... 35
C. Media queries ............................................................................................................... 36
1. List of @media values ........................................................................................................... 37
2. Conditions .............................................................................................................................. 38
3. Features ................................................................................................................................. 40
D. Code Validation ............................................................................................................ 40
E. Conclusion .................................................................................................................... 41
The Joomla 4 template - Documentation ................................................................................ 42
A. File architecture ........................................................................................................... 43
1. index.php ............................................................................................................................... 44
2. templateDetails.xml .............................................................................................................. 49
3. index.html .............................................................................................................................. 53
4. template_thumbnail.png ...................................................................................................... 54
5. template_preview.png .......................................................................................................... 54
B. <jdoc:include /> calls .................................................................................................... 55
1. type="metas" ......................................................................................................................... 55
2. type="styles" ......................................................................................................................... 56
3. type="scripts" ........................................................................................................................ 56
4. type="component" ................................................................................................................ 57
5. type="message" .................................................................................................................... 57
6. type="debug" ........................................................................................................................ 57
7. type="module" ...................................................................................................................... 58
8. type="modules" ..................................................................................................................... 58
C. Template Override ....................................................................................................... 62
1. Component override ............................................................................................................. 62
2. Plugin override ...................................................................................................................... 63
3. Module override .................................................................................................................... 63
4. Layout override ..................................................................................................................... 64
5. Override from the Joomla interface ...................................................................................... 64
6. Module Chrome: displaying modules .................................................................................... 66
D. Layout override – Alternative layout ........................................................................... 71
1. Alternative layout of modules ............................................................................................... 71
2. Alternative layout of components......................................................................................... 73
3. Alternative layout of menu links ........................................................................................... 75
E. Administrative settings ................................................................................................ 77
1. The Showon attribute ............................................................................................................ 79
F. Display conditions and countModules ......................................................................... 80
1. Using countModules .............................................................................................................. 80
2. Content or not content? ........................................................................................................ 80
3. Arithmetic operators ............................................................................................................. 81
4. Front edition – wide screen ................................................................................................... 82
G. CSS class suffixes .......................................................................................................... 84
1. Module suffix ......................................................................................................................... 84
2. Page suffix ............................................................................................................................. 85
H. Multilinguals and internationalization ......................................................................... 87
1. Translate an expression ......................................................................................................... 87
2. Translating administrative settings ....................................................................................... 89
3. Translation of module positions ............................................................................................ 90
4. LTR or RTL .............................................................................................................................. 92
I. The Web Assets Manager ............................................................................................. 93
1. The joomla.asset.json file ...................................................................................................... 94
2. Load a style sheet .................................................................................................................. 96
3. Load a script .......................................................................................................................... 97
4. Use a preset ........................................................................................................................... 98
5. Upload a script/style online .................................................................................................. 99
6. Other functions ..................................................................................................................... 99
J. Libraries: jQuery, Bootstrap... .................................................................................... 100
1. Load jQuery ......................................................................................................................... 101
2. Load Bootstrap .................................................................................................................... 101
1. Load FontAwesome ............................................................................................................. 101
K. Preview module positions .......................................................................................... 102
L. Hide main content on the home page ....................................................................... 103
M. editor.css: Custom styles for the editor .................................................................. 104
1. Customize rendering ........................................................................................................... 105
2. Customize the list of styles .................................................................................................. 106
3. Load everything from template.css ..................................................................................... 108
N. Customize the favicon ................................................................................................ 108
The step-by-step tutorial ........................................................................................................ 110
A. What we want to achieve .......................................................................................... 111
B. Preparation ................................................................................................................. 113
C. Go to work! ................................................................................................................. 114
1. The installable base ............................................................................................................. 114
2. The index.php basis ............................................................................................................. 117
3. The CSS classes of the body ................................................................................................. 118
4. Load template.css ................................................................................................................ 119
5. Basic CSS .............................................................................................................................. 121
6. CSS for Joomla 4 .................................................................................................................. 123
7. Load a Google font .............................................................................................................. 124
8. Charger Font Awesome ....................................................................................................... 125
9. Logo and horizontal menu ................................................................................................... 126
10. Row of 2 modules ............................................................................................................ 131
11. Add a Read more button ................................................................................................. 134
12. Add an animated background ......................................................................................... 135
13. Row of 3 adaptable modules ........................................................................................... 136
14. Main content ................................................................................................................... 141
15. Footer .............................................................................................................................. 144
D. Responsive – mobile adaptation ................................................................................ 150
1. Creating the media queries ................................................................................................. 153
2. Mobile menu – hamburger icon .......................................................................................... 153
3. Search module ..................................................................................................................... 155
E. The component.php file ............................................................................................. 157
F. The error.php file ....................................................................................................... 159
G. The offline.php file ..................................................................................................... 164
H. Finalization ................................................................................................................. 171
1. Preview images .................................................................................................................... 171
2. Language files ...................................................................................................................... 172
3. The XML file ......................................................................................................................... 173
I. Add parameters .......................................................................................................... 175
The Appendices ...................................................................................................................... 178
Appendix 1: List of template variables ................................................................................... 179

 

Newsletter

Fast and powerful creation, customizable and responsive.

Read More

Favorites extensions

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449

Save
Cookies user prefences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline