Een eigen Joomla template maken (17) – de homepage vullen en vormgeven
In het vorige artikel heb ik uitgelegd wat je zoal kunt instellen aan de homepage van Joomla. Dat bleek heel wat te zijn. Het eindresultaat ziet er ongeveer zo uit:
Bepalen welke artikelen op de homepage komen
In de Frontpage Manager van Joomla zie je welke artikelen op de homepage staan. Helaas kan je daar niet nieuwe artikelen selecteren. Dit doe je bij de inhoud van een artikel zelf.
1) Ga naar het overzicht van items: Content > Content by Section > News > News items.
2) Klik achter een item in de kolom Frontpage om het item op de homepage te zetten of juist van de homepage af te halen.
De items op de homepage vormgeven
De vormgeving van de items op je homepage wil je misschien aanpassen. Niet alleen om je eigen vormgeving beter weer te geven, maar ook omdat het stylesheet van Joomla geen rekening houdt met zoekmachine optimalisatie. Zo zou je elke titel binnen een header-H1 tag willen weergeven, omdat die beter scoren.
Helaas moet ik je hier teleurstellen. Het is niet mogelijk om de opbouw eenvoudig aan te passen zonder in de code te gaan hacken. Het schijnt dat dit in de volgende versie van Joomla wel mogelijk is.
1. vormgeving van de titel – Met de class .contentpagetitle kun je de vormgeving met CSS wel wat aanpassen. De weergave van de titel in mijn template is:
color:#000000;
font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif;
font-size:13px;
font-weight:bold;
margin:1.5em 0pt 0pt;
text-decoration:none;
}
.contentheading a:hover{
text-decoration:underline;
}
Hier staat dat je bij een mouseover een lijn ziet onder de titel, en anders niet.
2. vormgeving van de datum – Met de class createdate kun je datum van het artikel aanpassen:
color:#666666;
font-size:0.95em;
text-align:left;
line-height: 0.8em;
}
.contentpaneopen .createdate{
padding-bottom: 15px;
}
(Als je datumweergave zelf wilt aanpassen, dan is dit minder eenvoudig. Hierover wellicht later meer.)
3. vormgeving van de verder lezen link – Helaas staat in de Joomla code de uitlijning van het linkje hard ingeprogrammeerd. Hierdoor heeft een stylesheet er geen effect op. Het moet helaas links blijven staan.
Hoe nu verder?
Je ziet dat je in dit artikel tegen een aantal problemen aanloopt. Het komt nu duidelijk naar voren dat er in Joomla (te) veel hard gecodeerd staat. Dit is echt jammer en ik hoop dat dit in een volgende versie verbeterd zal worden. Verder werkt Joomla hier volledig met tabellen in plaats van divs. Dit beperkt je ook behoorlijk.
Je kan wel zaken aanpassen, maar dat betekent dat je eigen componenten moet gaan schrijven of moet gaan hacken in de broncode van Joomla. Dat laatste raad ik je ten zeerste af.
In een volgend artikel zal ik ingaan op de invulling van de 2 rechterkolommen in mijn ontwerp.
Artikelenserie - Een Joomla template maken
- Een eigen Joomla template maken (1) – inleiding
- Een eigen Joomla template maken (2) – templateDetails.xml
- Een eigen Joomla template maken (3) – modules en posities
- Een eigen Joomla template maken (4) – rechten, locaties en volgorde
- Een eigen Joomla template maken (5) – de header van index.php
- Een eigen Joomla template maken (6) – de body van index.php
- Een eigen Joomla template maken (7) – de footer van index.php
- Een eigen Joomla template maken (8) – inleiding in CSS
- Een eigen Joomla template maken (9) – basisstructuur
- Een eigen Joomla template maken (10) – een nieuwe index
- Een eigen Joomla template maken (11) – een nieuwe header
- Een eigen Joomla template maken (12) – een nieuwe body met includes
- Een eigen Joomla template maken (13) – logo, omschrijving en zoekveld
- Een eigen Joomla template maken (14) – de navigatie (dl 1)
- Een eigen Joomla template maken (15) – de navigatie (dl 2)
- Een eigen Joomla template maken (16) – de body aanpassen van de homepage
- Een eigen Joomla template maken (17) – de homepage vullen en vormgeven
- Joomla Template (18) – Artikelen toevoegen aan Joomla (1)
- Joomla Template (19) – Artikelen toevoegen aan Joomla (2)
gerard dijkstra
13.09.07 - 9:25
Ik kom in veel tutorials tegen dat je beter Firefox gebruiken kunt om de tussentijdse resultaten te izien dan IE, omdat IE vaak terugvalt in de "quirksmode ".
Wat is precies de "quirksmode "
Nogmmals de complimenten voor de heldere uitleg
Gerard
Theo Bakker
13.09.07 - 12:56
Dag Gerard,
ik had eerlijk gezegd nog niet van die term gehoord. Even nagezocht: Quirksmode staat tegenover standaard mode. Het houdt in dat een browser zo is gemaakt dat als een pagine niet aan de W3C standaarden voldoet, naar een oude implementatie van de browser wordt teruggegrepen (met zijn eigenaardigheden [de quirks]). Met andere woorden: wil je zeker weten of een webpagina werkt volgens de standaarden, gebruik dan Firefox, anders loop je het risico dat je je ontwerp / implementatie moet herzien. Leuk onderwerp overigens. Ik zal er wat over gaan schrijven. Zie ook http://en.wikipedia.org/wiki/Quirks_mode.
Groet, Theo
Nico Braakman
08.10.07 - 17:56
Mooie uitgebreide beschrijving van hoe een template in elkaar steekt. En het extraatje is dat het in het Nederlands is. Ik was al een heel eind gekomen met een template maar het wilde net niet helemaal lukken. Ik denk dat het nu wel goed komt.
Bedankt Theo
P.S. Uittesten in IE en FF verdient de aanbeveling, ze hebben beide hun eigenaardigheden.
frank
13.10.07 - 11:27
zojuist deze instructie serie gevonden voor een joomla template. De boel snel even doorgenomen maar gelijk bij de favorieten gezet. Ziet er prima uit. En je maakt gebruik van div's zag ik zo gauw! ;-)
Voor ik deze serie helemaal ga doorspitten heb ik nog een vraagje: Is dit ook geschikt voor het komende joomla 1.5?
Of gaat dat net weer anders?
Frank
Jurgen
19.10.07 - 18:12
Hey allemaal,
ik wil er even op wijzen dat niet alleen IE of Firefox, maar ook Opera bestaat… (naast zovele anderen)
Maar niet alleen de browser en versie maken een verschil. Wat op een Windows PC met Firefox prima draait, gaat soms in de soep op een Linux machine met dezelfde Firefox versie…
Ferdy Korpershoek
02.11.07 - 16:04
Beste Theo,
Wat een geweldige tutorial! Heel erg bedankt!
vriendelijke groeten,
Ferdy Korpershoek
interjrs
12.11.07 - 16:53
Allereerst dank voor je tutorial, erg duidelijk. Technisch heb ik al jaren ervaring met Joomla maar ik heb telkens andere templates met knip en plak werk aangepast aan m'n eigen behoefte. Nou eens aan de slag gegaan met nix en een eigen template gebouwd aan de hand van deze tutorial. Begint vorm te krijgen, nou nog die rot verschillen tussen Firefox en Expooier eruit zien te krijgen. Naja, met 2 verschillende stylesheets moet lukken.
Een opmerking / aanvulling: de "Lees verder" link heb ik aangepast met de volgende regels in m'n stylesheet:
.readon {
display:block;
text-align: left;
width:140px;
height:18px;
line-height: 18px;
margin: 1em 0;
}
a.readon:link, a.readon:visited, a.readon:hover {
color: #CCFF99;
text-decoration: none;
font-size: 11px;
}
Blijkt te werken. Wellicht dat je tutorial in eerste opzet was geschreven voor een oudere joomla versie. Deze "hack" werkt in ieder geval voor Joomla 1.0.13.
Grietz,
Joeri
Theo Bakker
12.11.07 - 17:03
Hoi Joeri,
interessant. Ga ik eens uitproberen.
Groet, T
Joomla Template (18) - Artikelen toevoegen aan Joomla (1)
17.11.07 - 9:46
[...] – Artikelen toevoegen aan Joomla (1)Bookmark / E-mail door In het vorige artikel heb ik uitgelegd hoe je de homepage van Joomla kunt aanpassen en hoe je bepaalt welke artikelen er staan. De standaard startpagina van Joomla is een nieuwsblog. [...]
Sander Vermeer
02.10.08 - 10:34
Hee Joeri,
ik ben nu 2 dagen aan de slag gegaan met jouw tutorial alleen het lijkt alsof deze niet af is… tenminste er staat niet bij wat je moet invullen in content.php, sidebar1.php en sidebar2.php!
nu zal i kzelf wel gaan stoeien met de php code, maar ik ben in feite designer die gevraagd is om een template aan te maken voor joomla…. oftewel mijn php skills zijn niet zo uitgebreid!
gr
Sander
Theo Bakker
09.10.08 - 18:43
Beste Sander,
je hebt gelijk – het is niet helemaal af. Ik ben inmiddels begonnen aan een nieuwe serie voor Joomla 1.5. Daarin kan meer dan waar ik tegenaan liep bij het maken van dit template. De link naar dit nieuwe tutorial vind je bovenaan deze pagina.
Groet, Theo
sjo
08.06.09 - 11:18
IE en FF is niks mis mee als je het mij vraagd maar joomla is gewoon niet zo bon
Thijs
11.06.09 - 22:54
Nou nu IE eindelijk op 8 zit, is croosbrowser compatibiliteit geen probleem, maar Joomla zelf heeft daar niks mee te maken sjo! Het template is niks anders dan XHTML/css.