Written by Administrator Wednesday, 05 October :06 - Last Updated Monday, 17 October :28

Transkriptio

1 Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan tekeminen esitellään nyt vaiheittain. Aloitamme rakenteesta. Joomla tarvitsee templatea varten seuraavanlaisen tiedostorakenteen. Kansioiden nimet voi vaihdella ja niitä voi olla enemmän tai vähemmän, mutta loogista on laittaa kuvat ja CSS:t omiin kansioihinsa. - templatedetails.xml on tiedosto, jossa on tieto kaikesta mikä liittyy sivupohjaan (tämä tiedosto on tärkeä, jotta sivupohja asentuu oikein) - params.ini file sisältää sivupohjan parametrejä kuten oletuskoko kuville, sivupohjan väri jne. (tämän voi jättää pois) - index.php on se osa mihin tulee sivuston rakenne eli htm osuudet ovat tässä tiedostossa - css kansio sisältää kaikki css tiedostot - images kansio sisältää kaikki sivupohjassa käytetyt kuvat. Tee omalle koneellesi kansio, jolle laitat sivupohjan nimen. Tässä tapauksessa nimeksi tulee mra. Tee myös em. tiedostot. 1 / 61

2 Lataa valmis paketti Valmiina tuo aloitus eli kansiorakenne ja tyhjät tiedostot, zip-pakettina. templatedetails.xml Sitten palat paikoilleen. Laitetaan ensimmäiseksi kuntoon sivupohjan perustiedot, jotka kirjoitetaan tiedostoon templatedetails.xml. Kopioi alla olevat tiedot tiedostoon templatedetails.xml. codecitation style="brush: xml;" <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.7//DTD template 1.0//EN" " <install version="1.7" type="template"> <name>mra</name> <creationdate>syyskuu 2011</creationDate> <author>jari Sarja</author> <copyright>mra</copyright> <author >jari.sarja(at)gmail.com</author > <authorurl> <version>1.7.0</version> <license>kaikki oikeudet pidätetään</license> <description>mra:n siviupohja Joomlan versiolle 1.7</description> <files> <folder>images</folder> <folder>css</folder> <filename>index.php</filename> <filename>index.html</filename> <filename>template_thumbnail.png</filename> 2 / 61

3 <filename>template_preview.png</filename> </files> <positions> <position>menu</position> <position>vasen</position> <position>oikea</position> <position>oikea2</position> <position>vasen2</position> </positions> </install> /codecitation Kolme ensimmäistä riviä codecitation style="brush: xml;" <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" " <extension version="1.7" type="template" client="site"> /codecitation Näillä riveillä kerrotaan seuraavat asiat: 1. Kyseessä on XML -tiedosto 2. Doctype Joomlaa varten, jossa tietoa asennusta varten 3. Joomlan versio 3 / 61

4 Sitten on tietoa tekijästä jne. codecitation style="brush: xml;" <name>mra</name> <creationdate>syyskuu 2011</creationDate> <author>jari Sarja</author> <copyright>mra</copyright> <author >jari.sarja(at)gmail.com</author > <authorurl> /codecitation 1. sivupohjan nimi 2. luontipäivämäärä 3. sivupohjan tekijä 4. sivupohjan copyright 5. tekijän s-posti 6. tekijän www-sivusto codecitation style="brush: xml;" Joomlan versio, lisenssi ja kuvaus. <version>1.7.0</version> <license>kaikki oikeudet pidätetään</license> <description>mra:n siviupohja Joomlan versiolle 1.7</description>/codecitation 1. Joomlan versio, jolle sivupohja tehty 2. Sivupohjan lisenssi 3. Sivupohjan kuvaus 4 / 61

5 Tiedostot codecitation style="brush: xml;" <files> <folder>images</folder> <folder>css</folder> <filename>index.php</filename> <filename>index.html</filename> <filename>template_thumbnail.png</filename> <filename>template_preview.png</filename> </files> /codecitation 1. kuvakansio 2. css kansio 3. index.php tiedosto 4. index.html tiedosto 5. thumbnail.png eli pieni kuva siviupohjasta 6. templaten esikatselu eli preview.png Positions eli sijainnit. Joomla ei salli asioiden lisäämistä mihin tahansa. Sivupohjassa määritelllään mihin tulee navigaatio ja mihin kirjautuminen jne. codecitation style="brush: xml;" <positions> <position>menu</position> <position>oikea</position> <position>vasen</position> 5 / 61

6 </positions> /codecitation Tässä on käytössä oikea ja vasen palsta sekä menu, jolla on tarkoitus tehdä navigaatio. Lataa valmis paketti Valmiina tuo kyseinen tiedosto ja kansiorakenne, zip-pakettina. CSS -tiedosto CSS tiedoslle ei tarvitse tehdä mitään erikoista. Se saa tässä vaiheessa olla kuten se on, mutta kansiossa CSS ja nimellä css_template. codecitation style="brush: CSS;"> /* begin Page */ body, p margin: 1.2em 0; font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal; font-size: 91%; line-height: 130%; color: #000000; text-align: left; body margin: 0 auto; padding: 0; 6 / 61

