Изменение стиля по умолчанию для виджета DOJO

Я хотел бы иметь возможность изменять некоторые стили CSS по умолчанию, например, dijit.TitlePane без взлома «заводских» тем CSS. То, что я пытаюсь сделать, это удалить . Заголовок и ContentOuter границ элемента TitlePane. Установка класса (в данном случае «без полей») при объявлении виджета не работает (см. Ниже: Я также попытался установить класс в репозиториях-dojo-реквизитах.Изменение стиля по умолчанию для виджета 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'>

, то вы можете определить свой собственный стиль:

.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 достаточно - и получить твердую помощь, как это, я в конечном итоге узнаю его тонкости. –

Рад, что это сработало! – mtyson

Изменение стиля по умолчанию для виджета DOJO

ответ

Смежные вопросы