Question

如何通过自定义布局更新在单个类别上隐藏此属性，我创建了一个新的css文件，并将下一个代码添加到我要隐藏颜色属性的类别中的自定义布局更新

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

现在，custommods.css是

.faq_accordian .arrowlistmenu {
  visibility: hidden;
}

但此代码隐藏了所有Shop By属性，因为所有属性都具有相同的类。这是styles.css文件的片段

/* ======================================================================================= */
/* ===================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;
}

也许解决方案是为这个单一的＆＃34;颜色＆＃34;创建一个不同的类。属性并将其可见性设置为隐藏？但是我必须在哪里进行css修改？

谢谢。

Answer 1

body标签应该有一个带有类别名称的类，例如category-nails，所以你应该像这样编辑你的css：

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

仅定位该类别。

如果正文没有该类，请确保您的模板文件（可能是1column.phtml）正文如下：

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

隐藏商店＆＃34;颜色＆＃34;通过自定义布局更新在某些类别上的属性

1 个答案: