Joomla poll / enquête css stijlen

Er is een voorbeeld enquête gemaakt en geplaatst in de voorbeeld website onderaan de rechterkolom. De module class suffix is "_voorbeeld". Naast de module zelf is er ook een pagina met enquête resultaten, wanneer geklikt wordt op de button van de module onderaan rechts.

De module enquête ziet er zonder aanvullende stijling als volgt uit.
(voor de resultatenpagina zie hierna)

Structuur 

Stijlen
We willen een aantal stijlen aanpassen voor de voorbeeld website. De tekst van de enquête items willen we iets kleiner maken, de items links laten lijnen en iets meer ondermarge met de buttons. Bovendien willen we de enquête items onderscheiden met een verschillende achtergrondkleur. Verder willen we iets meer onder en rechter marge van de gehele module. De toegepast stijlen zijn hieronder aangegeven.

div.moduletable_voorbeeld {
   padding: 0 10px 20px 0;
}

div.moduletable_voorbeeld h3 { }

div.moduletable_voorbeeld form { }

table.poll_voorbeeld { }
table.poll_voorbeeld td {}

table.pollstableborder_voorbeeld {
   text-align: left;
   font-size: 11px;
   margin-bottom: 10px;
}

table.pollstableborder_voorbeeld td.sectiontableentry2_voorbeeld {
   background-color: #cccccc;
}

table.pollstableborder_voorbeeld td.sectiontableentry2_voorbeeld input#voteid1 { }
table.pollstableborder_voorbeeld td.sectiontableentry2_voorbeeld label { }

table.pollstableborder_voorbeeld td.sectiontableentry1_voorbeeld { }

table.pollstableborder_voorbeeld td.sectiontableentry1_voorbeeld input#voteid2 { }
table.pollstableborder_voorbeeld td.sectiontableentry1_voorbeeld label { }

Na het toepassen van de stijlen ziet de module er als volgt uit.

Resultatenpagina 

De resultatenpagina ziet er zonder aanvullende stijling als volgt uit. 

Structuur

Er zijn 2 verschillende groottes van het lettertype in het resultatenoverzicht, terwijl het 1 grootte moet zijn. Dit komt door een eerdere stijling die we hebben toegepast bij de contact categorie lijst (font-size: 10px). We willen de lettergrootte van de contact categorielijst (tr.sectiontableentry1 en tr.sectiontableentry2) niet wijzigen, dus passen we de stijl hier ook toe op tr.sectiontableentry0. Hieronder zijn de stijlen weergegeven.

form#poll {
  text-align: left;
}

div.componentheading  { }
div.contentpane { }
table.pollstableborder { }

table.pollstableborder th.sectiontableheader {
	padding-bottom: 10px;
}

table.pollstableborder th.sectiontableheader img { }

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

table.pollstableborder tr.sectiontableentry1 { }

div.polls_color_1 { }
div.polls_color_2 { }
div.polls_color_3 { }
/* div.polls_color_etc */

table td.smalldark { }

Na stijling ziet de pagina er als volgf 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