Thay đổi kiểu mặc định của tiện ích DOJO

Tôi muốn có thể thay đổi một số kiểu CSS mặc định cho, ví dụ, dijit.TitlePane mà không cần hack các chủ đề css "do nhà máy cài đặt". Những gì tôi đang cố gắng làm là xóa các đường viền Tiêu đề và ContentOuter của một TitlePane. Thiết lập một lớp (trong trường hợp này là "không biên giới") khi khai báo widget không hoạt động (xem bên dưới: Tôi cũng đã thử thiết lập lớp trong các đạo cụ dữ liệu-dojo. Vẫn không đi).Thay đổi kiểu mặc định của tiện ích DOJO

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

Sau đây là các lớp tôi muốn thay đổi trong tệp claro.css. Tất nhiên, tôi có thể thay đổi biên giới ở đó, nhưng tôi không muốn đi tuyến đường đó vì những lý do rõ ràng. Tất cả những gì tôi muốn làm là ghi đè lên các thiết lập này trong lớp của riêng tôi. Điều này nên được thực sự dễ dàng, nhưng tôi chỉ vẽ một chuột rút não. Bất kỳ giúp đỡ? (Sử dụng DOJO 1.7.1).

Cảm ơn

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

Nguồn

2012-01-16 Mark Hall

Bạn sẽ có thể ghi đè lên phong cách bằng cách làm cho một selector đó là cụ thể hơn.

Điều này sẽ hiệu quả. Trong thành phần cơ thể của bạn, thêm một lớp khác, giống như

<body class='claro myCompany'>

sau đó bạn có thể xác định phong cách riêng của bạn:

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

Bất cứ điều gì cụ thể hơn dựa trên con đường cây dom sẽ làm việc cũng như

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

Và sau đó trong bộ chọn của bạn:

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

Nguồn

2012-01-16 23:55:50 mtyson

Hoạt động hoàn hảo! Cảm ơn. Tôi chỉ có thể giả định rằng nếu tôi làm việc với CSS đủ - và nhận được sự trợ giúp vững chắc như thế này - cuối cùng tôi sẽ tìm hiểu những phức tạp của nó. –

Vui vì nó đã hoạt động! – mtyson

Thay đổi kiểu mặc định của tiện ích DOJO

Trả lời

Các vấn đề liên quan