Joomla! Discussion Forums

(deze startpost is nog niet af en wordt verder uitgebreid en afgemaa...)

[INLEIDING]
De afgelopen dagen heb ik geprobeerd een derde template af te krijgen. De eerste twee waren relatief makkelijk (kleinere aanpassingen), maar de derde heeft een wat drastischere aanpak nodig. Schuld is mijn vrijgezelle zusje van 25 (zo, nu ik attentie heb ) die haar site op mijn account bij mijn hoster host. Ze heeft een eigen site gemaakt die ik wil overzetten naar Joomla!, en dan vooral de lay-out.

Dus had ik het goede voornemen om vanaf de scratch te beginnen. Maak een folder met de template naam, en begin maar met typen Zoiets. Dit keer wil ik een template zelf maken in plaats van hem aanpassen van anderen. Dat is nog vrij lastig (lees hieronder). Ik open een topic omdat volgens mij een nederlandstalig overzicht (topic, faq, website etc) hoe een template bouwen vanaf nul niet bestaat (zo wel: sorry). Enerzijds wil ik mijn bevindingen hier van mij af schrijven (hoe heb ik dat en dat voor elkaar gekregen) en anderzijds wil ik een soort van opsomming krijgen die handig zijn bij het maken van een template in het nederlands.  Dat hoeft niet alleen, dus iedereen die mee wil helpen, mag ... meehelpen ;-)

Zoals ik hierboven al zei: ik heb al gezocht naar andere nederlandse resources, zoals Joomlaboek. Om uiteindelijk de uitkomst op bv joomlaboek neer te zetten, vind ik ok.
(kleine regel: het gaat dus niet om specifieke vraagjes over fontje zus of streepje zo maar meer om de grote lijn: hoe maak ik het. Dit topic is dus niet probleemgericht (X doet het niet) maar oplossingsgericht (als je X wilt, moet je Y instellen))

(hier komt dus een stappenlijst die steeds verder wordt uitgebreid)

[1. Wat heb je minimaal nodig]

• Voorkennis hoe je een programmeert is wel errug meegenomen
• Basiskennis hoe Joomla werkt
• een texteditor zoals Pspad
• een draaiende Joomla! site waar je jezelf op kunt uitleven (tip: draai m lokaal op je eigen pc met Abyss webserver)

[1.a Een aantal handige tools & applicaties]

CSS TOOLS

• CSS optimiser
  
• CSS div generator maak snel blokken in CSS
• 3 column generatorNog een generator, online. Nog niet uitgetest maar ziet er uitgebreid uit.
• Ronde CSS box maken. Huh? Jaja!
• CSS menu generatorMss niet direkt nodig bij het beginnen van een template, maar wel handig om te weten dat het bestaat
TABLE TOOLS

• Online en uitgebreide table editor
  
• Gebruik NVU (portable of geinstalleerde versie). Daarmee kun je vrij uitgebreid in een wysiwyg editor tabellen maken en aanpassen. Er zijn zelfs aanpassingen (zgn. extensies) voor NVU die het creëren van een template makkelijker maken.
Nog meer TOOLS

• NVU, nl-linkWebsites maken. Kijk gelijk uit naar de extensie Mambo template builder. Zelf werk ik altijd in Pspad (zie hierboven), maar af en toe wil ik iets (zoals tables) gewoon grafisch creëeren. Dat kan hiermee.
  
• Een online template generator! Dus levert een complete template af ...
• Een Template XML generator

[2. Folders & files aanmaken]
Uiteindelijk moet de template folder er zo uit komen te zien:
+- template_name/
      |
      +- index.php
      |
      +- template_thumbnail.png 
      |
      +- templateDetails.xml
      |
      +- css/
      |    |
      |    +- template_css.css
      |
      +- images/
(bron)

[3. het aanmaken van een stylesheets (.css) in /css]

• Op joomlaboek staat een mooie basisfile. Jammergenoeg onleesbaar omdat er geen enters tussen staan (geen link omdat je moet inloggen).
• Op Joomlart staat ook een template voor een templatecss: hier dus met tussen de /* */ commentaar waar een tagselector toe dient.
• Een blank CSS door webguy / Rene voorgesteld
Nog doen: één "ultieme" startCSSfile maken uit al deze voorstellen

[3.* CSS hacks: verschillen tussen browser teniet doen]
(tijdelijk)
Voorlopig verwijs ik naar mijn website, waar ik een artikel daarover heb geschreven. Als je duits kunt lezen, kijk dan ook eens hier.
Meer tips & aanvullingen welkom!
(tijdelijk)

[4. Het maken van een index.php]

[4.* lijstje met codes die je kwijt kunt in een index.php]
Code:
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top');?>
<?php mosLoadModules('right');?>

Zo definieer je de verschillende modules (top, user1, banner etc). Natuurlijk horen ze op een logische plaats te staan.
Code:
<?php mosMainBody(); ?>



[4.* Template: Tabel of CSS?]
Een template moet worden opgebouwd. Naast de code zelf moet de code ook weten waar hij (zij) komt te staan op het scherm. Dat doe je door de lay-out te ontwerpen en alles een plekje te geven. Heel erg basically, zou je het kunnen doen met html alleen ... maar dat is wel erg, erg achterhaald (als iemand een voorbeeld heeft ...). Daarnaast kun je ook met frames gaan werken, wat tegenwoordig steeds minder wordt gebruikt. 