7 color: #5F6440; background-color: #D3E9C3; h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,.art-postheader,.art-postheader a,.art-postheader a:link,.art-postheader a:visited,.art-postheader a:hover,.art-blockheader.t,.art-vmenublockheader.t,.art-logo-text,.art-logo-text a, h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover font-style: normal; text-decoration: none; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-weight: bold; font-size: 31px; text-align: left;.kehys2 border-style: solid solid solid solid; border-width:1px; font-size:90%; font-family: arial, sans-serif; border-color:#492e1d; div.imagecaption6 float: left; width: 250px; margin: 0 0.2em 0em 0em; display:inline; padding: 0px 3px 0px 0px; div.imagecaption img border: 0px solid #E2ECED; a,.art-post li a text-decoration: underline; color: #365620; a:link,.art-post li a:link text-decoration: underline; color: #365620; 7 / 61

8 a:visited, a.visited,.art-post li a:visited,.art-post li a.visited color: #656A44; a:hover, a.hover,.art-post li a:hover,.art-post li a.hover text-decoration: none; color: #507F2F; h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover margin: 0.67em 0; color: #507F2F; h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover margin: 0.8em 0; font-size: 24px; color: #507F2F; h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover margin: 1em 0; font-size: 20px; color: #656A44; h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover margin: 1.25em 0; font-size: 18px; color: #131E0B; h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover 8 / 61

9 margin: 1.67em 0; font-size: 15px; color: #131E0B; h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover margin: 2.33em 0; font-size: 15px; color: #131E0B; h1 a, h1 a:link, h1 a:visited, h1 a:hover, h2 a, h2 a:link, h2 a:visited, h2 a:hover, h3 a, h3 a:link, h3 a:visited, h3 a:hover, h4 a, h4 a:link, h4 a:visited, h4 a:hover, h5 a, h5 a:link, h5 a:visited, h5 a:hover, h6 a, h6 a:link, h6 a:visited, h6 a:hover margin:0; #art-main position: relative; width: 100%; left: 0; top: 0; cursor:default; #art-page-background-gradient position: absolute; background-image: url('../images/page_g.jpg'); background-repeat: repeat-x; top: 0; width: 100%; height: 338px; #art-page-background-simple-gradient 9 / 61

10 position: absolute; background-image: url('../images/page_sg.jpg'); background-repeat: repeat-x; top: 0; width: 100%; height: 338px;.cleared float: none; clear: both; margin: 0; padding: 0; border: none; font-size: 1px; form padding: 0!important; margin: 0!important; table.position position: relative; width: 100%; table-layout: fixed; /* end Page */ /* begin Box, Sheet */.art-sheet position: relative; z-index: 0; margin: 0 auto; width: 1000px; min-width: 37px; min-height: 37px;.art-sheet-body 10 / 61

11 position: relative; z-index: 1; padding: 8px;.art-sheet-tr,.art-sheet-tl,.art-sheet-br,.art-sheet-bl,.art-sheet-tc,.art-sheet-bc,.art-sheet-cr,.art-sheet-cl position: absolute; z-index: -1;.art-sheet-tr,.art-sheet-tl,.art-sheet-br,.art-sheet-bl width: 36px; height: 36px; background-image: url('../images/sheet_s.png');.art-sheet-tl top: 0; left: 0; clip: rect(auto, 18px, 18px, auto);.art-sheet-tr top: 0; right: 0; clip: rect(auto, auto, 18px, 18px);.art-sheet-bl bottom: 0; left: 0; clip: rect(18px, 18px, auto, auto);.art-sheet-br bottom: 0; right: 0; clip: rect(18px, auto, auto, 18px); 11 / 61

12 .art-sheet-tc,.art-sheet-bc left: 18px; right: 18px; height: 36px; background-image: url('../images/sheet_h.png');.art-sheet-tc top: 0; clip: rect(auto, auto, 18px, auto);.art-sheet-bc bottom: 0; clip: rect(18px, auto, auto, auto);.art-sheet-cr,.art-sheet-cl top: 18px; bottom: 18px; width: 36px; background-image: url('../images/sheet_v.png');.art-sheet-cr right: 0; clip: rect(auto, auto, auto, 18px);.art-sheet-cl left: 0; clip: rect(auto, 18px, auto, auto);.art-sheet-cc position: absolute; z-index: -1; top: 18px; left: 18px; 12 / 61

13 right: 18px; bottom: 18px; background-color: #FDFDFC;.art-sheet margin-top: 30px!important; cursor:auto; #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare min-width: 1000px; /* end Box, Sheet */ /* begin Header */ div.art-header margin: 0 auto; position: relative; z-index: 0; width: 984px; height: 300px; overflow: hidden; div.art-header-png position: absolute; z-index: -2; top: 0; left: 0; width: 984px; height: 300px; background-image: url('../images/banneri.jpg'); background-repeat: no-repeat; background-position: left top; div.art-header-jpeg position: absolute; 13 / 61

14 z-index: -1; top: 0; left: 0; width: 984px; height: 300px; background-image: url('../images/banneri.jpg'); background-repeat: no-repeat; background-position: center center; /* end Header */ /* begin Logo */.art-logo display: block; position: absolute; left: 10px; top: 118px; width: 964px; h1.art-logo-name display: block; text-align: center; h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover font-size: 29px; text-decoration: none; padding: 0; margin: 0; color: #EFF7E9!important;.art-logo-text display: block; text-align: center;.art-logo-text,.art-logo-text a 14 / 61

15 font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-weight: normal; font-size: 20px; padding: 0; margin: 0; color: #EFF7E9!important; /* end Logo */ /* begin Menu */ /* menu structure */.menu a,.menu a:link,.menu a:visited,.menu a:hover text-align: left; text-decoration: none; outline: none; letter-spacing: normal; word-spacing: normal; font-size: 15px; font-weight: bold; color:#000000; padding:3px 0 0 0;.menu,.menu ul margin: 0; padding: 0; border: 0; list-style-type: none; display: block;.menu li margin: 0; padding: 0; border: 0; display: block; float: left; position: relative; z-index: 5; background: none; 15 / 61

16 .menu li:hover z-index: 10000; white-space: normal;.menu li li float: none;.menu ul visibility: hidden; position: absolute; z-index: 10; left: 0; top: 0; background: none;.menu li:hover>ul visibility: visible; top: 100%;.menu li li:hover>ul top: 0; left: 100%;.menu:after,.menu ul:after content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both;.menu,.menu ul min-height: 0; 16 / 61

17 .menu ul background-image: url(../images/spacer.gif); padding: 10px 30px 30px 30px; margin: -10px px;.menu ul ul padding: 30px 30px 30px 10px; margin: -30px px; /* menu structure */.menu padding: 6px 3px 0 3px;.art-nav position: relative; height: 39px; z-index: 100;.art-nav.l,.art-nav.r position: absolute; z-index: -1; top: 0; height: 39px; background-image: url('../images/nav.png');.art-nav.l left: 0; right: 0;.art-nav.r 17 / 61

18 right: 0; width: 984px; clip: rect(auto, auto, auto, 984px); /* end Menu */ /* begin MenuItem */.menu a position: relative; display: block; overflow: hidden; height: 33px; cursor: pointer; text-decoration: none;.menu li margin-right: 3px; margin-left: 3px;.menu ul li margin:0; clear: both;.menu a.r,.menu a.l position: absolute; display: block; top: 0; z-index: -1; height: 99px; background-image: url('../images/menuitem.png');.menu a.l left: 0; 18 / 61

19 right: 7px;.menu a.r width: 414px; right: 0; clip: rect(auto, auto, auto, 407px);.menu a.t margin-right: 10px; margin-left: 10px; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-weight: bold; font-size: 15px; color: #162414; padding: 0 10px; margin: 0 7px; line-height: 33px; text-align: center;.menu a:hover.l,.menu a:hover.r top: -33px;.menu li:hover>a.l,.menu li:hover>a.r top: -33px;.menu li:hover a.l,.menu li:hover a.r top: -33px;.menu a:hover.t color: #F4F5EF;.menu li:hover a.t color: #F4F5EF; 19 / 61

20 .menu li:hover>a.t color: #F4F5EF;.menu a.active.l,.menu a.active.r top: -66px;.menu a.active.t color: #000000; /* end MenuItem */ /* begin MenuSubItem */.menu ul a display: block; text-align: center; white-space: nowrap; height: 32px; width: 180px; overflow: hidden; line-height: 32px; background-image: url('../images/subitem.png'); background-position: left top; background-repeat: repeat-x; border-width: 1px; border-style: solid; border-color: #ADCDA8;.art-nav ul.menu ul span,.art-nav ul.menu ul span span display: inline; float: none; margin: inherit; padding: inherit; background-image: none; text-align: inherit; text-decoration: inherit; 20 / 61

21 .menu ul a,.menu ul a:link,.menu ul a:visited,.menu ul a:hover,.menu ul a:active,.art-nav ul.menu ul span,.art-nav ul.menu ul span span text-align: left; text-indent: 12px; text-decoration: none; line-height: 32px; color: #41683C; margin-right: 10px; margin-left: 10px; margin:0; padding:0;.menu ul li a:hover color: #000000; border-color: #ADD68F; background-position: 0-32px;.menu ul li:hover>a color: #000000; border-color: #ADD68F; background-position: 0-32px;.art-nav.menu ul li a:hover span,.art-nav.menu ul li a:hover span span color: #000000;.art-nav.menu ul li:hover>a span,.art-nav.menu ul li:hover>a span span color: #000000; /* end MenuSubItem */ /* begin Layout */.art-content-layout 21 / 61

22 display: table; padding: 0; border: none; width: 984px;.art-content-layout.art-content-layout width: auto; margin:0; div.art-content-layout div.art-layout-cell, div.art-content-layout div.art-layout-cell div.art-content-layout div.art-layout-cell display: table-cell; div.art-layout-cell div.art-layout-cell display: block; div.art-content-layout-row display: table-row;.art-content-layout table-layout: fixed; border-collapse: collapse; background-color: Transparent; border: none!important; padding:0!important;.art-layout-cell,.art-content-layout-row background-color: Transparent; vertical-align: top; text-align: left; border: none!important; margin:0!important; padding:0!important; 22 / 61

