tutoriel template mobile joomla! 2.5_en

7/23/2019 Tutoriel Template Mobile Joomla! 2.5_en

1/52

KEIFLIN Cdric 1 AvrilkApril

http://www.joomlack.fr 212
http://www.joomlack.fr/http://www.joomlack.fr/


2/52




3/52

Thanks

I want to thank everyone who helped and supported me in this project.Thank you all !

Cdric KEIFLI

KEIFLIN Cdric ! AvrilkApril



4/52

y we"sites

http#$$www.joomlack.%r

&ortail 'oomlack with dmos and download o% e(tensions that are developped "y me)and news %rom 'oomlack.

http#$$e(tensions.joomlack.%rListin* and demos o% 'oomla! E(tensions

http#$$tutoriels+joomla.joomlack.%r,ite dedicated to tutorials -in %rench %or 'oomla! with some documentaiton a"out howto make your own 'oomla template

http#$$www.template+creator.comComponent 'oomla that allows you to create your own template

For whom is this document

This tutorial is %or anyone who wants to learn a"out template adaptation %or mo"iles.

/arnin*) this document is not a tutorial a"out C,,) it assumes you have the necessaryknowled*e in the %ield o% 0TL$C,,.

KEIFLIN Cdric " AvrilkApril

http://www.joomlack.fr/http://extensions.joomlack.fr/http://extensions.joomlack.fr/http://extensions.joomlack.fr/http://tutoriels-joomla.joomlack.fr/http://www.template-creator.com/http://www.joomlack.fr/http://www.joomlack.fr/http://extensions.joomlack.fr/http://extensions.joomlack.fr/http://tutoriels-joomla.joomlack.fr/http://www.template-creator.com/http://www.joomlack.fr/


5/52

ABLE CON EN

I.Introduction 6II.The blah blah of the theory 7

1.The techniques 81.12ser a*ent + &0& 31.4'avascript 31.5edia6ueries 3

2.Drivers 93.Ho does it or! " 1#

5.1To %i( the resi7in* o% the display on ,martphones 185.49ddin* conditions o% screen si7e 18

III.$ratical case % tutorial 111.&reation of the base te'(late 122.Definin) the desi)n accordin) to the resolution 1*

4.1:.1 ;esi*n with a 4p( width 13

3.+odification of the inde,.(h( file 19-.&reation of the & style sheet 2#

=.1


6/52

I$trod%ctio$ I$trod%ctio$

I.Introduction

0ere we are a*ain in a new template adventure... This time around) we will "e %ocusin*on mo"ile compati"ility. Indeed more and more people "rowses the Internet "y means o%their mo"ile phone) or smartphone) as well as with ta"lets such as the i&ad.

Can my we" site not "e viewed with mo"iles and laptops ? @% course it can) donAt worry.I% you have no use %or a mo"ile version o% your we"site "ecause no"ody comes on yoursite with their telephone) then leave it as it is! The site is visi"le) e(cept that it isnecessary to scroll hori7ontally and vertically to "e a"le to visuali7e the whole pa*e)makin* it hard to navi*ate. /e are *oin* to optimi7e all o% this to allow the visitor to

view the %ull width o% the we" site on his screen and to "e a"le to access the whole o%the contentes hassle %ree.

;onAt %or*et) i% you have created a we" site) then it is to "e viewed "y someoneso mi*ht as well optimise the viewin* process.

KEIFLIN Cdric & AvrilkApril



7/52

I$trod%ctio$ I$trod%ctio$

II. The "lah "lah o% the theory

KEIFLIN Cdric ' AvrilkApril



8/52

(h) *lah *lah of th) th)or+ (h) t)ch$i,%)-

1. The techniques

Be%ore attackin* the practical work) we are *oin* to have a look at the overview o% thetheory so that you will "etter understand what we are *oin* to do. /e are just *oin* toreview ideas. I% you want to know more a"out it) you can ask oo*le!

1.1) User agent - PHP

The server that accommodates your site can detect the system "ein* used to navi*ateyour we" site. /e can thus use this method) "ut it is necessary to list all the devices-i&hone) i&ad) android) BlackBerry) etc. and write it into the conditions that willmana*e the display.9lthou*h I use this %eature in a module) I donAt think itAs very e%%icient %or themana*ement o% css.

1.2) Javascript

'avascript can also "e used to detect user a*ents) "rowsers) and screen si7es. The mainpro"lem that can arise is i% you have a script mistake on your we" pa*e) the script wonDtwork and everythin* %ails. ,econdly) it wei*hs down the pa*e which could make itdi%%icult to mana*e.

1.3) Mediaqueries

ow we arrive at the interestin* part... whatAs this thin* we call media6ueries ? /e cansay this is a conditional property o% C,,. /e are *oin* to use it in our case to say i% thisscreen is less than 388 p( wide) then load these C,,Ds . Interestin*) isnDt it? /e are*oin* to "e a"le to style our we" site as we want. The only downside is that this recenttechni6ue is not compati"le with the older "rowsers. Thus %or*et the compati"ility withthe older phones. &ersonally) I donAt think itAs a real concern.

KEIFLIN Cdric AvrilkApril



9/52

(h) *lah *lah of th) th)or+ riv)r-

2. Drivers

/e are *oin* to review resolutions to de%ine our conditions to "e inserted intomedia6ueries.

&ortrait display on ,martphonet # 32#(,

Landscape display on ,martphone # 6-#(,

&ortrait display on ta"let # 768(,

Landscape display on ta"let # 1#2-(,

Laptop # 1#2-(,

,ource and ima*e #http#$$line4:.com$tutorials$create+a+responsive+we"+desi*n+with+media+6ueries

/e are *oin* to put into place a %ew conditions to mana*e these di%%erent cases.


http://line25.com/tutorials/create-a-responsive-web-design-with-media-querieshttp://line25.com/tutorials/create-a-responsive-web-design-with-media-querieshttp://www.joomlack.fr/http://line25.com/tutorials/create-a-responsive-web-design-with-media-querieshttp://www.joomlack.fr/


10/52

(h) *lah *lah of th) th)or+ ow do)- it work

3. How does it work ?

To implement media6ueries in a %unctional way) you need 4 thin*s #

3.15 To fi, the resiin) of the dis(lay on 'art(hones

There is a meta ta* called viewport. It de%ines the manner in which displays are resi7edon drivers. ,o) we are *oin* to reset it and prohi"it the mo"ile %rom 7oomin* in too %ar)otherwise we canAt see anythin*. aphael oetter e(plains it like this #

"The main advantage of incorporating this step is to avoid the automatic resizing of thelayout, which renders the contents too small, to fix the width of the mobile and to beable to adapt afterwards ",ource # http#$$www.alsacreations.com$astuce$lire$11


11/52

(h) *lah *lah of th) th)or+ ow do)- it work

III. &ratical case + tutorial

ow that we have overviewed the theory) letAs move on to the pratical. ItAs always moreentertainin* to *et our hands dirty with this little step "y step tutorial.




12/52

3ratical ca-) 4 t%torial Cr)atio$ of th) *a-) t)mplat)

1. Creation of the base template

LetAs strat with creatin* a template that will "e serve as a "ase %or our mo"ileadaptation. /e are *oin* to try to "e*in with a standard architecture #

Banner with lo*o and module

0ori7ontal menu odule o% slideshow

Block o% = ali*ned modules

ain contents with le%t and ri*ht columns

Block o% = ali*ned modules

Footer

I have created a speci%ic template supplied with this tutorial that you can use howeveryou want on your own we" sites.

I created this template with Template Creator CK. 9s such) I am supplyin* theparameters o% the template) which you can install in Template Creator to modi%y)with this tutorial.

Keep in your mind that i% you want to use this techni6ue to adapt your template tomo"iles) it must also "e coded in a simple and %unctional way. I% you try to do it witha pro%essional template or a template created with 9rtisteer) you risk to encountersome di%%iculties.

Finally) here is the result o% my work) a little template that is rather simple to create #




13/52


KEIFLIN Cdric 1! AvrilkApril



14/52


/hen workin* on a mo"ile adaptation project) there are 4 important points to consider #

know how to modi%y or to develop the desi*n accordin* to the si7e o% the screen-ali*n or hide "locks) modi%y mar*ins) etc.

have enou*h knowled*e in C,, to produce the result

It all depends on your needs) and especially on your initial template! I% you try to adapta %ramework -*antry) T5) warp) shape: or other) or even a template 9rtisteer) I wishyou *ood luck. Indeed) to "e a"le to easily adapt the template) it is necessary to thinko% this need %rom its conception.

ost %rameworks propose %unctions %or mo"iles that are already inte*rated into thetemplate.

Then) i% you know nothin* a"out C,,) either *o alon* your way or arm youresl% withpatience. It is) however) necessary to have notions o% %lotation) mar*ins) and other suchkind o% thin*s to create the desi*n.

