Custom Design: Styling Filters

Developers Dev talks
21

Hi @majerfra,

For v4.x is required add-on My Changes to be active



#add on file design/themes/[SKIN_NAME]/templates/addons/my_changes/hooks/index/styles.post.tpl

{style src="addons/my_changes/styles.css"}
```<br />
<br />
#add on file design/themes/[SKIN_NAME]/css/addons/my_changes/styles.css<br />
```php
<br />
.product-filters {<br />
	background:#FFFFFF;<br />
	border: 1px solid #DDDDDD;<br />
	font-size: 90%;<br />
	line-height: 140%;<br />
	margin: 0;<br />
	height: 130px;<br />
	overflow: auto;<br />
	padding: 0 5px 5px;<br />
}<br />
.filter-title{ border:none }<br />

```<br />
<br />
Tips: To use only to a particular filter as image bellow you need to get filter_id<br />
![](upload://4teJif3N2p5eHgCWmmMf6T5MZfT.png)<br />
<br />
```php
<br />
#content_27_8{<br />
	background:#FFFFFF;<br />
	border: 1px solid #DDDDDD;<br />
	font-size: 90%;<br />
	line-height: 140%;<br />
	margin: 0;<br />
	height: 130px;<br />
	overflow: auto;<br />
	padding: 0 5px 5px;<br />
}<br />
#sw_content_27_8 .filter-title{ border:none }<br />

```<br />
<br />
I hope that helps,<br />
<br />
---<br />
Valentin<br />
[color=#808080][size=2]part of hungryweb.net[/size][/color]
22

some improvement for those who have many filters with long lists of variants



But I would suggest to use style.less instead of style.css



.product-filters {
max-height:220px;
overflow-y:auto;
margin: 5px -2px;
padding-left: 2px;
overflow: -moz-scrollbars-vertical;
border: 1px solid @sidebar;
line-height:100%;
}
.product-filters li a.filter-item {
text-decoration:none;
font-size:12px;
/* color:#333 */
}
.product-filters li a.filter-item:hover {
text-decoration:underline
}
.filter-icon {
height:8px;
width:8px;
top:2px;
}