23 /* end Layout */ /* begin Box, Block, VMenuBlock */.art-vmenublock position: relative; z-index: 0; margin: 0 auto; min-width: 11px; min-height: 11px;.art-vmenublock-body position: relative; z-index: 1; padding: 8px;.art-vmenublock-tr,.art-vmenublock-tl,.art-vmenublock-br,.art-vmenublock-bl,.art-vmenublock-tc,.art-vmenublock-bc,.art-vmenublock-cr,.art-vmenublock-cl position: absolute; z-index: -1;.art-vmenublock-tr,.art-vmenublock-tl,.art-vmenublock-br,.art-vmenublock-bl width: 18px; height: 18px; background-image: url('../images/vmenublock_s.png');.art-vmenublock-tl top: 0; left: 0; clip: rect(auto, 9px, 9px, auto);.art-vmenublock-tr top: 0; right: 0; clip: rect(auto, auto, 9px, 9px); 23 / 61

24 .art-vmenublock-bl bottom: 0; left: 0; clip: rect(9px, 9px, auto, auto);.art-vmenublock-br bottom: 0; right: 0; clip: rect(9px, auto, auto, 9px);.art-vmenublock-tc,.art-vmenublock-bc left: 9px; right: 9px; height: 18px; background-image: url('../images/vmenublock_h.png');.art-vmenublock-tc top: 0; clip: rect(auto, auto, 9px, auto);.art-vmenublock-bc bottom: 0; clip: rect(9px, auto, auto, auto);.art-vmenublock-cr,.art-vmenublock-cl top: 9px; bottom: 9px; width: 18px; background-image: url('../images/vmenublock_v.png');.art-vmenublock-cr right: 0; clip: rect(auto, auto, auto, 9px); 24 / 61

25 .art-vmenublock-cl left: 0; clip: rect(auto, 9px, auto, auto);.art-vmenublock-cc position: absolute; z-index: -1; top: 9px; left: 9px; right: 9px; bottom: 9px; background-color: #ECEDE3;.art-vmenublock margin: 0; /* end Box, Block, VMenuBlock */ /* begin Box, Box, VMenuBlockContent */.art-vmenublockcontent position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px;.art-vmenublockcontent-body position: relative; z-index: 1; padding: 0;.art-vmenublockcontent 25 / 61

26 position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px;.art-vmenublockcontent-body position: relative; z-index: 1; padding: 0; /* end Box, Box, VMenuBlockContent */ /* begin VMenu */ ul.art-vmenu, ul.art-vmenu li list-style: none; margin: 0; padding: 0; width: auto; line-height: 0; ul.art-vmenu ul display: none; ul.art-vmenu ul.active display: block; /* end VMenu */ /* begin VMenuItem */ ul.art-vmenu a position: relative; display: block; overflow: hidden; height: 30px; cursor: pointer; 26 / 61

27 text-decoration: none; ul.art-vmenu li.art-vmenu-separator display: block; padding: 2px 0 2px 0; margin: 0; font-size: 1px; ul.art-vmenu.art-vmenu-separator-span display: block; padding: 0; font-size: 1px; height: 0; line-height: 0; border: none; ul.art-vmenu a.r, ul.art-vmenu a.l position: absolute; display: block; top: 0; z-index: -1; height: 90px; background-image: url('../images/vmenuitem.png'); ul.art-vmenu a.l left: 0; right: 19px; ul.art-vmenu a.r width: 1026px; right: 0; clip: rect(auto, auto, auto, 1007px); ul.art-vmenu a.t 27 / 61

28 display: block; line-height: 30px; color: #1E1F14; padding: 0 11px 0 29px; font-weight: bold; margin-left:0; margin-right:0; ul.art-vmenu a:hover.l, ul.art-vmenu a:hover.r top: -30px; ul.art-vmenu a:hover.t color: #E5E7DA; ul.art-vmenu a.active.l, ul.art-vmenu a.active.r top: -60px; ul.art-vmenu a.active.t color: #477029; /* end VMenuItem */ /* begin VMenuSubItem */ ul.art-vmenu ul, ul.art-vmenu ul li margin: 0; padding: 0; ul.art-vmenu ul a display: block; white-space: nowrap; height: 16px; overflow: visible; background-image: url('../images/vsubitem.gif'); background-position: 25px 0; background-repeat: repeat-x; 28 / 61

29 padding-left: 41px; ul.art-vmenu ul span, ul.art-vmenu ul span span display: inline; float: none; margin: inherit; padding: inherit; background-image: none; text-align: inherit; text-decoration: inherit; ul.art-vmenu ul a, ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:hover, ul.art-vmenu ul a:active, ul.art-vmenu ul span, ul.art-vmenu ul span span line-height: 16px; color: #3F643A; margin-left: 0; ul.art-vmenu ul margin: ; ul.art-vmenu ul ul margin: ; ul.art-vmenu ul li.art-vsubmenu-separator display: block; margin: 0; font-size: 1px; padding: ; ul.art-vmenu ul.art-vsubmenu-separator-span display: block; padding: 0; font-size: 1px; 29 / 61

30 height: 0; line-height: 0; margin: 0; border: none; ul.art-vmenu ul li li a background-position: 50px 0; padding-left: 66px; ul.art-vmenu ul li li li a background-position: 75px 0; padding-left: 91px; ul.art-vmenu ul li li li li a background-position: 100px 0; padding-left: 116px; ul.art-vmenu ul li li li li li a background-position: 125px 0; padding-left: 141px; ul.art-vmenu ul li a.active color: #34521E; background-position: 25px -32px; ul.art-vmenu ul li li a.active background-position: 50px -32px; ul.art-vmenu ul li li li a.active background-position: 75px -32px; 30 / 61

31 ul.art-vmenu ul li li li li a.active background-position: 100px -32px; ul.art-vmenu ul li li li li li a.active background-position: 125px -32px; ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a:hover.active color: #5C603E; background-position: 25px -16px; ul.art-vmenu ul li li a:hover, ul.art-vmenu ul li li a:hover.active background-position: 50px -16px; ul.art-vmenu ul li li li a:hover, ul.art-vmenu ul li li li a:hover.active background-position: 75px -16px; ul.art-vmenu ul li li li li a:hover, ul.art-vmenu ul li li li li a:hover.active background-position: 100px -16px; ul.art-vmenu ul li li li li li a:hover, ul.art-vmenu ul li li li li li a:hover.active background-position: 125px -16px; /* end VMenuSubItem */ /* begin Box, Block */.art-block position: relative; z-index: 0; margin: 0 auto; 31 / 61

32 min-width: 11px; min-height: 11px;.art-block-body position: relative; z-index: 1; padding: 5px;.art-block-tr,.art-block-tl,.art-block-br,.art-block-bl,.art-block-tc,.art-block-bc,.art-block-cr,.art-block-cl position: absolute; z-index: -1;.art-block-tr,.art-block-tl,.art-block-br,.art-block-bl width: 18px; height: 18px; background-image: url('../images/block_s.png');.art-block-tl top: 0; left: 0; clip: rect(auto, 9px, 9px, auto);.art-block-tr top: 0; right: 0; clip: rect(auto, auto, 9px, 9px);.art-block-bl bottom: 0; left: 0; clip: rect(9px, 9px, auto, auto); 32 / 61

33 .art-block-br bottom: 0; right: 0; clip: rect(9px, auto, auto, 9px);.art-block-tc,.art-block-bc left: 9px; right: 9px; height: 18px; background-image: url('../images/block_h.png');.art-block-tc top: 0; clip: rect(auto, auto, 9px, auto);.art-block-bc bottom: 0; clip: rect(9px, auto, auto, auto);.art-block-cr,.art-block-cl top: 9px; bottom: 9px; width: 18px; background-image: url('../images/block_v.png');.art-block-cr right: 0; clip: rect(auto, auto, auto, 9px);.art-block-cl left: 0; clip: rect(auto, 9px, auto, auto); 33 / 61

34 .art-block-cc position: absolute; z-index: -1; top: 9px; left: 9px; right: 9px; bottom: 9px; background-color: #ECEDE3;.art-block margin: 10px; /* end Box, Block */ /* begin BlockHeader */.art-blockheader position: relative; z-index: 0; height: 37px; margin-bottom: 2px;.art-blockheader.t height: 37px; color: #000000; margin-right: 10px; margin-left: 10px; font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: 13px; margin:0; padding: 0 11px 0 32px; white-space: nowrap; line-height: 37px;.art-blockheader.l,.art-blockheader.r display: block; position: absolute; z-index: -1; 34 / 61

35 height: 37px; background-image: url('../images/blockheader.png');.art-blockheader.l left: 0; right: 26px;.art-blockheader.r width: 990px; right: 0; clip: rect(auto, auto, auto, 964px); /* end BlockHeader */ /* begin Box, BlockContent */.art-blockcontent position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px;.art-blockcontent-body position: relative; z-index: 1; text-align: left; padding: 7px;.art-blockcontent-body,.art-blockcontent-body a,.art-blockcontent-body li a color: #000000; text-align: left; 35 / 61

36 .art-blockcontent-body a,.art-blockcontent-body li a color: #49732B; text-decoration: underline;.art-blockcontent-body a:link,.art-blockcontent-body li a:link color: #49732B; text-decoration: underline;.art-blockcontent-body a:visited,.art-blockcontent-body a.visited,.art-blockcontent-body li a:visited,.art-blockcontent-body li a.visited color: #5C603E;.art-blockcontent-body a:hover,.art-blockcontent-body a.hover,.art-blockcontent-body li a:hover,.art-blockcontent-body li a.hover color: #619938; text-decoration: none;.art-blockcontent-body ul list-style-type: none; color: #15160E; margin: 0; padding: 0;.art-blockcontent-body ul li text-decoration: none; line-height: 1.25em; padding: px; background-image: url('../images/blockcontentbullets.png'); background-repeat: no-repeat; 36 / 61

