Joomla voorpagina / frontpage blog layout

De voorpagina (frontpage) wordt standaard opgemaakt in een blog layout, waarop meerdere artikelen worden getoond. Ook is het mogelijk om één enkel artikel te plaatsen zonder blog layout. Dit is afhankelijk van het ontwerp van de website en de gekozen menu instellingen. We gaan hier uit van een standaard blog layout, met één hoofdartikel over de volle breedte, gevolgd door 2 andere artikelen over 2 kolommen. 

Structuur

De stijlen van de voorpagina
Om de stijlen zichtbaar te maken in onze voorbeeld website is dummy tekst opgenomen met in totaal 7 artikelen. Op de voorpagina zelf zijn maar 3 artikelen zichtbaar. Artikel 1 over de volle breedte en artikel 2 en 3 in kolommen. De artikelen 4 t/m 7 zijn via een link onder aan de pagina (paginatie) bereikbaar (Meer artikelen…). We gaan één voor één de stijlen langs en passen deze toe op de voorbeeld website.

div.componentheading
De pagina opent met een div class componentheading. Deze class komt in ca. 30 Joomla bestanden voor (onder meer in: frontpage, category, section, archive, contact, mailto, newsfeed, poll, search, user). Wijziging van deze stijl geldt dan voor alle content waar deze stijl in voorkomt. In de voorbeeld website willen we de componentheading op dezelfde wijze stijlen als de h1 heading. Dit doen we mede omdat te veel verschillende tekst stijlen de website rommelig maakt. De componentheading is zichtbaar als in de backend administratie bij het menu-item voor de voorpagina onder parameters (systeem) een paginatitel is ingegeven en deze ook wordt getoond.

De componentheading wordt gestijld als h1 van de algemene stijlen. Dan is het ook handig om de class in de algemene stijlen op te nemen en de h1 class als volgt uit te breiden:

h1, div.componentheading {
   font-family:Arial;
   font-size: 22px;
   font-weight: bold;
   color: #660000;
   line-height: 22px;
   margin: 0 0 10px 0;
}

table.blog
Deze tabel omvat alle content tabellen van de blog layout. Voor tabellen in het algemeen was al een basis (reset)  stijl gedefiniëerd. Deze basisstijl geldt dus ook voor table.blog. Voor de voorbeeld website hoeven we geen specifieke stijlen voor table.blog te definiëren.