@k) thatDs enou*h talkin*) letAs move on to the ne(t step !

KEIFLIN Cdric 1" AvrilkApril



15/52

3ratical ca-) 4 t%torial )fi$i$5 th) d)-i5$ accordi$5 to th) r)-ol%tio$

2. Definin the desin accordin to the resolution

0ere we are not limited to only one sin*le solution) "ut we will see what we a"solutelyneed and what we can modi%y. I take a screen shoot and put it in my picture editor.Then) I draw lines correspondin* to the resolutions %or 4p(.

Clearly) as soon as we %all "elow the limit o% >G8p() we %all on a desi*n that is 7*8(,ide.9s soon as we %all "elow the limit o%


16/52


KEIFLIN Cdric 1& AvrilkApril



17/52


2.1) 5.1) Design with a 75p! width

banner ith lo)o 'odule # no pro"lem) it will %it horiontal 'enu # we reduce the mar*ins "etween links to %it

everythin* on a sin*le line

lidesho 'odule # we leave it as it is -i% you use my ,lideshow CKmodule) it will adapt itsel% automatically to the width o% the pa*e "ecause itAsconceived with an adaptive desi*n

/loc! of - 'odules ali)ned at the to( # we reduce the width o% the modules tokeep them ali*ned

+ain contents ith left and ri)ht colu'ns # here) itAs necessary to make achoice. ,o) we are *oin* to work on the le%t column and ali*n the moduleshori7ontally. /e keep the central column and the ri*ht column side "y side.

/loc! of - 'odules ali)ned at the botto'# same process as %or the modulesali*ned at the top

ooter # no chan*e necessary

2.2) Design with a 52" p! width

/anner ith lo)o and 'odule # we "lock the search module as %ar on the le%tas possi"le so that everythin* %its into the width. I% need "e) we resi7e the lo*o.

Horiontal 'enu # we reduce the mar*ins "etween links to %iteverythin* on a sin*le line. I% need "e) we will adapt the details accordin* to theo"tained result

lidesho 'odule # same as the


18/52


2.3) Design with a 2#2p! width

-itAs here that it "ecomes a little "it complicated

/anner ith lo)o and 'odule # we "lock the search module as %ar on the le%tas possi"le to make everythin* %it into the width. I% need "e) we resi7e the lo*o ormove the module underneath

Horiontal 'enu # reducin* the mar*ins isnAt enou*h anymore) wewill have to place the links a"ove and "elow one another

lidesho 'odule # we could keep it "ut) %rankly) i% itAs not reallyuse%ul) then letDs reduce the wei*ht o% the desi*n o% the pa*e. /e remove it -notethat css will only hide the module) i% you really want to reduce the wei*ht o% thepa*e) you should use a user+a*ent detection to avoid loadin* the module) see"onus 4

/loc! of - ali)ned 'odules at the to(# here we have no choice) considerin* thatthey donAt contain crucial in%ormation %or "rowsin* with mo"iles) we remove them

+ain contents ith left and ri)ht colu'ns # hmmm) a di%%icult choice... twodi%%erent options # either we remove a column or we have a very very lon*we"site. /hatAs to "e done? In this case we are *oin* to keep "oth columns andvertically ali*n the modules

/loc! of - 'odules ali)ned at the botto'# we ali*n them a"ove and "elow oneanother

ooter still no chan*e necessaryH




19/52

3ratical ca-) 4 t%torial 6odificatio$ of th) i$d)7.php fil)

3. !odification of the inde".php file

For our e(ample I chose to call on a speci%ic e(ternal sheet %or mo"iles. It will allow usto "etter visuali7e and especially to know where to %ind the C,,.

/arnin* # althou*h this is a via"le method) optimi7ation techni6ues %or loadin* pa*esrecommend to place all the C,, sheets in a sin*le %ile to minimi7e the num"er o%re6uests.

/e are *oin* to edit the inde,.(h(%ile located in the template to add the loaded css

sheet) which we will name 'obile.css

,o) we place this new sheet in the %olderte'(lates:;te'(late


20/52

3ratical ca-) 4 t%torial Cr)atio$ of th) C88 -t+l) -h))t

#. Creation of the C$$ st%le sheet

@n va maintenant travailler dans le %ichier 'obile.css.

".1) 7.1) $a%&et in p'rtrait ('de 75p!

Let us start with the %irst desi*n) which is G8p() the site adapts itsel%. Too cool #

I have another 6uestion) why do we use the property =i'(ortantin css ? I "elieved thatyou should not use it "ecause o% its incompati"ility with Internet E(plorer?

0ey) you have ever seen a smartphone that sur%s on the net usin* an old search en*inlike Internet E(plorer ? o ? o worries then) we can use the property !important tooverride all other already de%ined cssDs.

