Hide Shop By "Color" Attribute on Certain Categories via Custom Layout Update

Question

How could I hide this attribute on a single category via Custom Layout Update, I created a new css file and added next code to Custom Layout Update in the category I want to hide the color attribute

<reference name="head">
<action method="addCss"><stylesheet>css/custommods.css</stylesheet></action>
</reference>

Now, the custommods.css is

.faq_accordian .arrowlistmenu {
  visibility: hidden;
}

but this code hides all the Shop By attributes because all the attributes have the same class. This is a snippet of the styles.css file

/* ======================================================================================= */
/* ===================accordian */
.faq_accordian{margin:0;padding:0;}
.faq_right{
    width:732px;
    height:auto;
    float:left;
}
.faq_banner{background:url(images/media_banner.png) no-repeat;
    height:139px;
    width:724px;
    border-bottom:3px solid #fec00f;
}
.faq_banner h1 {font-family: 'futura_ltregular'; font-size:32px;color:#fec00f;margin-left:30px;margin-top:0px;padding-top:15px;font-weight:normal;text-transform:uppercase;}
.faq_banner p {width:330px;margin-left:30px;color:#cccccc;font-weight:bold;}
.faq_right h3 {padding-left:25px;font-weight:normal;}
.col-right {
    float: right;
}

.col3-layout .col-main {float:right;}
.col3-layout .col-wrapper {float:left;}
.col3-layout .grid_3 {margin:0;}
.col3-layout .grid_6 {width:490px;}
/*left menu */
.faq_accordian .arrowlistmenu{
}
.faq_accordian .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
   background:url(../images/down_arrow.png) no-repeat scroll right 15px !important;
    color: #404040;
    cursor: pointer;
    font-family: "futura_lt_btlight";
    margin: 10px 0 0;
    padding:5px;
    text-transform: none;
    border: 1px solid #D5D5D5;
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-weight:normal;
/*font-size:16px;*/
}
.faq_accordian .arrowlistmenu ul li:hover,.faq_accordian .arrowlistmenu ul li:hover a{background-color:#181818;color:#FFF !important;}
#narrow-by-list .arrowlistmenu .categoryitems li a:hover{color:#ffffff !important;}
/*.faq_accordian .arrowlistmenu h3 {
    margin: 0 !important;
}*/
.add-to-cart .button.btn-cart:hover{ border-bottom: 3px solid #000 !important; 
    margin-bottom: -3px;
    color: #000 !important;
    text-decoration: none !important;}
/*.faq_accordian:nth-child(2) .arrowlistmenu h3{ border: 1px solid transparent !important;
    margin: 40px 0 0 !important; }*/
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
   background:url(../images/open_arrow.png) no-repeat scroll right 12px  !important;
    color: #404040;
    cursor: pointer;
    font:bold 12px 'futura_ltregular', Helvetica, sans-serif;
    margin: 10px 0 0;
    padding:8px !important; 
    text-transform: none;
    border: 1px solid #D5D5D5;
    -webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}

.faq_accordian .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background: url(../images/down_arrow.png) no-repeat scroll right 10px #fafafa;
border:1px solid #eaeaea;
color:#000;
}
.faq_accordian .arrowlistmenu ul , .faq_accordian .arrowlistmenu ol{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
    background:#fff;
    border:1px solid #eaeaea;

padding:10px;
}
.faq_accordian .arrowlistmenu ul li , .faq_accordian .arrowlistmenu ol li{
    color: #404040;
    display: block;
    font-family: "futura_lt_btlight";
    font-size: 12px;
    text-decoration: none;
    line-height:25px;
    padding: 5px;
}
.faq_accordian .arrowlistmenu ul li p , .faq_accordian .arrowlistmenu ol li p{
    display: block;
    font-family: 'futura_ltregular',Helvetica,sans-serif;
    font-size: 14px;
    text-decoration: none;
    line-height:21px;}
.faq_accordian .arrowlistmenu ul li a , .faq_accordian .arrowlistmenu ol li p{
color:#666 !important;
}
.faq_accordian .arrowlistmenu ul li a:visited , .faq_accordian .arrowlistmenu ol li a:visited{
color:#cccccc;
}
.faq_accordian .arrowlistmenu ul li a:hover , .faq_accordian .arrowlistmenu ol li a:visited{ /*hover state CSS*/
color:#404040;
}

Maybe the solution would be to create a different class for this single "color" attribute and set its visibility to hidden? But where is the file in which I have to make the css modifications located?

Thank you.

Answer 1

The body tag should have a class with the category name, such as category-nails so you should edit your css like this:

.category-nails .faq_accordian .arrowlistmenu {
  visibility: hidden;
}

to only target that category.

If the body does not have that class, make sure that in your template file (maybe 1column.phtml) body is like this:

<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>