37 /* end Box, BlockContent */ /* begin Button */.art-button-wrapper.art-button font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size: 14px; display: inline-block; vertical-align: middle; white-space: nowrap; text-align: left; text-decoration: none!important; color: #F3F8F2!important; width: auto; outline: none; border: none; background: none; line-height: 28px; height: 28px; margin: 0; padding: 0 9px!important; overflow: visible; cursor: default; z-index: 0;.art-button img,.art-button-wrapper img margin: 0; vertical-align: middle;.art-button-wrapper vertical-align: middle; display: inline-block; position: relative; height: 28px; overflow: hidden; white-space: nowrap; width: auto; margin: 0; padding: 0; z-index: 0; 37 / 61

38 .firefox2.art-button-wrapper display: block; float: left; input, select, textarea, select vertical-align: middle; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size: 14px;.art-block select width:96%;.art-button-wrapper.hover.art-button,.art-button:hover color: #F1F8EC!important; text-decoration: none!important;.art-button-wrapper.active.art-button color: #F4F5EF!important;.art-button-wrapper.l,.art-button-wrapper.r display: block; position: absolute; z-index: -1; height: 84px; margin: 0; padding: 0; background-image: url('../images/button.png');.art-button-wrapper.l left: 0; right: 8px; 38 / 61

39 .art-button-wrapper.r width: 409px; right: 0; clip: rect(auto, auto, auto, 401px);.art-button-wrapper.hover.l,.art-button-wrapper.hover.r top: -28px;.art-button-wrapper.active.l,.art-button-wrapper.active.r top: -56px;.art-button-wrapper input float: none!important; /* end Button */ /* begin Box, Post */.art-post position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px;.art-post-body position: relative; z-index: 1; padding: 12px;.art-post margin: 5px; 39 / 61

40 a img border: 0;.art-article img, img.art-article margin: 10px;.art-metadata-icons img border: none; vertical-align: middle; margin: 2px;.art-article table, table.art-article border-collapse: collapse; margin: 1px; width: auto;.art-article table, table.art-article.art-article tr,.art-article th,.art-article td background-color: Transparent;.art-article th,.art-article td padding: 2px; border: solid 1px #686D46; vertical-align: top; text-align: left;.art-article th text-align: center; vertical-align: middle; padding: 7px; pre 40 / 61

41 overflow: auto; padding: 0.1em; /* end Box, Post */ /* begin PostHeaderIcon */.art-post h2.art-postheader,.art-post h2.art-postheader a,.art-post h2.art-postheader a:link,.art-post h2.art-postheader a:visited,.art-post h2.art-postheader a.visited,.art-post h2.art-postheader a:hover,.art-post h2.art-postheader a.hovered margin: 0.2em 0; padding: 0; font-size: 24px; color: #263C16;.art-post h2.art-postheader a,.art-post h2.art-postheader a:link,.art-post h2.art-postheader a:visited,.art-post h2.art-postheader a.visited,.art-post h2.art-postheader a:hover,.art-post h2.art-postheader a.hovered margin: 0; text-decoration: none; color: #2D471A;.art-post h2.art-postheader a:visited,.art-post h2.art-postheader a.visited color: #565A3A;.art-post h2.art-postheader a:hover,.art-post h2.art-postheader a.hovered 41 / 61

42 color: #507F2F; /* end PostHeaderIcon */ /* begin PostBullets */.art-post ol,.art-post ul color: #101A0F; margin: 1em 0 1em 2em; padding: 0;.art-post li ol,.art-post li ul margin: 0.5em 0 0.5em 2em; padding: 0;.art-post li margin: 0.2em 0; padding: 0;.art-post ul list-style-type: none;.art-post ol list-style-position: inside;.art-post li padding: px; line-height: 1em;.art-post ol li,.art-post ul ol li 42 / 61

43 background: none; padding-left: 0;.art-post ul li,.art-post ol ul li background-image: url('../images/postbullets.png'); background-repeat: no-repeat; padding-left: 15px; /* end PostBullets */ /* begin PostQuote */ blockquote, blockquote p,.art-postcontent blockquote p color: #0E1608; font-style: italic; text-align: left; font-size: 12px; blockquote,.art-postcontent blockquote border: solid 1px #ADCDA8; margin: 10px 10px 10px 50px; padding: 5px 5px 5px 28px; background-color: #D3E9C3; background-image: url('../images/postquote.png'); background-position: left top; background-repeat: no-repeat; /* end PostQuote */ /* begin Footer */.art-footer position: relative; z-index: 0; overflow: hidden; 43 / 61

44 width: 984px; margin: 0 auto;.art-footer.art-footer-inner height: 1%; position: relative; z-index: 0; padding: 20px;.art-footer.art-footer-background position: absolute; z-index: -1; background-repeat: no-repeat; background-image: url('../images/footer.png'); width: 984px; height: 150px; bottom: 0; left: 0;.art-rss-tag-icon position: relative; display: block; float: left; background-image: url('../images/rssicon.png'); background-position: center right; background-repeat: no-repeat; margin: 0 5px 0 0; height: 22px; width: 22px; cursor: default;.art-footer.art-footer-text p margin: 0;.art-footer,.art-footer-text,.art-footer-text p 44 / 61