First pro"lem to %i( # the search module in the "anner) it places itsel% "elow the lo*o.0ey was that planned ?! 0a 0a




21/52


/e use Fire"u* to inspect the >bannerelement and this is what we %ind #

/e see the le%t mar*in in yellow and the width o% the module in "lue. /e there%ore justhave to reduce the width o% the module.

/)anner

width: a*to;

$

First pro"lem resolved) let us move on to the second# the main columns. /e see thatthey are not ali*ned. First o% all) it is necessary to %orce the le%t column to span the %ullwidth o%


22/52


9hhh) the ma*ic o% float... These thin*s are very particular. /e could add a ;IO with

clearboth?in the inde,.(h(%ile o% the template) "ut I am simply *oin* to use cssDs toavoid this issue with overflohidden?. I take advanta*e o% the opportunity to alsode%ine the mar*ins in order to correctly ali*n the "lock#/le&t > div.inner

over&low: hidden;

mar4in: 0 0 10px 0;

$

ovin* %orward) we still have to de%ine the width o% the central column. 9s the width o%the wrapper is


23/52


KEIFLIN Cdric 2! AvrilkApril



24/52


".2) 7.1) $a%&et in p'rtrait ('de 52"p!

/e have had %un up to now) no? Indeed) let us continue with the same momentum./e now test %or resolutions under


25/52


It could work "ut I %ind that it is a little "itH small. The modules are not very wide andwe have di%%iculty accommodatin* the te(t. /e are *oin* to try to improve it. /e de%inethe width o% every module at :8N to place 4 modules per line#

/mod*lestop .&lexi)lemod*le

width: 08;

$

ThatDs "etter! It was not planned in the initial speci%ications) "ut it is also necessary toknow how to adapt accordin* to the result and what we want to show.

The le%t column -which no lon*er resem"les a column is too wide) it is necessary torestore it the proper width. The same is true %or the central column and the ri*htcolumn which we are now *oin* to "e trans%ormed into rows.

/le&t5 /center5 /ri4ht

width: 9px 3important;

$

KEIFLIN Cdric 2# AvrilkApril



26/52


It "e*ins to *et more complicated when modi%yin* the ri*ht column. Below are the cssDsthat need to "e applied#

/ri4ht .mod*leta)le5 /ri4ht .mod*leta)lemen*

&loat: le&t;

width: 8;

mar4in: 10px 0 0 0 3important;

paddin4: 98 3important;

$

/ri4ht div.mod*leta)le:&irst-child5 /ri4ht div.mod*leta)lemen*:&irst-child

mar4in-ri4ht: 98 3important;

$

I ima*ine the e(pression on your %ace) you are sayin* to yoursel% "ut what is this? .This could have "een done in a more simple manner "ut the mar*ins would not haveallowed the modules to adjust correctly to the totality o% the width) resultin* in anunattractive P "order Q e%%ect. 0ere is a view o% an e(ample with just with one %loat#le%tand a == N width#

ot very nice) ri*ht ? 9s such) I reset the mar*ins) leave 18p( at the top to create aspace and 8 everywhere else. Then) I de%ine a =: N idthplus 4 N o% (addin)on eachside) makin* every "lock take up => N o% the space) leavin* a *lo"al mar*in o% 4 Nthrou*hout the whole column. I use the 4 N le%t over to separate the modules with amar*in. I am only *oin* to apply this mar*in to the %irst module %ound in the container>ri)ht-"y usin* the property first%child.

ou see) it is simple!

KEIFLIN Cdric 2& AvrilkApril



27/52


I% we take a look at the "ottom modules) we encounter the same pro"lem as those %orthe top. 9s such) we repeat the previous operation to place 4 modules per line #

/mod*les)ottom .&lexi)lemod*le

width: 08;

$

@h look) we have a mar*in pro"lem on these ones!

Lets keep *oin*! /e can %i( that while weDre at it!

/mod*les)ottom .&lexi)lemod*le > div.inner

mar4in: px;

$

I% you inspect the elements with Fire"u*) you will see that the 0TL structurecontains the "locks o% the modules in which there is always another ;IO with an innerclass. This is what we call the nested ;IOs method. ou must not apply a idth)'ar)insand (addin)to the same element to ensure a ma(imal compati"ility with all"rowsers.

KEIFLIN Cdric 2' AvrilkApril



28/52


It is already "etter#

Last and ultimate step %or this desi*n) the menu. I kept it %or the end to "e a"le to resta little "e%ore attackin* the very last desi*n.

