更改DOJO小部件的默认样式 [英] Changing default style of DOJO widget
问题描述
我想要修改一些默认的CSS样式，例如，dijit.TitlePane，而不会黑客入侵工厂安装的CSS主题。我想要做的是删除TitlePane的标题和 ContentOuter 边框。在声明窗口小部件时，设置一个类（在这种情况下是无边界）不起作用（见下文：我还尝试在数据dojo-props中设置类，仍然没有）
I'd like to be able to change some of the default CSS styles for, for example, dijit.TitlePane without hacking the "factory-installed" css themes. What I'm trying to do is remove the Title and ContentOuter borders of a TitlePane. Setting a class (in this case, "borderless") when declaring the widget doesn't work (see below: I've also tried setting the class within data-dojo-props. Still no go).
<div class="borderless" data-dojo-type="dijit.TitlePane" data-dojo- props="title:'Filter by Last Name'" open="false">
以下是我要在claro.css文件中更改的类。当然，我可以在那边改变边界，但由于明显的原因我不想去那条路线。所有我想做的是覆盖我自己的类中的这些设置。这个应该真的很容易，但我只是画一个大脑抽筋。任何帮助？ （使用DOJO 1.7.1）。
Following are the classes that I want to change in the claro.css file. Of course, I could change the border there, but I don't want to go that route for obvious reasons. All I want to do is override these setting in my own class. This should be really easy, but I'm just drawing a brain cramp. Any help? (Using DOJO 1.7.1).
感谢
.claro .dijitTitlePaneTitle {
background-color: #EFEFEF;
background-image: url("images/titlebar.png");
background-repeat: repeat-x;
border: 1px solid #B5BCC7;
min-height: 17px;
padding: 0 7px 3px;
}
.claro .dijitTitlePaneContentOuter {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B5BCC7 #B5BCC7;
border-width: medium 1px 1px;
}
推荐答案
你应该能够覆盖通过使选择器更具体的风格。
You should be able to override the styles by making a selector that is more specific.
这应该工作。在你的body元素中，添加另一个类，如
This should work. In your body element, add another class, like
<body class='claro myCompany'>
那么你可以定义自己的风格：
then you can define your own style:
.claro.myCompany .dijitTitlePaneContentOuter {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B5BCC7 #B5BCC7;
border-width: medium 1px 1px;
}
基于dom树路径更具体的任何内容也可以工作，如
Anything more specific based on the dom tree path will work also, like
<body class='claro'>
<div class='fooClass'>
<your title pane here>
然后在您的选择器中：
.claro.myCompany .fooClass .dijitTitlePaneContentOuter {
/* my special css */
这篇关于更改DOJO小部件的默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