45 color: #26281A; text-align: center;.art-footer.art-footer-text,.art-footer.art-footer-text a,.art-footer.art-footer-text a:link,.art-footer.art-footer-text a:visited,.art-footer.art-footer-text a:hover font-size: 12px;.art-footer.art-footer-text a,.art-footer.art-footer-text a:link color: #2F4A1C; text-decoration: underline;.art-footer.art-footer-text a:visited text-decoration: none; color: #1E1F14;.art-footer.art-footer-text a:hover color: #477029; text-decoration: none; /* end Footer */ /* begin PageFooter */.art-page-footer,.art-page-footer a,.art-page-footer a:link,.art-page-footer a:visited,.art-page-footer a:hover font-family: Arial; font-size: 10px; letter-spacing: normal; word-spacing: normal; font-style: normal; font-weight: normal; 45 / 61

46 text-decoration: underline; color: #52824A;.art-page-footer margin: 1em; text-align: center; text-decoration: none; color: #767C50; /* end PageFooter */ /* begin LayoutCell, sidebar1 */.art-content-layout.art-sidebar1 background-color: #E1E3D3; width: 20%; /* end LayoutCell, sidebar1 */ /* begin LayoutCell, content */.art-content-layout.art-content width: 60%;.art-content-layout.art-content-sidebar1 width: 80%;.art-content-layout.art-content-sidebar2 width: 80%;.art-content-layout.art-content-wide width: 100%; text-align:left; /* end LayoutCell, content */ /* begin LayoutCell, sidebar2 */.art-content-layout.art-sidebar2 background-color: #E1E3D3; width: 20%; 46 / 61

47 /* end LayoutCell, sidebar2 */.overview-table.art-layout-cell width:33%;.overview-table-inner margin:10px; text-align:left; table.table width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; vertical-align:top; table.table, table.table tr, table.table td border:none; margin:0; padding:0; background-color:transparent; img.image margin:0; padding:0; border:none; /codecitation 47 / 61

48 Lataa valmis paketti Valmiina tuo kyseinen CSS-tiedosto templatedetails.xml ja kansiorakenne, zip-pakettina. Kuvat Kuvat laitetaan kansioon images. Eli kaikki kuvat tässä zip- paketissa. Template eli index.php Template on se osa sivustoa, johon tulee sivupohjan rakenne eli HTML koodit. codecitation style="brush: hml;" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="" lang="" dir="" > <!-- Tuossa yllä doctype ja tietoja selaimelle *********************************************************************************************** * MRA * Sivupohja * Kolme palstaa *********************************************************************************************** --> 48 / 61

49 <head> <!-- Metatiedot --> <jdoc:include type="head" /> <!-- CSS --> <link rel="stylesheet" href="templates//css/css_template.css" type="text/css" /> </head> /codecitation HUOM! Tyylitiedoston linkitys kuten tässä alla. Josatain syystä yllä oleva on väärin (Nappaa siihen sivun osoitetiedot). Muuta, että on kuin alla. Sitten laitetaan paikoilleen HTML:n loppuosa. Näin aluksi ilman Joomlan laajennuksia. codecitation style="brush: html;" <body> <div id="art-page-background-simple-gradient"> <div id="art-page-background-gradient"> <div id="art-main"> <div class="art-sheet"> <div class="art-sheet-tl"> <div class="art-sheet-tr"> <div class="art-sheet-bl"> <div class="art-sheet-br"> <div class="art-sheet-tc"> <div class="art-sheet-bc"> 49 / 61

50 <div class="art-sheet-cl"> <div class="art-sheet-cr"> <div class="art-sheet-cc"> <div class="art-sheet-body"> <div class="art-header"> <div class="art-header-png"> <div class="art-header-jpeg"> <div class="art-logo"> <h1 id="name-text" class="art-logo-name"><a href="#"></a></h1> <div id="slogan-text" class="art-logo-text"> <div class="art-nav"> <div class="l"> <div class="r"> navigaatio <div class="art-content-layout"> <div class="art-content-layout-row"> <div class="art-layout-cell art-sidebar1"> <div class="art-block"> <div class="art-block-tl"> <div class="art-block-tr"> <div class="art-block-bl"> <div class="art-block-br"> <div class="art-block-tc"> <div class="art-block-bc"> <div class="art-block-cl"> <div class="art-block-cr"> <div class="art-block-cc"> <div class="art-block-body"> <div class="art-blockheader"> <div class="l"> <div class="r"> <div class="t"> <div class="art-blockcontent"> <div class="art-blockcontent-body"> <!-- block-content --> Vasen palsta!!!!!!!!!!!!!! <!-- /block-content --> <div class="cleared"> 50 / 61

51 <div class="cleared"> <div class="art-layout-cell art-content"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner art-article"> <div class="art-postcontent"> <!-- article-content --> tekstii!!!!! <div class="cleared"> <div class="art-content-layout overview-table"> <div class="art-content-layout-row"> <div class="art-layout-cell"> <div class="overview-table-inner"> <!-- end cell --> <!-- end row --> <!-- end table --> <!-- /article-content --> <div class="cleared"> <div class="cleared"> <div class="art-post"> <div class="art-post-body"> 51 / 61

52 <div class="art-post-inner art-article"> <div class="art-postcontent"> <!-- article-content --> <!-- /article-content --> <div class="cleared"> <div class="cleared"> <div class="art-layout-cell art-sidebar2"> <div class="art-block"> <div class="art-block-tl"> <div class="art-block-tr"> <div class="art-block-bl"> <div class="art-block-br"> <div class="art-block-tc"> <div class="art-block-bc"> <div class="art-block-cl"> <div class="art-block-cr"> <div class="art-block-cc"> <div class="art-block-body"> <div class="art-blockheader"> <div class="l"> <div class="r"> <div class="t"> <div class="art-blockcontent"> <div class="art-blockcontent-body"> <!-- block-content --> oikea palsta!!!!!!!!!!!!!!!!! 52 / 61

53 <p><a href="ostamyy.php"><img src="images/ostamyy.jpg" width="148" height="103" align="left" valign="top" vspace="10" hspace="28" alt=""></a> </p> <div class="cleared"><div class="art-footer"> <div class="art-footer-inner"> <div class="art-footer-text"> <p>mäntyharjun Ratsastajat ry Copyright </p><p><a href="suojaa/index.php">ylläpito</a></p> <div class="art-footer-background"> <div class="cleared"> 53 / 61

54 <div class="cleared"> </body> </html> /codecitation Toiminnallisuus Toiminnalisuus saadaan mukaan lisäämällä sivupohjaan Joomlan märittelemä koodi. Navigaatio löytyy koodista kohdasta, jossa lukee navigaatio. Vaihda teksti. codecitation style="brush: xml;" <div class="r"> navigaatio /codecitation Tuon tilalle vaihdetaan, että onkin kuten alla. 54 / 61

55 codecitation style="brush: xml;" <div class="r"> <jdoc:include type="modules" name="menu" /> /codecitation Vasemmalle saadaan oma lohkonsa. codecitation style="brush: xml;" jdoc:include type="modules" name="vasen" /> /codecitation Samalla kaavalla oikea lohko. 55 / 61

56 codecitation style="brush: xml;" jdoc:include type="modules" name="oikea" /> /codecitation Sitten lopuksi sisältö. codecitation style="brush: xml;" <!-- article-content --> <jdoc:include type="message" /> <jdoc:include type="component" /> /codecitation Paketointi Lopuksi tehdään koko kansiosta zip-paketti. 56 / 61

57 Joomlassa ei kaikki vielä toimi, koska siellä ei välttämättä ole sen nimisiä moduuleja joihin viitataan. Esim vasen moduuli. codecitation style="brush: xml;" <p><a href="toimihenkilot.php" class="linkki2">toimihenkilöt</a></p> <p><a href="kentta.php" class="linkki2">mra-kentät</a></p> <p><a href="kartta.php" class="linkki2">mra-kentän sijainti</a></p> <p><a href="heppakerho.php" class="linkki2">heppakerho</a></p> <p><a href="pelisaannot.php" class="linkki2">pelisäännöt</a></p> <p><a href="mralehti.php" class="linkki2">mra-lehti</a></p> <p><a href="yhteytta.php" class="linkki2">ota yhteyttä</a></p> <p><a href="yhteistyo.php" class="linkki2">yhteistyössä</a></p> <p><a href="ullmax.php" class="linkki2">ullmax-tuotteet</a></p> /codecitation Tai oikea moduuli. codecitation style="brush: xml;" <div><a href=" target="blank"><img src="templates/mra/images/mantyharju.jpg" alt="mantyharju" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/logowoikoski.jpg" alt="woikoski" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img 57 / 61

58 src="templates/mra/images/suursavo.jpg" alt="suursavo" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/logokarikonautotalo.jpg" alt="karikonautotalo" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/logoagri.jpg" alt="agri" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/logopharmacare.jpg" alt="pharmacare" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/logorakuuna.jpg" alt="rakuuna" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/masek.jpg" alt="mäsek" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/logoflowdrinks.jpg" alt="flowdrinks" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/havulogo.jpg" alt="havuapteekki" style="margin: 0 auto; display: block; width: 95%;" /></a> <p> </p> <div><a href=" target="blank"><img src="templates/mra/images/suomenniemensaastopankki.jpg" alt="suomenniemensaastopankki" style="margin: 0 auto; display: block; width: 95%;" /></a> /codecitation Tarkista myös navigaatio, että se on nimeltään menu. 58 / 61

59 Jos ei ole niin vaihda. Katso, että nimi on oikein ja oikean sivupohjan kohdalla. 59 / 61

60 Viilailua Navigaatio voisi toimia toisin eli näin: codecitation style="brush: xml;".menu a,.menu a:link,.menu a:visited,.menu a:hover color: #000000; font-size: 60 / 61

61 15px; font-weight: bold; letter-spacing: normal; outline: medium none; padding: 3px 20px 0 0; text-align: left; text-decoration: none; word-spacing: normal; /codecitation Ja tuollainen se on valmiina. 61 / 61