DOJOウィジェットのデフォルトスタイルを変更する

"factory-installed" CSSテーマをハックすることなく、dijit.TitlePaneなどのデフォルトCSSスタイルを変更したいと考えています。私がしようとしているのは、タイトルとContentOuterタイトルペインの境界線を削除することです。ウィジェットを宣言するときにクラス（この場合は「ボーダーレス」）を設定しても機能しません（下記を参照してください：データドゥージー・プロップ内でクラスを設定しようとしました。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'> 
    <div class='fooClass'> 
    <your title pane here>

のように、

.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ツリーのパスに基づいても動作します：あなたの体の要素では、その後、あなたがあなた自身のスタイルを定義することができ

<body class='claro myCompany'>

のように、別のクラスを追加

そして、あなたのセレクタで：

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

出典

2012-01-16 23:55:50 mtyson

完璧に動作します！ありがとう。私は、CSSを十分に使いこなし、このようなしっかりした助けを得るならば、その複雑さを最終的に学ぶだろうと私は思うに過ぎません。 –

うれしかった！ – mtyson

DOJOウィジェットのデフォルトスタイルを変更する

答えて

関連する問題