如何修改系统默认店招的背景及其样式？

修改淘宝系统模块，其实很方便，最关键的是淘宝留下了CSS权重给我们设计师。  利用好这个权重，可以做很多事情！

下面是系统店招的样式替换方法：

.tshop-pbsm-shop-custom-banner {
    //店招高度
    height:120px;

    .skin-box-bd {
        //店招背景图片
        .banner-box {
            background:#000;
            height:120px;
        }
        //店铺名称
        h2.title {
            background-color:#ff0;
            color:#f00;
        }
    }
}

 

注：

上面使用的是less的写法！

由于淘宝在店招的DOM结构中使用了<style>...</style>标签来定义店招的背景，所以我们写的CSS权重要高于淘宝默认的CSS权重。要想提高权重，一般我们应该在输入选择器的时候尽量的吧层次也给写出来。可以使用chrome或firebug查看系统的店招DOM结构。

 

总结：举一反三，对于每个系统模块我们都可以这样去设置他们的CSS样式！

 

 

---------------2012.8.14--------------------

貌似有一个问题！如果我们把CSS权重提高了，背景是有了，但是这样一来，用户自己定义的店招图片也不显示了，前面一直都没有注意这个问题！看来最好的方法是使用自定义店招！