Type menu

Het soort menu dat we gaan gebruiken is de [wp]wp_nav_menu[/wp], met andere woorden: het type menu dat je makkelijk kunt aanmaken/aanpassen via Weergave -> Menu’s (mits je theme dit ondersteund).

Menu aanmaken

Als je er zeker van bent dat je theme deze menu’s ondersteund kun je een nieuw menu aanmaken. Als je al een menu hebt kun je die ook gebruiken natuurlijk.

Als je het menu hebt aangemaakt moet deze gekoppeld worden aan een thema locatie. Ik gebruik de theme Twenty Ten op mijn dev-installatie, deze heeft maar 1 thema-locatie.

Menu items aanmaken

Als het menu is opgeslagen en gekoppeld aan een thema locatie kunnen we beginnen met items toevoegen aan het menu. Ik heb in dit geval de pagina’s About, Shop, Cart, Checkout en Your Account toegevoegd.

Schermopties aanpassen

Wat je zo op het eerste gezicht niet ziet is dat de menu mogelijkheden in WordPress nog leuker zijn dan ze zo al lijken Als je bovenin op schermopties klikt krijg je onderstaande onderdelen te zien. Vink CSS classes en Beschrijving aan.

Na het aanvinken van deze twee eigenschappen krijg je twee extra invulvelden bij de menu-items (klik op een item om deze uit te klappen):

Je kunt nu dus een CSS class en beschrijving voor dat specifieke menu-item opgeven. Hier onder kun je zien wat ik heb ingevuld voor het menu-item Cart:

Vul de velden in voor alle menu-items (waar nodig/gewenst).

Weergave menu

Op dit moment hebben we een standaard uitklapmenu, mits de CSS in je theme dit ondersteund. Er is nog niks bijzonders aan en de extra informatie is nog niet te zien.

Om die info weer te geven maken we gebruik van de $walker die [wp]wp_nav_menu[/wp] heeft.

Open je header.php en zoek de code waarmee het menu wordt toegevoegd. In TwentyTen is dat de volgende regel:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

Vervang dat met de volgende regel:

<?php
    $walker = new My_Walker_Nav_Menu;
    wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => $walker ) );
?>

Als je geen custom theme gebruikt/aan het maken bent kun je het beste gebruik maken van een child theme, maar daar ga ik nu verder niet op in.

De walker aanmaken

Om de walker te kunnen gebruiken voor het customizen van de menu-weergave moeten we deze ook aanmaken natuurlijk. Voeg de volgende code toe aan de functions.php van je theme (heb je die niet, maak het bestand dan aan):

