Magento – Apply Unique Styles to each Section of Layered Navigation

Default Layered Navigation
Default Layered Navigation

In Magento, anchor pages that give us layered navigation are, by default, enclosed in dt tags (subheadings) and dd tags (links), respectively. You can control how they look in the default template by changing css/boxes.css .narrow-by styles.

The problem, though, is that I need to change individual sections of the layered navigation. I think I have a decent solution.

Out of the Box

As shipped, the default template displays as shown left. Each of the various filters are presented in exactly the same format. They are all using the same style from css/boxes.css.

In our case, though, we wanted to highlight the “Category” section. I figured we could tweak template/catalog/layer/view.phtml just a little bit such that we could assign a style to each dt and dd, and

Color Highlighted Navigation

name them individually.

To the right you’ll see a pretty obnoxious demonstration of what we were after but it’s a pretty darn good example of what we need to accomplish.

Here’s the default code:

45             <dl id=”narrow-by-list”>
46                 <?php $_filters = $this->getFilters() ?>
47                 <?php foreach ($_filters as $_filter): ?>
48                 <?php if($_filter->getItemsCount()): ?>
49                 <dt><?php echo $this->__($_filter->getName()) ?></dt>
50                 <dd>
51                 <?php echo $_filter->getHtml() ?>
52                 </dd>
53                 <?php endif; ?>
54                 <?php endforeach; ?>
55             </dl>

In the new code, I’m placing the filter’s name – from the  $this->__($filter->getName()) function – into a variable called $__mxw.  Once it’s in $__mxw, I’m going to use it to invent unique style names for each section.
45                 <dl id=”narrow-by-list”>
46                 <?php $_filters = $this->getFilters() ?>
47                 <?php foreach ($_filters as $_filter): ?>
48                         <?php if($_filter->getItemsCount()): ?>
49                         <?php $__mxw=$this->__($_filter->getName());?>
50                         <dt class=”<?php echo “_up_dt”.$__mxw;?>”>
51                             <?php echo $__mxw;?>
52                         </dt>
53                         <dd class=”<?php echo “_up_dd”.$__mxw;?>”>
54                             <?php echo $_filter->getHtml() ?>
55                         </dd>
56                     <?php endif; ?>
57                 <?php endforeach; ?>
58             </dl>

On line 49, I’m grabbing the name into $__mxw. One line 50, I’m creating a unique class name by combining “_up_dt” with the filter name. For Category, I end up with _up_dtCategory, for example. Similarly, I use the $__mxw variable again on line 53 to create a unique class name for the dd tag. For Category, I get _up_ddCategory.

CSS Additions

Now that I’m giving each dt/ dd tag set a unique class, it’s time to define the style.

In css/boxes.css I added styles like these:

785 .narrow-by ._up_dtCategory {
786     color: #000;
787     background-color: #ffff99;
788 }
790 .narrow-by ._up_ddCategory {
791     color: #000;
792     background-color: #ffff99;
793 }

Our new view.phtml will produce unique names for each dt/ dd section, so markup all the sections any which way you want.

Facebook comments: