CMS site met gestreepte lijsten

Om onderscheid te maken tussen vakken en rijbanen wordt er in het verkeer al eeuwen gewerkt met arceringen en strepen, denk bijvoorbeeld aan het zebrapad.

Op een CMS site kan het aanbrengen van zebra kleuren er voor zorgen dat een element beter leesbaar wordt of meer opvalt.

Introductie

In dit artikel wordt aan de hand van verschillende voorbeelden uitgelegd hoe een ongesorteerde lijst (ul) voorzien kan worden van gekleurde (zebra) strepen. Bij ieder voorbeeld wordt er eveneens aangegeven wat de voor of nadelen zijn.

CMS gebruikers of ontwikkelaars die met de Smarty Template Engine werken kunnen een methode inzetten die los van JQuery of CSS3 werkt.

De basis

Als basis wordt een lijst (ul) met de woorden Hoofddorp, Heemstede, Haarlem aangemaakt. In de voorbeelden 1..4 zal deze voorzien worden van grijze strepen.

CSS code:

body {
  font-size: 12px;
  font-family: arial, sans-serif;
}

ul {
	display: inline;
	float: left;
	width: 100px;
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
}

HTML code:

<div>
	<ul>
		<li>- Hoofddorp</li>
		<li>- Heemstede</li>
		<li>- Haarlem</li>
	</ul>
</div>

Voorbeeld 1: Normale CSS opmaak

Met standaard .css code is het mogelijk kleur aan te brengen op list-items.

• Voordeel: Werkt volledig cross-browser
• Nadeel: Op ieder li element moet een extra class (html code) worden toegevoegd, dit is niet voor iedere webredacteur even makkelijk.

HTML code:

<div class="voorbeeld_01">
	<ul>
		<li>Hoofddorp</li>
		<li class="even">Heemstede</li>
		<li>Haarlem</li>
	</ul>
</div>

CSS code:

.voorbeeld_01 ul li {
	display: inline;
	float: left;
	list-style: none;
	width: 100%;
	padding: 2px 2px 2px 2px;
	background-color: #999999;
}

.voorbeeld_01 ul li.even {
	background-color: #666666;
}

Voorbeeld 2: CSS3 nth-child pseudo selector

Er is een css selector (pseudo-selector) die nt-child heet. Hiermee is het mogelijk om op bijvoorbeeld het eerste of tweede, etc.. html element een afzonderlijke stijl toe te passen. De nth-child selector kan ook op even (even) of oneven (odd) elementen worden toegepast.

HTML code:

<div class="voorbeeld_02">
	<ul>
		<li>Hoofddorp</li>
		<li>Heemstede</li>
		<li>Haarlem</li>
	</ul>
</div>

CSS code:

.voorbeeld_02 ul li {
	display: inline;
	float: left;
	list-style: none;
	width: 100%;
	padding: 2px 2px 2px 2px;
	background-color: #999999;
}

.voorbeeld_02 ul li:nth-child(2n) {
	background-color: #666666;	
}

• Voordeel: Met de nth-child selector hoef je geen extra html code toe te voegen
• Nadeel: De nth-child selector is niet volledig cross-browser. Alleen de nieuwste browsers zoals Internet Explorer (> 9), FireFox (> 3), Safari en Google Chrome kennen werken goed met de nth-child selector.

Voor een nth-child compatibiliteits tabel zie: Quirksmode CSS contents and compatibility

Voorbeeld 3: Jquery syntax

Dit voorbeeld werkt via JQuery zorg ervoor dat deze bibliotheek goed wordt ingeladen.

JavaScript code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
	$(document).ready(function() {
			$("div.voorbeeld_03 ul li:nth-child(2)").addClass("even");
			// $("div.voorbeeld_03 ul li:even").addClass("even");
			// $("div.voorbeeld_03 ul li:odd").addClass("even");
	});
</script>

HTML code:

<div class="voorbeeld_03">
	<ul>
		<li>Hoofddorp</li>
		<li>Heemstede</li>
		<li>Haarlem</li>
	</ul>
</div>

CSS code:

.voorbeeld_03 ul li {
	display: inline;
	float: left;
	list-style: none;
	width: 100%;
	padding: 2px 2px 2px 2px;
	background-color: #999999;
}

.voorbeeld_03 ul li.even {
	background-color: #666666;
}

• Voordeel: Werkt volledig cross-browser
• Nadeel: Buiten CSS code zal er JavaScript code geschreven moeten worden.

Voorbeeld 4: CMS Site en Smarty

Met CMS Site is het eenvoudig om via een content blok een invulveld toe te voegen aan een website template. Door de WYSIWYG editor uit te zetten hoeft de webredacteur alleen teksten in te geven. Met behulp van Smarty zullen de regels die ingevuld zijn uitgelezen worden. Via een foreach loop worden deze 1 voor een uitgeprint in HTML.

Smarty code:

{content assign="_content_right" block='right' wysiwyg="false"}

{if isset($_content_right) }
	{assign var='_counter' value='1'}		
<ul>
	{assign var=_content_right_parts value="\n"|explode:$_content_right} 			
	{foreach from=$_content_right_parts item="item" name="loop"}
		{if isset($item)}
			{if $_counter % 2 == 0}
    <li class="even">
    		{else}
    <li>
    		{/if}
    {$_counter} - {$item}</li>
			{capture assign="_counter"}{math equation="1 + x" x=$_counter}{/capture}
		{/if}
	{/foreach}
</ul>
{/if}

• Voordeel: Werkt volledig cross browser. De webredacteur hoeft geen opmaak in te geven.
• Nadeel: Voor deze methode is de Smart Template Engine nodig, uiteraard heeft CMS Made Simple deze standaard geinstalleerd.

Tot slot

Tot nu toe heeft UpService in ontwikkelde website gebruik gemaakt van zowel de Smarty als Jquery methode. Zie bij voorbeeld de rechter kant op de Toeran website

De uitgewerkte voorbeelden kunnen ook toegepast worden op bijvoorbeeld tabellen of formulieren. Er is uitgegaan van 2 kleurtinten uiteraard kunnen dit er ook meer zijn. Buiten effen achtergrond kleuren kan er ook gewerkt worden met verlooptinten of afbeeldingen. Je fantasie is de enige beperking.

Video

Voor een werkend voorbeeld bekijk deze website of onderstaande video.