Joomla! templates

tutoriel template joomla mobile

 

Do you want to offer a mobile version of your Joomla! website ?

 

Don't search anymore, this tutorial is for you ! You will learn step by step how to make your design compatible with almost mobile peripherics (iPhone, iPad, tablettes, Android, etc ...). A concrete example with the template included in the package, you will see how to play with the Responsive Design in Joomla!

 

 

 

 

 

 

 

 

First you will see a shot description of the techniques and then you will play with the code of a Joomla template to add it your own styles. This way you can adapt it for each resolution. Each step is explained with a detailed example and some CSS code to know how it works.

This package is composed of :

  • A tutoriel PDF of 50 pages with examples and illustrations
  • A Joomla! 2.5 Responsive Design template : the final result that you will get with the tutorial
  • A gabarit for Template Creator to adapt the template structure to your needs with Template Creator CK (used to create the template)

And all this is FREE !

Download the Tutorial adapt your Joomla!  template for mobiles

Table of content :

I.Introduction 6
II.The blah blah of the theory 7
1.The techniques 8
1.1)User agent - PHP 8
1.2)Javascript 8
1.3)Mediaqueries 8
2.Drivers 9
3.How does it work ? 10
3.1)To fix the resizing of the display on Smartphones 10
3.2)Adding conditions of screen size 10
III.Pratical case - tutorial 11
1.Creation of the base template 12
2.Defining the design according to the resolution 15
2.1)5.1) Design with a 758px width 17
2.2)Design with a 524 px width 17
2.3)Design with a 292px width 18
3.Modification of the index.php file 19
4.Creation of the CSS style sheet 20
4.1)7.1) Tablet in portrait mode: 758px 20
4.2)7.1) Tablet in portrait mode: 524px 24
4.3)Mobile in portrait mode: 292px 30
5.Bonus - Adjusting submenus in Maximenu CK 39
6.Bonus 2 - Detection of User-Agent for the Slideshow 47
7.Used extensions 49
7.1)Template Creator CK 49
7.2)Maximenu CK 49
7.3)Slideshow CK 49
8.Resources 50

couvertures_ebook_template

ENGLISH VERSION AVAILABLE !

Now you can get the new documentation on Joomla! 1.5 templates. You can use the eBook to make your own template with HTML and CSS and integrate it into Joomla!. All information needed, technical specifications and codes are written in this book with real example and explanation to help you understand how it works. All this in 160 pages of content.

Moreover, behind the technical documentation you will find a concrete tutorial based on the template "basket_ck" (the template is included in the package). This tutorial will learn how to create this template from A to Z, step by step with HTML and CSS code, and javascript if necessary.

You can download the eBook (english version) : 10 euros

You can download the eBook (french version) : 10 euros

Here an extract of some pages included in the eBook :

Extract 1 : Structure of a template

Extract 2 : The inclusions JDOC

Extract 3 : Conditionnal CSS for Internet Explorer

Extract 4 : Specifications of the template

Extract 5 : The file templateDetails.xml

and now here is the total table of contents from the eBook :

 

I.INITIATION HTML AND CSS

1.What is a template ?

2.The HTML and CSS basis

2.1)HTML or XHTML

2.2)Structure of an HTML page

2.3)HTML tags

2.4)Using CSS

2.5)Forcing behavior in CSS

2.6)Validating code

II.TECHNICAL DOCUMENTATION

1.Structure of a template

1.1)index.php

a)Top of the page

b)HEAD part

c)Part body

d)Entire code

1.2)index.html

1.3)templateDetails.xml

a)Information fields

b)Files to install

c)Languages

d)Positions

e)Parameters

calendar

category

editors

filelist

folderlist

helpsites

hidden

imagelist

languages

list

menu

menuitem

password

radio

section

spacer

sql

text

textarea

timezones

usergroup

1.4)params.ini

1.5)template_Thumbnail.png

1.6)favicon.ico

2.The inclusions JDOC

2.1)Head

2.2)Component

2.3)Message

2.4)Module

a)Loading of a module

b)Loading of several modules

c)Customizing modules

3.Template override

3.1)Component override

3.2)Modules override

3.3)Module chrome

3.4)Plugins override

4.The parameters

5.CSS of Joomla!

5.1)Menu Module

a)List style view

b)Simple list view

c)Horizontal view

d)Vertical view

5.2)Latest news module

5.3)Most popular module

5.4)Login module

5.5)Who's online module

5.6)Advert

5.7)Banner

5.8)Poll

5.9)Vote

5.10)Navigation

5.11)Article

5.12)Article blog

5.13)Contact page

5.14)Category of contact

5.15)Register of contact

5.16)Other sources

6.Internet Explorer compatibility

6.1)Create a compatible architecture

6.2)Conditional CSS for IE

6.3)!important a CSS property rather particular

6.4)Transparency in IE6

6.5)pseudo-class :hover in IE

7.Display conditions and countmodules

7.1)countmodules

7.2)editor mode

7.3)Combination Final

8.Module with rounded corners

8.1)Method 1: one size

8.2)Method 2: Flexible

8.3)Method 3: Multi-sizes

9.CSS Class Suffix

9.1)Module suffix

9.2)Suffix page

9.3)Advanced Mode

10.Languages

10.1)Inserting translatable terms

10.2)Language LTR or RTL

11.Inclusion of mootools

12.Converting a 1.0 template to 1.5

12.1)templateDetails.xml

12.2)index.php

13.Development Tools

13.1)Webdeveloper

13.2)Firebug

13.3)Colorzilla

13.4)JSview

13.5)Wampserver

13.6)IEtester

13.7)Notepad++

III.TUTORIAL OF TEMPLATE "BASKET_CK"

1.Specifications

2.Getting Started

2.1)Editor

2.2)Local server

2.3)Firefox and its extensions

2.4)IEtester

2.5)Graphics software

2.6)The bases of language

2.7)Installation of joomla!

3.Let start...

4.Establishment

5.index.html

6.params.ini

7.index.php

7.1)Banner, logo and search

7.2)Top menu

7.3)3 modules with variable width

7.4)Main columns: left, center and right

7.5)Bottom of the page - footer

8.templateDetails.xml

9.Putting some CSS

9.1)General parameters

9.2)Main containers

9.3)Central columns: left, center and right

a)Menu module

b)Bicolor title for modules

c)Rounded corners module

9.4)News modules "userstop"

9.5)Topmenu dropdown

a)Dropdown with CSS

b)Make it compatible with Internet Explorer

c)Final code

9.6)Login module

9.7)Body of the page

a)Articles

b)Article or category list

c)Contact form

9.8)Footer

9.9)Search module

9.10)Poll module

10.PNG transparency with IE6

11.Final step : installable package

12.Bonus – Adding a module position

IV.APPENDIX

1.Template override, the file contents pagination.php

2.Usual positions

3.appendix : CSS joomla!

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