 Joomla feed links css stijlen
Via de component "Newsfeeds" kunnen categoriën en links worden ingevoerd, die in een categorielijst worden getoond. We hebben in de voorbeeld website een link aangemaakt in het hoofdmenu "Feedlinks". Via dit menu-item wordt de categorielijst getoond. Zonder aanvullende stijling ziet de categorie lijst er als volgt uit.
Structuur
div.componentheading
table.contentpane(width="100%" cellpadding="4" cellspacing="0" border="0" align="center")
tr td (width="60%") form
table
tr td (align="right") Toon select.inputbox#limit
tr.sectiontableentry1
td (align="right" width="5") 1
td (height="20" width="90%") a.category Dutch Joomla
tr.sectiontableentry2
td (align="right" width="5") 2
td (height="20" width="90%") a.category Joomla! Developer - Vulnerability News
tr td.sectiontablefooter (align="center") span.pagenav a
Stijlen
Alle stijlen zijn reeds eerder behandeld. De onderstaande stijlen verwijzen naar de betreffende pagina.
div.componentheading
table.contentpane
select#limit
tr.sectiontableentry1 en tr.sectiontableentry2
td.sectiontablefooter
a.category
span.pagenav
Voor deze pagina zijn geen aanvullende stijlen opgenomen.
Pagina met feeditems
Wanneer op een feedlink wordt geklikt wordt een pagina getoond met de feitelijke feeditems. De pagina ziet er zondere verdere stijling als volgt uit.
Structuur
div (direction:ltr !important; text-align:left !important;)
div.componentheading
(direction:ltr !important;text-align:left !important;) Feedlinks
table.contentpane
td.componentheading
(direction:ltr !important;text-align:left !important;) a Voorpagina
td ul
li a Joomla!dagen op 12 en 13 juni
li a Joomla!website: A4 Midden Delfland
li Etc.
Stijlen
De volgende stijlen zijn al elders besproken. De link verwijst naar de pagina.
div.componentheading
table.contentpane
td.componentheading
Een nieuwe stijl hier is td.componentheading. Div.componentheading bestond al, maar door de koppeling van de class aan een tabel is deze nieuw. We gaan deze stijl invullen door de compenentheading bold te stijlen. Verder willen we deze keer de unorderd list een andere stijl geven. De stijlen zijn hieronder weergegeven.
div.componentheading { }
table.contentpane { }
table.contentpane td.componentheading { }
table.contentpane td.componentheading a,
table.contentpane td.componentheading a:visited {
font-weight: bold;
}
table.contentpane td.componentheading a:hover {
font-weight: bold;
}
table.contentpane td ul {
list-style: disc;
margin-left: 17px;
}
table.contentpane td ul li { }
table.contentpane td ul li a,
table.contentpane td ul li a:visited { }
table.contentpane td ul li a:hover { }
|