<?php
class My_Walker_Nav_Menu extends Walker_Nav_Menu
{
    function end_el(&#038;$output, $item, $depth)
    {
    $output .= "</li>

\n";
    } // end end_el

    function start_lvl(&#038;$output, $depth)
    {
        $indent = str_repeat("t", $depth);

        $level = $depth+1;
        $output .= "n$indent
<ul class="children level-$level">n"; // add level-X as a class for complex CSS possibilities
    } // end start_lvl

    function end_lvl(&#038;$output, $depth)
    {
        $indent = str_repeat("t", $depth);
        $output .= "$indent</ul>

\n";
    } // end end_lvl

    function start_el(&#038;$output, $item, $depth, $args)
    {
        global $wp_query;

        $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '
<li' . $id . $value . $class_names .'>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';

        // only display the description if we're not in the toplevel
        if ( $depth != 0 )
        {
          $item_output .= '
<div class="desc">' . $item->description . '</div>

';
        }

        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    } // end start_el
} // end class My_Walker_Nav_Menu
?>

Er is niet zo heel veel anders, ten opzichte van de default walker. Ik heb twee dingen toegevoegd:

<?php
        $output .= "n$indent
<ul class="children level-$level">n"; // add level-X as a class for complex CSS possibilities
?>

level-X class toegevoegd, waarbij X het niveau is van het submenu, dit geeft je meer mogelijkheden met CSS.

<?php
        // only display the description if we're not in the toplevel
        if ( $depth != 0 )
        {
          $item_output .= '
<div class="desc">' . $item->description . '</div>

';
        }
?>

De beschrijving van het item alleen weergeven als we niet in het hoogste niveau van het menu zitten.

Stijling

Als je nu de site ververst zul je zien dat het menu er nog niet helemaal geweldig uitziet, dit gaan we aanpassen met CSS. Onderstaande CSS heb ik gekopieerd uit mijn Dropdown navigatie 2.0 tutorial.

/* dropdown 2.0 */
ul#menu-2-0-navigatie li:hover { background:url('arrow-top.png') 10px 30px no-repeat; }
ul#menu-2-0-navigatie li a { color:#bbb; font-weight:bold; }
/* subitems - default */
ul#menu-2-0-navigatie li ul { display:none; position:absolute; top:35px; left:0; width:190px; background-color:#fff; border:1px solid #bbb; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px; -moz-box-shadow: 0 0 .5em #bbb; -webkit-box-shadow: 0 0 .5em #bbb; box-shadow: 0 0 .5em #bbb; /* >= IE8 */ }
ul#menu-2-0-navigatie li:hover ul { display:block; }
ul#menu-2-0-navigatie li ul li { padding:5px; display: block; line-height:normal; height:auto; border-bottom: 1px dotted #bbb; }
ul#menu-2-0-navigatie li ul li:last-child { border: 0; }
ul#menu-2-0-navigatie li ul li a,
ul#menu-2-0-navigatie li ul li:hover a { display:block; background: none; color: #000; }
ul#menu-2-0-navigatie li ul li a { padding: 5px 0;  }
ul#menu-2-0-navigatie li ul li a:hover { text-decoration:underline; }
ul#menu-2-0-navigatie li ul li .desc { font-style: italic; font-family: serif; }
ul#menu-2-0-navigatie li ul li ul { border:0; position:inherit; top:0; box-shadow:0 0 0; -moz-box-shadow:0 0 0; -webkit-box-shadow:0 0 0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; }

Bovenstaande CSS is voor het menu in TwentyTen, gebruik jij een ander theme? Pas dan de CSS aan aan de ID/classname van je menu. Gebruik voor zulke specifieke CSS (voor een specifiek item) liever niet de standaard .menu class die WP meegeeft.

Met bovenstaande CSS krijg je het volgende resultaat in TwentyTen, nog steeds een redelijk ‘basic’ uitklapmenu:

Customizen

Nu is het tijd om de item-specifieke CSS toe te gaan voegen. In mijn geval gaat het om de items met de volgende classes: .cart, .checkout en orders.

body ul#menu-2-0-navigatie .cart,
body ul#menu-2-0-navigatie .checkout,
body ul#menu-2-0-navigatie .orders {
  padding-left: 40px;
  min-width: 140px;
  min-height: 32px;
}
ul#menu-2-0-navigatie .cart,
ul#menu-2-0-navigatie .cart:hover { background: url('images/shopping_cart.png') 0 7px no-repeat; }
ul#menu-2-0-navigatie .checkout,
ul#menu-2-0-navigatie .checkout:hover { background: url('images/next.png') 0 7px no-repeat; }
ul#menu-2-0-navigatie .orders,
ul#menu-2-0-navigatie .orders:hover { background: url('images/user.png') 0 7px no-repeat; }

body ul#menu-2-0-navigatie .cart a,
body ul#menu-2-0-navigatie .checkout a,
body ul#menu-2-0-navigatie .orders a {
  width: 145px;
}

De icons die ik gebruikt heb komen uit het Iconika Red pakket van DryIcons.com

Veel meer mogelijk

Er zijn nog veel meer dingen mogelijk met de [wp]wp_nav_menu[/wp] en ook de stijling. Vandaar dat ik besloten heb om hier een serie aan toe te wijden.

HTML voor de navigatie

De HTML voor de navigatie bestaat uit ul's. Ik laat drie verschillende mogelijkheden zien, dus in de hoofd ul heb ik drie li's:

<ul id="mainnav">
<li class="side"><a href="#">Drie sub-blokken naast elkaar</a>
<ul>
<li>
<h2>Lorem ipsum</h2>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</li>
<li>
<h2>Dolor sit amet</h2>
<ul>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Dolor sit amet</a></li>
</ul>
</li>
<li>
<h2>Dolor sit amet</h2>
<ul>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Dolor sit amet</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Gewone dropdown</a>
<ul>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Dolor sit amet</a></li>
</ul>
</li>
<li class="img"><a href="#">Afbeelding naast item</a>
<ul>
<li class="afb1"><a href="#">Dolor sit amet <span class="description">consectetur adipiscing elit</span></a></li>
<li class="afb2"><a href="#">Dolor sit amet <span class="description">consectetur adipiscing elit</span></a></li>
<li class="afb3"><a href="#">Dolor sit amet <span class="description">consectetur adipiscing elit</span></a></li>
</ul>
</li>
</ul>

Stijling

Ik heb de stijling simpel gehouden. De hoofd-navigatie heeft een lichtgrijze achtergrond en de letters zijn midden-grijs. De stijling van de sub-items kun je uiteraard ook naar hartelust veranderen.

/* dropdown 2.0 */
ul#mainnav { width:100%; float:left; background-color:#eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
ul#mainnav li { display:block; float:left; position:relative; height:40px; padding:0 10px; line-height:40px; }
ul#mainnav li:hover { background:url('arrow-top.png') 10px 30px no-repeat; }
ul#mainnav li a { color:#bbb; font-weight:bold; }
/* subitems - default */
ul#mainnav li ul { display:none; position:absolute; top:35px; left:0; width:175px; background-color:#fff; border:1px solid #bbb; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px; -moz-box-shadow: 0 0 .5em #bbb; -webkit-box-shadow: 0 0 .5em #bbb; box-shadow: 0 0 .5em #bbb; /* >= IE8 */ }
ul#mainnav li:hover ul { display:block; }
ul#mainnav li ul li { width:100%; padding:5px; line-height:normal; height:auto; }
ul#mainnav li ul li a { display:block; }
ul#mainnav li ul li a:hover { text-decoration:underline; }
ul#mainnav li ul li ul { border:0; position:inherit; top:0; box-shadow:0 0 0; -moz-box-shadow:0 0 0; -webkit-box-shadow:0 0 0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; }

/* subitems - side */
ul#mainnav li.side ul { width:450px; float:left; }
ul#mainnav li.side ul li { width:130px; padding:10px; }
ul#mainnav li.side ul li h2 { border:1px solid #09f; background-color: #9cf; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px; color:#fff }
ul#mainnav li.side ul li ul { border:0; width:auto; padding:5px 0 0; }
ul#mainnav li.side ul li ul li { padding:5px; list-style:disc; list-style-type:disc; list-style-position:inside; width:100%; background:none; }
ul#mainnav li.side ul li ul li a { color:#bbb; }
ul#mainnav li.side ul li ul li a:hover { color:#09f }

/* subitems - img */
ul#mainnav li.img {}
ul#mainnav li.img ul { width:200px; }
ul#mainnav li.img ul li { background:url('arrows_white-border.png') no-repeat; height:40px; width:149px; padding:7px 5px 3px 50px; }
ul#mainnav li.img ul li.afb1 { background-position:0 0; }
ul#mainnav li.img ul li.afb2 { background-position:0 -92px; }
ul#mainnav li.img ul li.afb3 { background-position:0 -184px; }
ul#mainnav li.img ul li a {  }
ul#mainnav li.img ul li a:hover { color:#999; text-decoration:none; }
ul#mainnav li.img ul li span.description { width:100%; display:block; font-weight:normal; font-size:90%; }

Online demo

De online demo van deze tutorial vind je hier.

Als eerste moet je bedenken hoe je de bezoeker wilt laten zien dat ze een Quick Preview van het product kunnen openen. Ik gebruik er een afbeelding voor met de tekst ‘QUICKVIEW >’.

HTML

Zoals je kunt zien in bovenstaande afbeelding gebruik ik de IKEA producten weergave weer, hier zal ik niet weer alle HTML voor laten zien.

<li class="product">
<div id="quickviewID1" class="qv">
<div class="quickview">
<div class="alignleft">
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                    <img src="stoel.jpg" width="200" alt="Stoel" />
                </div>
<div class="alignright">
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rhoncus arcu eget velit varius vitae luctus felis consectetur. Nullam at sapien id felis bibendum consectetur. Donec sodales nibh dui. Maecenas pharetra varius mi, at porttitor nunc mattis ac. Donec sagittis adipiscing dolor vel vestibulum. Nam facilisis, tellus vitae cursus porta, elit lectus congue turpis, vel rutrum sem mauris sit amet orci. Fusce varius dictum fringilla. Sed et quam tellus. Aliquam erat volutpat. Nulla ac interdum lectus. Cras eu nisl ut augue laoreet posuere. Pellentesque mi ante, elementum quis ultrices nec, vestibulum nec magna. Nullam est metus, semper ac elementum quis, imperdiet ac tellus. Duis tincidunt mollis pulvinar. Donec felis risus, lacinia lobortis elementum vel, commodo ac lectus.
<p class="prod-price">&euro; 250,-
<hr />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
<div class="info">
<div class="prod-info">
                    <a href="#quickviewID1" title="Stoel" rel="shadowbox;height=400;width=600" class="quickview"><img src="quickview.png" class="quickview" width="100" height="40" alt="Quickview" /></a>
                    <img src="stoel.jpg" class="prod" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>

De HTML hierboven is voor 1 product, de weergave in het overzicht en wat er in de Quick Preview weergegeven moet worden.

De HTML voor de Quick Preview geïsoleerd:

<div id="quickviewID1" class="qv">
<div class="quickview">
<div class="alignleft">
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                    <img src="stoel.jpg" width="200" alt="Stoel" />
                </div>
<div class="alignright">
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rhoncus arcu eget velit varius vitae luctus felis consectetur. Nullam at sapien id felis bibendum consectetur. Donec sodales nibh dui. Maecenas pharetra varius mi, at porttitor nunc mattis ac. Donec sagittis adipiscing dolor vel vestibulum. Nam facilisis, tellus vitae cursus porta, elit lectus congue turpis, vel rutrum sem mauris sit amet orci. Fusce varius dictum fringilla. Sed et quam tellus. Aliquam erat volutpat. Nulla ac interdum lectus. Cras eu nisl ut augue laoreet posuere. Pellentesque mi ante, elementum quis ultrices nec, vestibulum nec magna. Nullam est metus, semper ac elementum quis, imperdiet ac tellus. Duis tincidunt mollis pulvinar. Donec felis risus, lacinia lobortis elementum vel, commodo ac lectus.
<p class="prod-price">&euro; 250,-
<hr />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>

De #quickviewID1 (id) moet voor elk product anders zijn, omdat je anders continue dezelfde Quick Preview opent (nou is dat in mijn voorbeeld niet zo erg, omdat hetzelfde product herhaald wordt, maar in een live website is dit niet wenselijk). Vergeet dus niet de ID van de div te veranderen, maar ook niet in de href van de link voor de Lightbox variant:

<a href="#quickviewID1" title="Stoel" rel="shadowbox;height=400;width=600" class="quickview"><img src="quickview.png" class="quickview" width="100" height="40" alt="Quickview" /></a>

CSS

Om de inhoud in Shadowbox te laten zien zoals je wil moet je CSS gebruiken, in mijn voorbeeld is dat de volgende CSS:

/* quick view */
div.qv, div.quickview { display:none; }
#sb-body div.quickview { padding:20px; width:540px; display:block; }

#sb-body, #sb-loading { background-color:#fff; }
#sb-body .alignleft { width:200px; display:block; float:left; }
#sb-body .alignright { width:260px; display:block; float:right; }

#sb-body h2 { text-transform: uppercase; margin: 0 0 .5em; padding: .5em 0; font-size: 1.4em; }
#sb-body h3 { font-size: 1.2em; margin: 0 0 .5em; padding: .5em 0 0; }
#sb-body p { font-size:1.2em; line-height:1.5em; margin:0 0 1em; }
#sb-body p.prod-price { font-weight: bold; font-size: 1.6em; line-height: 1.8em; }
#sb-body a { text-decoration: none; color: darkturquoise; }

Online demo

Ook van deze tutorial is weer een online demo te bekijken

Basis HTML

<ul id="products">
<li class="product">
<div class="info">
<div class="prod-info">
        <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
</ul>

In mijn vorige post hierover gebruikte ik hetzelfde product 5 keer, omdat we nu een dynamisch aantal producten hebben – en het willen integreren in Shopp – hebben we de HTML voor een product maar 1 keer nodig.

Shopp integratie

Deze tutorial is voor Shopp 1.1!

Als eerste is het belangrijk dat je Custom Templates hebt geactiveerd in je Shopp installatie (Shopp -> Settings -> Presentation). Pak daarna de category.php (in de shopp-map in de map van je theme).

De code

<?php if(shopp('category','hasproducts','load=prices,images')): ?>
<h1><?php shopp('category','name'); ?></h1>
<ul class="products">
<li class="row">
<ul>
    <?php while(shopp('category','products')): ?>
    <?php if(shopp('category','row')): ?></ul>
</li>
<li class="row">
<ul><?php endif; ?>
<li class="product">
<div class="info">
<div class="prod-info">
          <?php shopp('product','coverimage','height=75&#038;fit=height'); ?>
<h2 class="prod-title"><?php shopp('product','name'); ?></h2>
<p class="prod-desc"><?php shopp('product','summary'); ?>
<p class="prod-price"><?php shopp('product','saleprice','starting=Vanaf'); ?>
<div class="prod-more-info">
<hr noshade="noshade" />
            <?php if (shopp('product','has-savings')): ?>
<p class="savings"><?php _e('Bespaar','Shopp'); ?> <?php shopp('product','savings','show=percent'); ?>

            <?php endif; ?>

            <?php if(shopp('product','has-specs')): ?>
<h3>Specificaties</h3>
<dl class="details">
              <?php while(shopp('product','specs')): ?>
<dt><?php shopp('product','spec','name'); ?>:</dt>
<dd><?php shopp('product','spec','content'); ?></dd>

              <?php endwhile; ?>
            </dl>

            <?php endif; ?>

<a href="<?php shopp('product','url'); ?>" class="prod-link" title="<?php shopp('product','name'); ?> bekijken">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>

    <?php endwhile; ?>
    </ul>
</li>
</ul>
<div class="alignright"><?php shopp('category','pagination'); ?></div>

<?php else: ?>
  <?php if (!shopp('catalog','is-landing')): ?>
<h1><?php shopp('category','name'); ?></h1>

<?php _e('Er zijn geen producten gevonden.','Shopp'); ?>

  <?php endif; ?>
<?php endif; ?>

Eigenlijk alle code is hetzelfde als in vorige versies, maar een klein stukje niet: coverimage. Dit is de nieuwe code voor de thumbnail van het product en die heeft ook nieuwe mogelijkheden.

<?php shopp('product','coverimage','height=75&#038;fit=height'); ?>

De opties die ik heb opgegeven in deze tag betekenen dat de afbeelding 75pixels hoog wordt en dat de hoogte moet passen (breedte is dus variabel).

Stijling

Voor de stijling kun je gebruik maken van de CSS die ik heb opgegeven in de originele tutorial. Daarnaast kun je gebruik maken van de stijling van Shopp (in shopp.css, ook in de shopp-map van je theme).

Grid view

Als eerste hebben we een standaard grid view, gevuld met producten, nodig voor de product-overzicht pagina.

<ul id="products">
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
<li class="product last">
<div class="info">
<div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
<h2 class="prod-title">Stoel</h2>
<p class="prod-desc">Een bruin leren stoel
<p class="prod-price">&euro; 250,-
<div class="prod-more-info">
<hr noshade="noshade" />
<h3>Extra informatie</h3>

Lorem ipsum dolor sit amet.

<a href="#product" class="prod-link">Product bekijken &raquo;</a>
</div>
</div>
</div>
</li>
</ul>

Voor het gemak heb ik vijf keer hetzelfde product gebruikt (het wordt dus een grid-view met 5 producten op een rij).
Het laatste product heeft niet alleen de class product (de li), maar ook de class last.

Opmaak

Om het geheel te laten werken hebben we ook stijling nodig. Er komt dus geheel geen JavaScript aan te pas!

ul#products
{
  margin:0 0 2em;
}

ul#products li.product
{
  width:19.8%;
  height:200px;
  display:inline;
  float:left;
  border-right:1px solid #eee;
  position:relative;
  background:#fff;
  margin:0 0 2em;
}

ul#products li.product:hover
{
  border-right-color:#fff;
  z-index:9;
}

ul#products li.product .info
{
  display:block;
  background:#fff;
}

ul#products li.product .prod-info
{
  padding:1.1em;
}

ul#products li.product .info:hover .prod-info
{
  -moz-box-shadow:0 0 .5em #888;
  -webkit-box-shadow:0 0 .5em #888;
  box-shadow:0 0 .5em #888;
  filter:progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true);/* <= IE7 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true)"; /* >= IE8 */
  padding:1em;
  border:1px solid #eee;
}

ul#products li.product img
{
  margin:0 auto 5px;
  display:block;
}

ul#products li.product h2
{
  text-transform:uppercase;
  margin:0 0 .5em;
  padding:.5em 0;
  font-size:1.4em;
}

ul#products li.product p
{
  font-size:1.2em;
  margin:0 0 .5em;
  line-height:1.4em;
}

ul#products li.product p.prod-price
{
  font-weight:bold;
  font-size:1.6em;
  line-height:1.8em;
}

ul#products li.last
{
  border:none;
}

ul#products li.product a.prod-link
{
  text-decoration:none;
  color:darkturquoise;
}

ul#products li.product .prod-more-info
{
  display:none;
}

ul#products li.product .info:hover .prod-more-info
{
  display:block;
  width:100%;
}

De z-index:9; op ul#products li.product:hover zorgt ervoor dat de li boven andere elementen gezet wordt. Werkt deze niet bij jou? Dan kan het zijn dat het element (waar deze overheen moet gaan) een hogere z-index heeft. Je kunt de z-index zo hoog maken als je zelf wil (hou wel rekening met evt. Lightbox varianten, zij gebruiken ook een z-index om boven alle elementen te komen).

CSS3

Voor de schaduw maak ik gebruik van CSS3 in plaats van afbeeldingen:

-moz-box-shadow:0 0 .5em #888;
-webkit-box-shadow:0 0 .5em #888;
box-shadow:0 0 .5em #888;

In Internet Explorer wordt CSS3 (nog) niet ondersteund. IE heeft wel filters die eenzelfde resultaat geven (maar deze komen niet door de W3C validatie heen):

filter:progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true);/* <= IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true)"; /* >= IE8 */