0ere I keep it simple) I increase its hei*ht to %orce the links onto two lines

hei4ht: 60px;

$

9nd the "allot is played. Let us look at the "eauti%ul desi*n that we o"tain.




29/52





30/52


".3) M'%i&e in p'rtrait ('de 2#2p!

/e %inally arrive at the end o% our last section. 0ere is the last condition that must "eadded to create the desi*n o% 4>4p( wide#

@media screen and (max-width: 9px!

st#les css ici...

$

The %irst step) as usual) is to adjust the width o% the ra((erand take a look at what itlooks like wne we resi7e the window./wrapper

width: 9,9px 3important;

paddin4: 0;

$

/ell) we said that we were *oin* to hide the slideshow and the row o% modules at thetop. /ith one dis(laynone?the "allot is played/slideshow5 /mod*lestop

displa#: none;

$

Then) we are *oin* to re+work the le%t column -which doesnAt look like a columnanymore to accommodate every module in the totality o% the width./le&t


$

/le&t .mod*leta)le5 /le&t .mod*leta)lemen*

&loat: none 3important;

width: a*to;

$

/le&t > div.inner

mar4in: 0 0 10px 0;

hei4ht: a*to;

$

9 %ew e(planations? /e %i( the width o% the column at 4>4p(. Then) we tell the modulesto adapt their width and to ali*n one under the other with floatnone?/e also restore




31/52


the automatic hei*ht on the div.inner"ecause we had %i(ed it "e%ore -in the previousdesi*n.e(t) we attack the ri*ht and center column. Knowin* that they are *oin* to "ehave asthe le%t column) which we have just %ormated) we just modi%y the code to add them in #/le&t5 /ri4ht5 /center


$

/le&t .mod*leta)le5 /le&t .mod*leta)lemen*5

/ri4ht div.inner div.mod*leta)le5 /ri4ht div.inner div.mod*leta)lemen*

&loat: none 3important;

width: a*to;

mar4in: 10px 0 0 0 3important;

$

/le&t > div.inner

mar4in: 0 0 10px 0;

hei4ht: a*to;

$

Let us note that here we use a lon*er strin* %or the column >ri)ht to *ive morewei*ht to the C,, "ecause we have previously de%ined a mar*in o% 4 N with a pseudo+

class. /ithout *oin* into detail) I am only applyin* the classic C,, techni6ues.

/e will now attack the "ottom row o% modules... /arnin*! ItAs necessary to identi%y the0TL structure "ecause) in this case) we donAt have = modules ali*ned in the same"lock) "ut = "locks which contain 1 module each. To simpli%y #

...

&layin* with the module classes will) there%ore) "e o% no use here! ather) we are *oin*to use the class %le(i"lemodule to place modules and also add a small mar*in "elow

KEIFLIN Cdric !1 AvrilkApril



32/52


to vertically space them out./mod*les)ottom .&lexi)lemod*le

&loat: none;

width: a*to 3important;

$

/mod*les)ottom .&lexi)lemod*le > div.inner

mar4in: 0 0 10px 0;

$

0ave you seen what the we" site looks like? ot "ad) donDt you think ? 9ll that is le%t isto put the %inishin* touches on the top menu and I "elieve that we have covered all the"ases.

Ruick note) in *eneral) I advise you to not create more than one level o% su"menus.The more levels you have) the more di%%icult your "rowsin* will "e and the lessaccesi"le it will "e. The ideal situation is to have one su"menu) in which we place allthe necessary links. /ith a(imenu CK) we can or*ani7e the structure in columns androws) leavin* us %ree to "e creative and play with the er*onomics.

0ere is what our menu currently looks like on a 4>4p( width #

ItDs not *reat H/hat I want to do is list all the items o% the menu one under the other and apply anoran*e) *raded "ack*round to each o% them to make them look like "uttons.LetAs *o!


http://www.joomlack.fr/en/joomla-extensions/maximenu-ckhttp://www.joomlack.fr/http://www.joomlack.fr/en/joomla-extensions/maximenu-ckhttp://www.joomlack.fr/


33/52


First) we "e*in "y removin* the "ack*round and the shadow on the main container)without %or*ettin* to delete the %i(ed hei*ht#/nav

)ac%4ro*nd: none 3important;

)ox-shadow: none 3important;

-mo-)ox-shadow: none 3important;

paddin4: 0 3important;

mar4in-)ottom: 10px;

hei4ht: a*to;

$

Then) I reuse the applied cssDs to the ;IO >navand I add some mar*in de%initions/nav *l.men* li.level1


hei4ht: 7px;

mar4in: 7px 0 3important;

paddin4: px 0 px 0;

)order-)ottom: none 3important;

&loat: none;

)ac%4ro*nd: /&&a9;

)ac%4ro*nd-ima4e: *rl(")locnav-4radient.sv4"!;

)ac%4ro*nd-ima4e: -o-linear-4radient(center top5/&&a95 /&&6a00 1008!;

)ac%4ro*nd-ima4e: -we)%it-4radient(linear5 le&t )ottom5 le&t top5/&&a95 /&&6a001008!;

)ac%4ro*nd-ima4e: -mo-linear-4radient(center top5/&&a95 /&&6a00 1008!;

)ac%4ro*nd-ima4e: linear-4radient(center top5/&&a95 /&&6a00 1008!;

-pie-)ac%4ro*nd: linear-4radient(center top5/&&a95 /&&6a00 1008!;

)order-radi*s: px;

-mo-)order-radi*s: px;

-o-)order-radi*s: px;

-we)%it-)order-radi*s: px;

)ox-shadow: /767676 0px 9px 7px 0px;

-mo-)ox-shadow: /767676 0px 9px 7px 0px;

-we)%it-)ox-shadow: /767676 0px 9px 7px 0px;

$

9nd we o"tain an attractive menu!

KEIFLIN Cdric !! AvrilkApril



34/52


I "elieved that we were done) "ut) in %act) there is still a detail that "others me# theali*nment o% the columns on the homepa*e in "lo* mode. It is the kind o% detail that youwill have to adjust "y yoursel% %or every pa*e as soon as you see that somethin* is not6uite ri*ht.

9 6uick use o% Fire"u* to inspect the elements) and I can ri*ht away see that it is theC,,Ds o% the template that mana*e the ali*nment o% columns. By deletin* floatleft) themar*ins and the 4>N width) I o"tain a correct result #

KEIFLIN Cdric !" AvrilkApril



35/52


I will) there%ore) do the same in my css#/center .items-row .item

width: a*to;

&loat: none;

mar4in: 0;

$

/hile weDre at it) I will *ive you the cssDs necessary to adapt the contact %orm.contact &orm &ieldset dt

max-width: 20px;

$

.contact inp*t5 .contact textarea

max-width: 160px;

$

KEIFLIN Cdric !# AvrilkApril



36/52


9 6uick look at the result #

9nd the %inal result #

KEIFLIN Cdric !& AvrilkApril



37/52


KEIFLIN Cdric !' AvrilkApril



38/52


/e are %inally %inished! ou can now see that it isnAt s hard. ou just need to add a %ewlines o% C,, to adapt your we" site to the various peripheral resolutions that e(ist.

othin* limits you in the redesi*n o% your site) e(cept your motivation and your

knowled*e in C,, codin*. Indeed) I didnAt approach the su"ject o% aspects o% the C,,lan*ua*e that de%ine the wei*ht o% a property. The C,, is very comple( and I "elieve no"ook or tutorial could train you "etter that your own e(perience with usin* thislan*ua*e.




39/52

3ratical ca-) 4 t%torial 9o$%- 4 Adj%-ti$5 -%*m)$%- i$ 6a7im)$% CK

&. 'onus ( )d*ustin submenus in !a"imenu C+

In attemptin* to polish up our site) we created a rather simple menu template)containin* only a %ew items. ow) we are *oin* to have %un with a menu that is a littlemore complicated. 0ere is the outline o% the new menu#

I created the structure o% the su"menu with the help o% (lu)in +a,i'enu (ara's)which allows us to easily create columns and de%ine an 0TL ta* %or the elements.,o) I created column titles h4

;ownload the plu*in a(imenu params

I% we reduce the width o% the screen) this is what it looks like #

/e now have the last item on the menu that has moved down. /e need to remedy thispro"lem. By inspectin* it with Fire"u*) we can see that the mar*ins are applied to theelement a #


http://www.joomlack.fr/en/joomla-extension-maximenu/plugin-maximenu-paramshttp://www.joomlack.fr/http://www.joomlack.fr/en/joomla-extension-maximenu/plugin-maximenu-paramshttp://www.joomlack.fr/


40/52


,o) we add C,,Ds to reduce the mar*ins/nav *l.men* li a5 /nav *l.men* li span.separator

mar4in-le&t: 9px;

mar4in-ri4ht: 9px;

paddin4-le&t: 7px;

paddin4-ri4ht: 7px;

$

9nd here it is#

ow) we have a look at the su"menus... the horror!