table.contentpaneopen
Deze stijl komt in meerdere content bestanden van Joomla voor (voorpagina, article, category, en section. In het blanco css bestand, dat u op deze site kunt downloaden, is al een stijl meegegeven van: width: 100%. Voor de voorbeeld website zijn voor table.contentpaneopen geen aanvullende stijlen gedefiniëerd.

td.contentheading
De contentheading willen we hetzelfde stijlen als de h3 heading van de algemene stijlen. Echter in plaats van ondermarge is hier (omdat het een tabel cel betreft) een onderpadding gebruikt. Daarnaast wordt de stijl notering voorafgegaan door de tabel, waar de contentheading deel van uitmaakt. Wanneer dit achterwege wordt gelaten werkt de padding stijl mogelijk niet. Voor de contentheading is de volgende stijl gedefiniëerd.

table.contentpaneopen td.contentheading {
   font-family: Arial;
   font-size: 18px;
   font-weight: bold;
   color: #660000;
   line-height: 18px;
   padding-bottom: 3px;
}

a.contentpagetitle
Wanneer in de algemene voorkeur instellingen van artikelen (of specifiek bij menu-items) de paginatitel (contenheading) wordt gelinkt (gelinkte pagina op ja is ingesteld) kan deze link worden gestijld.

Voor de voorbeeld website is de volgende stijl gebruikt.

a.contentpagetitle, a:visited.contentpagetitle {
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	padding-bottom: 3px;
}

a:hover.contentpagetitle {
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	padding-bottom: 3px;
}

td.buttonheading
Deze stijl is reeds besproken bij Buttonheadings 4.a.

span.small, td.createdate en td.modifydate
Geschreven door...
gemaakt op...
gewijzigd op...

Deze teksten worden over het algemeen wat kleiner gestijld dan de normale paragraaf tekst. Voor de voorbeeld website zijn de volgende stijlen gehanteerd.

/* Geschreven door ...*/
   span.small {
   font-family: Verdana;
   font-size: 10px;
   line-height: 10px;
   color: #666;
}

/* Gamaakt op ...*/ 
table.contentpaneopen td.createdate {
	font-family: Verdana;
	font-size: 10px;
	line-height: 10px;
	color: #666;
	padding-bottom: 5px;
}

/* Gewijzigd op ...*/
table.contentpaneopen td.modifydate {
	font-family: Verdana;
	font-size: 10px;
	line-height: 10px;
	color: #666;
}

a.readon Indien een artikel een Lees meer… functie heeft kan deze worden gestijld. Voor de voorbeeld website is de volgende stijl gedefiniëerd.

a.readon, a:visited.readon {
   display: block;
   font-family: Verdana;
   font-size: 12px;
   line-height: 16px;
   padding-top: 10px;
}

a:hover.readon {
   display: block;
   font-family: Verdana;
   font-size: 12px;
   line-height: 16px;
   padding-top: 10px;
}

span.article_separator
Met deze stijl kunt u de vertikale scheidingsruimte tussen artikelen of de ruimte onder een enkel artikel beïnvloeden. Voor de voorbeeld website is de volgende stijl gehanteerd.

span.article_separator {
   display: block;
   height: 25px;
}

td.article_column en td.column_separator
De class “article_column” geldt voor beide kolommen van de subartikelen. Om meer ruimte tussen de kolommen te maken kan het best gestijld worden met een padding-right. Voor de voorbeeld website is de volgende stijl gebruikt.

td.article_column {
   padding-right: 10px;
}

td.column_separator
De class “column_separator” geldt alleen voor de rechterkolom van de subartikelen. Hierdoor is het mogelijk om extra ruimte tussen de kolommen te maken en/of een border op te nemen (aan de linkerzijde van de kolom) als scheidingslijn tussen de kolommen. De kolommen zijn via een inline stijl op 50% gezet (even breed dus). Door toepassing van deze twee stijlen (article_comumn en column_separator) zal de tekst van de rechterkolom iets minder breed kunnen lopen dan de linkerkolom.

Voor de voorbeeld website is de volgende stijl gebruikt.

td.column_separator {
   border-left: 1px dotted #660000;
   padding-left: 10px;
}

De content van de voorpagina ziet er na het stijlen van alle bovenstaande classes als volgt uit.

Link naar meer artikelen
In de administratie module van de voorpagina kunnen we het aantal artikelen opgeven dat op de voorpagina maximaal getoond moet worden. In de voorbeeld website zijn dat er 3. Indien er meer artikelen zijn, zal onderaan de pagina (binnen de table.blog) hyperlinks worden opgenomen naar meer artikelen. In de voorbeeld website zijn er totaal 9 artikelen aanwezig.

div.blog_more
div.blog_more valt binnen een tabelcel van table.contentpaneopen. De inhoud van de cel lijnt standaard links, terwijl de paginanavigatie van de volgende cel is gecentreerd met een inline stijl. U kunt er voor kiezen om de eerst genoemde cel ook te centreren, zodat alles in lijn is met elkaar. Voor de voorbeeld website is gekozen om de hele paginanavigatie te centreren en een bovenmarge mee te geven, zodat deze los staat van de vorige celinhoud. De gehele paginanavigatie links laten lijnen kan met CSS stijling niet worden opgelost.

div.blog_more {
   text-align: center;
   margin: 10px 0 0 0;
}

div.blog_more ul {
   list-style: none;
}

div.blog_more ul li { }

a.blogsection
Dit zijn de hyperlinks van de paginanavigatie van de blogpagina’s. De links staan in een unordered list formaat dus worden er bullits geplaatst voor het listitem. Voor de voorbeeld website zijn links al gestijld. We willen hier geen andere stijling toepassen.

a.blogsection, a:visited.blogsection { }
a:hover.blogsection { }

span.pagenav
Dit zijn de teksten en links naar de volgende / vorige pagina’s binnen de paginatie. Deze span staat in een tabelcel van table.contentpaneopen. De celinhoud wordt gecentreerd door een inline stijl van Joomla. Dit is verder niet beïnvloedbaar, zonder het bronbestand aan te passen. De hyperlinks zijn bold gestijld om ze beter te onderscheiden van de niet gelinkte tekst. De stijlen zijn als volgt.

span.pagenav { }

a.pagenav, a:visited.pagenav {
	font-weight: bold;
}

a:hover.pagenav {
	font-weight: bold;
}

Hiermee is de content van de voorpagina volledig behandeld en ziet de pagina er als volgt uit.

• Toevoegen
• Zoeken

Commentaar (3)

• |94.212.184.xxx |10-02-2010 13:46:16 Inger  - Rechter kolom?
  td.column_separator is niet alleen voor de rechter kolom, ook voor alle volgende artikelen! Ik zoek iets waarmee ik ruimte tussen twee kolommen kan krijgen. Iemand tips?
  • 0
  • 0

  Antwoorden

• |87.210.250.xxx |26-04-2010 19:43:51 Willem Siebe Spoelstra  - blanco css
  Bij kopje table.blog staat nu voor een tweede maal dat er een code reeds in de css (blanco css) is opgenomen, ditmaal gaat het over table en table.td, nu kijk in het het blanco css bestand, maar daar staat helemaal niet de code al opgenomen die hier op deze pagina staat. Hoe komt dit?
  • 0
  • 0

  Antwoorden

• |81.34.168.xxx |27-04-2010 15:47:42 Rob van Oudheusden  - table.blog
  De code voor table.blog staat in het blanco css bestand op regel 187. Op die regel is echter geen stijlinformatie opgenomen en dus leeg. Aan de hand van de voorbeelden op deze site kunt u stijlinformatie toevoegen. Maar u kunt natuurlijk ook zelf uw eigen stijlgegevens opnemen.
  
  De stijl voor table en table.td is inderdaad gewijzigd en op deze site nog niet bijgewerkt. Dit zal worden gecorrigeerd. De stijl voor table zoals die nu in het blanco css bestand is opgenomen is de juiste (zie hieronder).
  
  table {
  border-collapse:collapse;
  border-spacing:0;
  }
  • 0
  • 0

  Antwoorden

Schrijf commentaar

Uw contact gegevens:

Naam:

Email: geen bericht bij reactiehoud me op de hoogte bij reactie

Website:

Commentaar:

Onderwerp:

Bericht:

Beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by !JoomlaComment 4.0 beta2