Online demo

Natuurlijk heb ik ook een demo online gezet: IKEA product (grid view) nabootsing.

HTML & PHP

<div id="image">

            <script type="text/javascript">
      jQuery(function() {
        jQuery("#image .rposts").jCarouselLite({
          btnNext: "#buttons .alignright",
          btnPrev: "#buttons .alignleft",
          speed: 800,
          visible: 5
        });
      });
      </script>
<div id="buttons">
<div class="alignleft"><a href="#vorige" onclick="return false;"><em>&laquo; vorige</em></a></div>
<div class="alignright"><a href="#volgende" onclick="return false;"><em>volgende &raquo;</em></a></div>
</div>
<div class="rposts">
<ul class="recentposts"><?php
        $curpage = $post;
              $recentposts = get_posts('numberposts=10&#038;orderby=date&#038;order=DESC');
        foreach ($recentposts as $post): setup_postdata($post);

              if(function_exists('wct_display_thumb'))
        {
          if(wct_display_thumb() != '')
          {
            ?>
<li <?php echo ( $curpage->ID == get_the_ID() &#038;& !is_home() ) ? ' class="current"' : ''; ?>><a href="<?php the_permalink(); ?>" title="<?php the_title(''); ?>">
              <?php echo wct_display_thumb(); ?>
<div class="item">
                              <span class="title"><strong><?php the_title(''); ?></strong></span>
                                <span><strong>Gepost op:</strong> <?php the_time('j M.');?></span>
                                <span class="comments"><?php $comments = get_comments('post_id='.get_the_ID()); $comments = count($comments); echo ( $comments == 1 ) ? $comments.' reactie' : $comments.' reacties'; ?></span>
                            </div>

                        </a></li>

<?php
          } // endif
        } // endif
      ?>

            <?php endforeach; rewind_posts(); $post = $curpage; ?></ul>
</div>
</div>

De code die je hierboven ziet is gekopieerd uit mijn theme en dus precies wat ik ook gebruik.

Voor de carousel gebruik ik jCarouselLite, als je het carousel effect ook wilt gebruiken (en de jQuery niet aan wilt passen) zul je deze dus ook moeten downloaden.

Uitleg code

Zoals je ziet gebruik ik de WP-Choose-Thumb plugin voor de post-thumbnails. De plugin pas ik elke update aan zodat de afbeelding niet meteen ge-echo’d wordt, dit om te kunnen checken of de post een thumbnail heeft of niet:

<?php if(wct_display_thumb() != '') ?>

Deze code zorgt ervoor dat als de functie wct_display_thumb geen waarde heeft, de post ook niet wordt weergegeven. Maar, nogmaals, hiervoor heb ik de WP-Choose-Thumb plugin dus voor aangepast, standaard geeft de wct_display_thumb meteen de afbeelding terug.

<li <?php echo ( $curpage->ID == get_the_ID() &#038;& !is_home() ) ? ' class="current"' : ''; ?>

Bovenstaande code zorgt ervoor dat de li (waar de image en info v/d post in staat) de class current krijgt als je die post op dat moment aan het bekijken bent.

<span class="comments"><?php $comments = get_comments('post_id='.get_the_ID()); $comments = count($comments); echo ( $comments == 1 ) ? $comments.' reactie' : $comments.' reacties'; ?>

Dit stukje code zorgt ervoor dat het juiste woord bij het aantal reacties wordt weergegeven (dat er dus niet iets als ’1 reacties’ of ’10 reactie’ komt te staan).

CSS

Met alleen bovenstaande code ben je er natuurlijk nog niet, de weergave van de header lijkt namelijk totaal nog niet op dat wat ik op mijn blog heb.

#header #image ul,
#header #image ul li { width:960px; height:200px; display:block; float:left; }
#header #image ul li { overflow:hidden; text-align:center; }
#header #image #buttons { z-index:9; }
#header #image #buttons .alignleft,
#header #image #buttons .alignright { position:absolute; top:85px; z-index:8!important; }
#header #image #buttons .alignleft { left:-23px; }
#header #image #buttons .alignright { right:-27px; }
#header #image #buttons .alignleft a,
#header #image #buttons .alignright a { width:46px; height:46px; display:block; float:left; }
#header #image #buttons .alignleft a { background:url('../img/arrows_white-border.png') 0 -46px no-repeat; }
#header #image #buttons .alignleft a:hover { background-position:0 -138px; }
#header #image #buttons .alignleft a:active { background-position:0 -230px; }
#header #image #buttons .alignright a { background:url('../img/arrows_white-border.png') 0 0 no-repeat; }
#header #image #buttons .alignright a:hover { background-position:0 -92px; }
#header #image #buttons .alignright a:active { background-position:0 -184px; }
#header #image #buttons a:hover { text-decoration:none; }
#header #image #buttons .alignleft a em,
#header #image #buttons .alignright a em { display:block; font-size:0; color:#fff; }

#header #image ul.recentposts { width:960px; height:200px; overflow:hidden; display:block; float:left; padding:20px 0 0!important; background:transparent; border:0; position:absolute; top:0; left:0; z-index:2!important; }
#header #image ul.recentposts li { width:192px; display:inline; display:block; float:left; text-align:center; font-size:.8em; }
#header #image ul.recentposts li a { position:relative; width:156px; height:156px; display:block; margin:0 18px; background-color:#fff; text-decoration:none; }
#header #image ul.recentposts li a img { border:4px solid #ddd; padding:1px; }
#header #image ul.recentposts li.current a img,
#header #image ul.recentposts li a:hover img { border-color:#f06; }
#header #image ul.recentposts li a .item { position:absolute; display:none; top:5px; left:5px; z-index:2; width:150px; height:150px; background-color:#333; color:#fff; opacity:.85; -moz-opacity:.85; filter:alpha(85); }
#header #image ul.recentposts li a .item span { padding:0 10px; margin:0 0 10px; font-size:.8em; display:block; width:130px; clear:both; }
#header #image ul.recentposts li a .item span.title { font-size:.9em; padding:10px; }
#header #image ul.recentposts li a .item span.comments { position:absolute; left:0; bottom:0; margin:0; width:130px; padding:5px 10px; display:block; background-color:#f06; color:#fff; font-size:.9em; font-weight:bold; border-top:1px solid #fff; }
#header #image ul.recentposts li a:hover .item { display:block; }

Ik heb mijn div id=image in een div id=header staan. Je bent natuurlijk vrij om dit anders te doen, vergeet dan niet de CSS ook aan te passen.

In de afbeelding hierboven lijkt het misschien 1 achtergrond, maar het zijn er echt twee. Dat kun je in het online voorbeeld zien, als je de pagina scrollt zul je namelijk zien dat de afbeelding in de rondjes verandert.

De CSS

html, body { margin:0; padding:0; height:auto; min-height:100%; _height:100%; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; }
html { background: url('pattern.gif') 0 0; }
body { background: url('body-bg.png') 0 0 fixed; font-size:.8em; clear:both; }

Zoals je in de CSS kunt zien geef je de html & body een hoogte van 100%. Dit is belangrijk voor als de content niet genoeg is om het scherm te vullen. Anders krijg je onderin een stuk ‘leeg’.

Dan zie je hoe een achtergrond aan de html & body wordt toegevoegd. Zorg er wel voor dat de achtergrond voor de body groot genoeg is voor grote beeldschermen (bij dit voorbeeld zul je de rondjes aan de rechterkant nog eens zien op een 24″ beeldscherm bijvoorbeeld).
De body heeft een bgproperty fixed, hierdoor blijft de grijze achtergrond op z’n plaats en zie je de html achtergrond er doorheen bewegen.

Klein beetje code

Om je login-pagina te customizen heb je maar een klein beetje code nodig:

<?php
add_action('login_head', 'my_custom_login', 0);
function my_custom_login()
{
  echo '
<link rel="stylesheet" type="text/css" media="all" href="'.get_bloginfo('template_directory').'/css/login.css" />';
} // end my_custom_login
?>

Met bovenstaande code voeg je login.css aan de header van wp-login.php toe. In dat CSS bestand moet je de standaard CSS van WordPress overschrijven (helaas kun je de stylesheets die door WordPress zelf worden ingeladen niet gemakkelijk – zonder wp-login.php te bewerken – verwijderen).

Mijn CSS

html body { border-top:30px solid #efefef!important; background:#efefef url('../img/body_bg.jpg') 0 0 repeat-x; font-size:1em; line-height:1.2em; font-family: Arial, Helvetica, sans-serif; font-weight:normal; color:#000; }

/* link - terug naar de site */
body.login p#backtoblog { position:absolute; margin:0; padding:0; top:0; left:0; width:75%; }
body.login p#backtoblog a { color:#000; font-size:.8em; text-decoration:none; }
body.login p#backtoblog a:hover { color:#000; text-decoration:underline; }

/* logo */
body h1 { width:204px; height:52px; padding:0 0 20px; display:inline; display:block; margin:0 auto; overflow:hidden; }
body h1 a { width:204px; height:52px; display:inline; display:block; float:left; background:url('../img/logo.gif') 0 0 no-repeat; text-decoration:none; text-indent:-9999px; }

/* login div */
body #login { width:320px; margin:8.4em auto 0; }

/* form */
body form { margin-left:8px; padding:16px; font-weight:normal; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background:#fff; -moz-box-shadow:none; -khtml-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; }
body form label { color:#000; font-size:1em; font-weight:bold; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-transform:lowercase; padding:0 0 0 5px; }
body form input { color:#000; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
body #login form p { margin-bottom:0; }
body form p { margin-bottom:24px; }
body form #user_pass,
body form #user_login,
body form #user_email { font-size:1em; width:97%; padding:3px; margin-top:2px; margin-right:6px; margin-bottom:16px; border:1px solid #000; background:#fff; }
body form #user_pass:focus,
body form #user_login:focus,
body form #user_email:focus { outline-color:#bdd73c; }
/* submit button */
body form .button-primary { padding:5px 10px; font-size:.9em; border:none; background:#000 none; color:#fff; font-weight:bold; text-transform:lowercase; cursor:pointer; text-decoration:none; margin-top:-5px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
body form .button-primary:hover { background-color:#bdd73c; color:#000; text-shadow:none; }
/* checkbox - gegevens onthouden */
body form .forgetmenot { font-weight:normal; float:left; margin-bottom:0; }
body form .forgetmenot label { font-weight:normal; padding:0; font-size:.7em; line-height:.7em; }
body form .forgetmenot label input#rememberme { margin:0 2px 0 0; display:inline-block; }

body form .submit,
body .alignright { float:right; }

/* error | message */
body #login_error,
body .message { margin:0 0 16px 8px; border:1px solid; padding:12px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

/* ww vergeten link etc. */
body.login p#nav { margin:0 0 0 8px; padding:16px; }
body.login p#nav a { color:#000!important; font-size:.8em; text-decoration:none; text-shadow:none; }
body.login p#nav a:hover { color:#09c!important; text-decoration:underline; }

Extra code

Om je login-pagina nog wat meer te customizen kun je de volgende snippets ook toevoegen. De eerste zorgt ervoor dat de URL waarnaar het logo linkt wordt verandert naar de URL van je WP-site:

<?php
add_filter('login_headerurl', 'change_wp_login_url');
function change_wp_login_url()
{
  return get_bloginfo('url');
} // end change_wp_login_url
?>

De volgende snippet zorgt ervoor dat de title van de link (van het logo) wordt gewijzigd naar de titel en tagline van je WP-site:

<?php
add_filter('login_headertitle', 'change_wp_login_title');
function change_wp_login_title()
{
  return get_bloginfo('title').' - '.get_bloginfo('description');
} // end change_wp_login_title
?>

Mijn custom login

De custom login van illutic WebDesign ziet er zo uit:

HTML voor de navigatie

<ul id="navigatie">
<li><a href="#pagina">Geen subpagina's</a></li>
<li><a href="#pagina">Twee niveau's</a>
<ul>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Pagina</a></li>
</ul>
</li>
<li><a href="#pagina">Drie niveau's</a>
<ul>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Heeft submenu</a>
<ul>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Pagina</a></li>
</ul>
</li>
<li><a href="#pagina">Pagina</a></li>
</ul>
</li>
<li><a href="#pagina">Vier niveau's</a>
<ul>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Heeft submenu</a>
<ul>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Heeft submenu</a>
<ul>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Pagina</a></li>
<li><a href="#pagina">Pagina</a></li>
</ul>
</li>
<li><a href="#pagina">Pagina</a></li>
</ul>
</li>
<li><a href="#pagina">Pagina</a></li>
</ul>
</li>
</ul>

Het resultaat dat je hebt met bovenstaande HTML is het volgende:

CSS

Met alleen de HTML ziet de navigatie er nog ongelooflijk kaal uit natuurlijk. De CSS voor alle vier de niveau’s:

/* navigatie - niveau 1 */
ul#navigatie { width:740px; height:40px; display:block; float:left; background:#bbb url('bg.gif') 0 0 repeat-x; }
ul#navigatie li { position:relative; height:40px; display:block; float:left; }
ul#navigatie li a { font-weight:bold; color:#fff; padding:12px 10px; display:block; }
ul#navigatie li:hover a,
ul#navigatie li a:hover { background:#bbb url('bg.gif') 0 -40px repeat-x; }
/* navigatie - niveau 2 */
ul#navigatie li ul { position:absolute; top:40px; display:none; width:175px; z-index:2; }
ul#navigatie li:hover ul { display:block; }
ul#navigatie li ul li { clear:both; height:auto; width:100%; }
ul#navigatie li:hover ul li a,
ul#navigatie li ul li a { background:#efefef none; padding:10px; width:155px; display:block; color:#bbb; font-weight:normal; }
ul#navigatie li ul li:hover a,
ul#navigatie li ul li a:hover { background:#bbb none; color:#fff; font-style:italic; }
/* navigatie - niveau 3 */
ul#navigatie li:hover ul li ul,
ul#navigatie li ul li ul { position:absolute; top:0; left:175px; display:none; background:#090 none; z-index:3; }
ul#navigatie li ul li:hover ul { display:block; }
ul#navigatie li ul li ul li { }
ul#navigatie li ul li:hover ul li a,
ul#navigatie li ul li ul li a { font-style:normal; }
ul#navigatie li ul li ul li:hover a,
ul#navigatie li ul li ul li a:hover { background:#efefef none; color:#bbb; font-style:italic; }
/* navigatie - niveau 4 */
ul#navigatie li:hover ul li ul li ul,
ul#navigatie li ul li ul li ul { position:absolute; top:0; left:175px; display:none; background:#090 none; z-index:3; }
ul#navigatie li ul li ul li:hover ul { display:block; }
ul#navigatie li ul li ul li ul li { }
ul#navigatie li ul li ul li:hover ul li a,
ul#navigatie li ul li ul li ul li a { font-style:normal; }
ul#navigatie li ul li ul li ul li:hover a,
ul#navigatie li ul li ul li ul li a:hover { background:#bbb none; color:#fff; }

Inclusief de CSS ziet het menu er zo uit: demo CSS dropdown navigatie (opent in dit venster).

IE6 ondersteuning

IE6 ondersteund geen :hover op andere elementen dan a, het dropdown menu zal in IE6 dus niet werken.

JavaScript

Het wisselen tussen de stylesheets doen we met behulp van JavaScript. De JS maakt een cookie aan en zorgt ervoor dat de bezoeker niet elke pagina (en zelfs een later bezoek niet, als het maar binnen de geldigheid van de cookie is) de kleur opnieuw hoeft te kiezen.

De JavaScript zetten we in een apart bestand ‘styleswitcher.js’ genaamd, deze moeten we in de header van de pagina laden:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

<script type="text/javascript" src="styleswitcher.js"></script>

Stylesheets

Je basis stylesheet voeg je gewoon in zoals je gewend bent. De extra stylesheets moeten ook geladen worden in de header van de pagina, maar wel op een iets andere manier dan je basis stylesheet:

<link rel="alternate stylesheet" type="text/css" href="alternatief.css" title="alternatief" media="all" />

Zoals je kan zien is de rel van de stylesheet geen stylesheet, maar alternate stylesheet. Daarnaast moet je een unieke title meegeven aan de stylesheet. Door deze title weet de JavaScript naar welke stylesheet geswitched moet worden.

Switchen tussen stylesheets

Om te kunnen wisselen tussen de verschillende stylesheets hebben we ook elementen nodig in de body van de pagina die hiervoor zorgen:

<a href="#" onclick="setActiveStyleSheet('alternatief'); return false;">alternatief</a>

Bovenstaande JavaScript code is niet door mij geschreven, helaas weet ik niet door wie het origineel wél geschreven is.