9 %irst pro"lem is that the whole su"menu appears shi%ted with re*ard to the parentitem) and we see that everythin* han*s over "ecause the width o% the pa*e isnAt lar*eenou*h to show everythin*.




41/52


/ell) as usual) we "e*in "y inspectin* it with %ire"u*#

ItAs important to remem"er the num"er o% the parent element) in this case ite'-71. /eare *oin* to use it to rede%ine the mar*ins o% the su"menu. /e are *oin* to place thesu"menu to the %ar le%t o% the pa*e. To "e make it astheticaly pleasin*) we will widenthe su"menu to the width o% the site./nav *l.men* li.item1 > div.&loatc%

mar4in-le&t: -91px;


$

0ereDs the result we o"tain#

KEIFLIN Cdric "1 AvrilkApril



42/52


9ll you have to do is test the mar*in values and re%resh the pa*e to %ind the optimal

depiction. In my test I arrived at the value o%+41=p(.

/e continue our tests and we reduce the window even %urther to pass to the lowerresolution desi*n. 0ere is a 6uick *lance at the menu#

/e have the parental-main ? links over 4 lines) "ut that isnAt too "ad. It would "e

di%%icult to do it any other way.@n the other hand) %or the su"menu) once a*ain we have some work to do!! @h shoot)itAs necessary to re+de%ine the parameters %or everythin*) every time? es) almosteverythin*. Look at the le%t mar*in. It is already *ood! /e just have to adapt the widthso% the columns. In my con%i*uration they are o% 138p( "y de%ault. ,o) we are *oin* toreduce them as much as possi"le -:4=$= J 131(,.

/nav *l.men* li.item1 > div.&loatc% div.maximen*c%9


$




43/52


/nav *l.men* li.item1 > div.&loatc%


$

&astin* these C,,Ds directly in your site will pro"a"ly have no e%%ect. ou have toadapt them to your own menu items. 0ere itAs only "een adapted to item =


44/52


0mmm) di%%icult) how should we do this? &ersonally) I am *oin* to shorten the su"menu

"y deletin* titles o% columns and ali*nin* all the items one under the other.

0ow do we delete titles? Two possi"le methods # Either we use %ire"u* to identi%y the item num"er o% the element we want to hide

and we apply the C,,Ds -e(ample with item =>8#/nav *l.men* li.item,0

displa#:none;

$

or we use the capacities o% the plu*in a(imenu params to mana*e all theelements we want to hide with a C,, class. This is the method that I am *oin* to

descri"e.

In the edition o% the menu links) which allow the creation o% the column titles) I am*oin* to modi%y the parameters in the +a,i'enu & $ara's ta" and add a classhide'obileon the list element li #

KEIFLIN Cdric "" AvrilkApril

http://www.joomlack.fr/en/joomla-extension-maximenu/plugin-maximenu-paramshttp://www.joomlack.fr/http://www.joomlack.fr/en/joomla-extension-maximenu/plugin-maximenu-paramshttp://www.joomlack.fr/


45/52


I) there%ore) add this class on all the column titles and then) in the C,,) I just have tocall upon this class to tell it not to show itsel% #/nav *l.men* li.hidemo)ile

displa#:none;

$

Then) we reali*n the mar*ins and the width o% the su"menu) as well as the width o%every column#/nav *l.men* li.item1 > div.&loatc% div.maximen*c%9


$

/nav *l.men* li.item1 > div.&loatc%


mar4in-le&t: 0px;

$

I decided to %i( the column width at 4>4p( on div.'a,i'enuc!2) "ut i% you haveshort titles) you can use a width o% 1=Gp( to ali*n 4 columns on the same line in orderto save space in terms o% hei*ht.

9nd the result in ima*es#

KEIFLIN Cdric "# AvrilkApril



46/52


9nd now the "onus is %inished! I hope that you enjoyed it. ow you can personali7e yourdisplay menu as you wish. ou can also see that even i% the plu*in a(imenu params isnot necessary) it is very use%ul to add a *eneric class that pilots the display. In this way)i% you have to chan*e or add an item) it will su%ice to add it to this class and it will"ehave as the others without the need to modi%y the C,,Ds every time.

KEIFLIN Cdric "& AvrilkApril



47/52

3ratical ca-) 4 t%torial 9o$%- 2 4 )t)ctio$ of -)r4A5)$t for th) 8lid)-how

,. 'onus 2 ( Detection of -ser()ent for the $lideshow

ou still want more ? /hat a thirst %or knowled*e! M

ow we are *oin* to see how to optimi7e our pa*e... 9s seen previously) the slideshow ishidden %or the smaller resolutions) "ut it is always loaded within the pa*e! This wei*hs itdown enormously. 9s such) we are *oin* to use the detection a"ilities o% ser%0)entto%i( this pro"lem.The principle is simple. /e can detect the type o% device used to visit the site thanks tothe varia"le &0 @AB4CB4 ; HTT$AB4A0EBFT

9 %ew e(planations# %irst o% all) I declared a varia"le @is+obilewith the value false)thus) "y de%ault) we are not on a mo"ile. Then i% we detect a mo"ile we chan*e thevalue to true. 9s such) all that remains to do is to just use this varia"le in a condition tomana*e the display.

9s we already have a condition o% count'odules%or the slideshow position) I just add

KEIFLIN Cdric "' AvrilkApril



48/52

3ratical ca-) 4 t%torial 9o$%- 2 4 )t)ctio$ of -)r4A5)$t for th) 8lid)-how

the veri%ication P we are not on a mo"ile Q to post the module#

9nd there you have it! In this case) it was rather %ast to implement and it can "e verypractical to re%ine the load time o% the pa*e with mo"iles.

I%) however) you want to use the slideshow on mo"iles) "e aware that my module

,lideshow CKis compati"le with mo"iles and we can even navi*ate "etween theima*es "y slidin* the %in*er across the screen.


http://www.joomlack.fr/en/joomla-extensions/slideshow-ckhttp://www.joomlack.fr/http://www.joomlack.fr/en/joomla-extensions/slideshow-ckhttp://www.joomlack.fr/


49/52

3ratical ca-) 4 t%torial -)d )7t)$-io$-

. -sed e"tensions

7.1) $e(p&ate *reat'r *+

9s already e(plained) I used my Template Creator CK component to create the template.In doin* so) I have a template %or which the source code is accessi"le and I can modi%y itwithout di%%iculties.ou can download Template Creator CK at http#$$www.template+creator.com$

Link to Template Creator CK in the 'E;

7.2) Ma!i(enu *+

To *enerate the hori7ontal menu) I use my a(imenu CK module) which allows your siteto have a drop+down menu mootools with or*ani7ation o% su"menus in columns androws.ou can download a(imenu CK on 'oomlack.%r

Flink to a(imenu CK in the 'E;

7.3) ,&idesh'w *+

To display a slideshow) I use another one o% my e(tensions) ,lideshow CK) which is "asedon a script '6uery o% &i(edelic) which itsel% allows us to display a slideshow desi*ned sothat it adapts itsel% to the width o% the container. Furthermore) we can sur% "etweenima*es with our %in*er.ou can download ,lideshow CK on 'oomlack.%r

Link to ,lideshow CK in the 'E;


http://www.template-creator.com/http://extensions.joomla.org/extensions/style-a-design/templating/17435http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578http://www.pixedelic.com/plugins/camera/http://extensions.joomla.org/extensions/photos-a-images/images-slideshow/image-jquery-slideshow/20362http://www.joomlack.fr/http://www.template-creator.com/http://extensions.joomla.org/extensions/style-a-design/templating/17435http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578http://www.pixedelic.com/plugins/camera/http://extensions.joomla.org/extensions/photos-a-images/images-slideshow/image-jquery-slideshow/20362http://www.joomlack.fr/


50/52

3ratical ca-) 4 t%torial ;)-o%rc)-

/. 0esources

aphaSl oetterAs e(cellent "ook #http#$$www.*oetter.%r$livres$css+avancees$

9 tutorial on 9lsacrations #http#$$www.alsacreations.com$astuce$lire$11


51/52


H.?? /hat is happenin* ? Is there another pa*e ?&sssssttt! 0ey have you looked at your ima*es ? ou know the "i* ima*es which are more

than 4>4p() how do you think they are *oin* to look on the small desi*n?

@ops! Lets *o one last time "e%ore we part) in the %irst conditionG'edia screen and 'a,%idth 96#(,5

add this little C,, lineim4

max-width: 1008;

$

9nd hop! The "allot is played) look %or yoursel% #

KEIFLIN Cdric #1 AvrilkApril



52/52


/e simply told the ima*es to not e(ceed the width o% the container. ow that is enou*h)I leave you to have %un!

;o not hesitate to *o to http#$$www.joomlack.%r) and tell your %riends a"out it!

I% you want the latest live news o% whatDs new on 'oomlack) I advise you to su"scri"e to

my Twitter account#

http#$$twitter.com$ced13

tutoriel template mobile joomla! 2.5_en

Documents