Joomla contact categorie css stijlen

Indien uw website contactpersonen wil tonen kan van deze component gebruik worden gemaakt.  Er zijn 2 weergaven, een contact categorie (lijst) en de weergave van een enkel contactpersoon.

De contact categorielijst toont een overzicht van alle contactpersonen. Zonder aanvullende stijling ziet de pagina er als volgt uit

Structuur 

Er zijn veel inline stijlen in de tabel terug te vinden, die de breedte en de hoogte van de tabelcellen bepalen en dat is jammer, want zo kun je de breedte van de kolommen zelf niet meer stijlen. We zullen het hiermee moeten doen.

Stijlen

div.componentheading
Deze stijl is reeds gedefiniëerd. Zie div.componentheading.

div.contentpane
Deze stijl zijn we al tegengekomen bij Artikel categorielijst (table.contentpane). Dit is echter een nieuwe stijl voor de class contentpane, omdat deze is gekoppeld aan een div. We stijlen deze div zoals we de Artikel categorielijst hebben gestijld.

div.contentpane {
   border: 1px #999 dotted;
   padding: 10px;
 }

div.contentdescription
Dit is ook een bestaande stijl die al eerder is gebruikt bij Artikel categorie. Ook hier geldt dat het een nieuwe stijl is, omdat de eerdere class is genoteerd als "table.contentpane td.contentdescription". We zullen de eerdere stijl overnemen en de padding aanpassen.

div.contentdescription {
   font-family:Arial;
   font-size: 18px;
   font-weight: bold;
   color: #660000;
   line-height: 18px;
   padding: 5px 0 10px 0;
}

select.inputbox#limit Deze stijl vullen we niet in.

table td select.inputbox { }
table td select#limit { }

td.sectiontablefooter
Ook deze stijl zijn we eerder tegengekomen bij Artikel categorielijst (table.contentpane form table td.sectiontablefooter). Daar werd deze niet gestijld. Hier is het wel nodig om de paginatie, die in de table footer is opgeborgen, een beetje padding te geven. Dit betekent dat bij de Artikel categorie lijst deze padding ook wordt toegepast, tenzij we deze op 0 zetten. Doordat de stijl bij Artikel categorielijst een andere notering heeft zullen ze elkaar niet beïnvloeden.

table td.sectiontablefooter {
   padding-top: 10px;
}

span.pagenav
Deze stijl is reeds behandeld bij voorpagina blog layout span.pagenav.

td.sectiontableheader
Bij Artikel categorielijst hebben we de sectiontableheader gestijld als "table.contentpane td form table td.sectiontableheader" (font-weight: bold). Dat is prima. De notering van de class is hier anders (table td.sectionheader). We nemen de stijl van de Artikel categorielijst over.

table td.sectiontableheader {  
   font-weight: bold;
}

tr.sectiontableentry1, tr.sectiontableentry2 en a.category
Ook deze classen hebben we eerder behandeld bij Artikel categorielijst in een andere notering. We nemen de stijlen van Artikel categorielijst over. Daarbij nemen we ook een kleinere letter om de inhoud van de table op één regel te krijgen. Dit heeft ook gevolgen voor de tabel van de Artikel categorielijst, die nu ook een kleinere letter toont.

table tr.sectiontableentry1 {
   font-size: 10px;
}

table tr.sectiontableentry2 {
   background-color: #cccccc;
   font-size: 10px;
}

Na stijling ziet de pagina er als volgt uit.

• Toevoegen
• Zoeken

Commentaar (0)

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