更改DOJO小部件的默认样式

我希望能够更改一些默认的CSS样式，例如dijit.TitlePane，而不需要黑客“工厂安装的”css主题。我想要做的是删除标题栏的标题和ContentOuter的边界。在声明小部件的时候设置一个类（在这种情况下，“无边界”）不起作用（参见下文：我也尝试在data-dojo-props中设置类，但仍然不行）。更改DOJO小部件的默认样式

<div class="borderless" data-dojo-type="dijit.TitlePane" data-dojo- props="title:'Filter by Last Name'" open="false">

以下是我想要在claro.css文件中更改的类。当然，我可以在那里改变边界，但我不想因为明显的原因走这条路。我想要做的就是在我自己的班级中重写这些设置。这应该真的很容易，但我只是画一个脑筋抽筋。任何帮助？（使用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; 
}

来源

2012-01-16 Mark Hall

您应该能够通过使一个选择是更具体的覆盖样式。

这应该工作。在你的身体元素中，添加另一个类，像

<body class='claro myCompany'>

，那么你可以定义自己的风格：基于DOM树路径上

.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; 
}

任何更具体的也将正常工作，就像

<body class='claro'> 
    <div class='fooClass'> 
    <your title pane here>

然后在您的选择：

.claro.myCompany .fooClass .dijitTitlePaneContentOuter { 
    /* my special css */

来源

2012-01-16 23:55:50 mtyson

完美无缺！谢谢。我只能假设，如果我足够使用CSS - 并得到如此坚实的帮助 - 我最终会学到它的错综复杂。 – 2012-01-17 03:48:48

很高兴工作！ – mtyson 2012-01-17 16:40:20

更改DOJO小部件的默认样式

回答

相关问题