Wil je het goed doen (op de toekomst gericht) dan moet je 100% boxen creëeren in CSS (naja, dit is uiteindelijk een mening ...). Maar het probleem is dat CSS compatibiliteitsproblemen heeft. Stel je iets in voor Firefox, dan wordt het heel anders opgebouwd in IE ... Voordeel van CSS is dat het sneller laadt en makkelijker werkt.
Dan hebben we nog tabellen. De goede, oude, vertrouwde tabellen. Je weet wat je eraan hebt en als je eenmaal de code's kent kun je er heel goed mee werken. Zo kun je bv bij ontwikkelen even de border op 1 zetten, zodat je precies ziet in de output waar je moet wezen. Nadeel is dat je relatief veel code krijgt en dat de site pas wordt opgebouwd als de client de eindtag

(gereserveerd)
(omdat het hierboven een lap tekst wordt, heb ik de eerste 2 post alvast voor mij gereserveerd , zodat ik weet dat alles onder elkaar komt (startpost & 1e twee reply's). Tzt kan ik wat tekst naar beneden verplaatsen (bv alle bronnen in de tweede reply) Dat wil niet zeggen dat alles van mijn hand is (ik knip en plak ook maar alles overal vandaan). Maar het is handiger voor het centrale karakter.)

(gereserveerd)
(zie hierboven)

Op zoek naar een blanco template_css.css? Zie de bijlage.
Deze blanco template_css.css bevat alle CSS definities die Joomla gebruikt. Je hoeft ze alleen nog maar in te vullen

Daarna de zaak ff door een CSS compressor halen en hij haalt alles weg wat je niet gebruikt EN maakt hem een stuk kleiner qua formaat.

Ik gebruik deze altijd, http://cdburnerxp.se/cssparse/css_optimiser.php

Works fine en met mijn nogal ruime opzet bij het schrijven van een CSS heeft ie meestal een uiteindelijke besparing van rond de 65% nadat ie door die compressor heen is gegaan (en dan staat ie gewoon op de default instelling).

Ga je de tutorial trouwens schrijven voor table of css based lay out. Voordeel van CSS lay outs is dat het de toekomst heeft, nadeel is dat je vaak wat hacks toe moet passen om de zaak cross browser proof te krijgen........ en dat het veeeeeel meer werk is om op te zetten.

Ik probeer de tutorial zowel CSS als table based rond te krijgen. Dat vraagt mss wel meer werk, maar is uiteindelijk wel 'completer'. Zelf dacht ik om eerst met table-based te beginnen, omdat dat wat makkelijker is (CSS heeft idd veel compatibiliteitsproblemen) en daardoor meer mensen naar dit topic worden aangetrokken. Zodoende zijn er op een gegeven moment genoeg mensen om te helpen bij een css-based template (hoop ik  )

Update startpost

• 1.a toegevoegd; wordt een tool opsommingslijstje. Nu staan er vooralsnog alleen CSS tools in
• CSS van webguy even gelinkt

Heel interessant! Ik denk dat veel Joomlisten hierop zaten te wachten. Toevallig ben ik gisteren ook begonnen aan een 'template from scratch' en dat valt echt niet mee.

Dat XML-bestand kun je dus maken vanuit Mambo zelf, begrijp ik... maar moet je dan je template al hebben geïnstalleerd?

Ben een beetje blond op dit gebied. Ik snap dat dat XML-ding een onderdeel moet zijn, maar hoe je het maakt begrijp ik eigenlijk niet. Via de tutorials word ik ook niet veel wijzer. Uitleg?

Jeroen

Even kijken ... zoals je ziet aan de laatste reactie heb ik het even naast me neergelegd (zoiets moet groeien )

dit is de directe link naar forge.joomla.org

Ik denk dat de gedachte erachter als volgt is: Als je een template bouwt, dan zul je wel een locale installatie draaien (het is natuurlijk ook mogelijk dit te doen dmv joomlaexplorer of een ftp client, maar dat is wat omslachtiger & tijdrovender. Op je eigen pc heb je meer controle). Installeer je deze client, dan kun je dus een XML genereren. Een beetje kip-ei verhaal is dit.

Om te beginnen moet je de folder structuur aanhouden zoals beschreven onder 2 hierboven. Dan ga je files "bouwen" die je op de juiste plek zet. Als laatste kun je een XML maken.

Ik heb net even zitten kijken, maar het enige wat de component doet, is een lijstje maken van de template folder die jij kiest. Het gaat niet kijken of de files die erin staan ook relevant zijn voor de template. Hij nam bij mij bv thumbs.db mee, iets wat Windowseigen is. Dat is dan weer jammer, want een check die de index.php doorloopt en alle dependencies naloopt zou geweldig zijn.
Aan de andere kant: je hoeft niet te lopen klooien met tags enzo (hoe je heet, email, versie). Dat gebeurt allemaal automatisch.

Zou misschien iemand een tutorial kunnen maken over templates die gebruik van collspan_offset zoals rhuk_solarflare?
Ik snap er de ballen van..

Er moet tog veel meer in het index.php bestantje? dan alleen






of ga je er van uit dat iedereen dat wel snapt 

heb bij een andere tutorial ook een Joomla extension voor DW geinstaleerd en is volgens mij erg makkelijk!

Uit de startpost


Welk deel van "deze startpost is nog niet af en wordt verder uitgebreid en afgemaa..." snap je niet? Als je waardevolle aanvullingen hebt, of een deel uitgevoerd wilt beschrijven, graag! Je ziet dat ik er de afgelopen weken geen tijd voor heb gehad om met dit topic bezig te zijn (druk, college, werk).

Even een handige aanvulling als je wilt weten of je site er ook in safari goed voor de dag komt: http://www.snugtech.com/safaritest/