Cambiar el estilo predeterminado del widget DOJO

Me gustaría poder cambiar algunos de los estilos CSS predeterminados para, por ejemplo, dijit.TitlePane sin hackear los temas CSS "instalados de fábrica". Lo que intento hacer es eliminar los Título y ContentOuter bordes de un Panel de Título. Establecer una clase (en este caso, "sin márgenes") al declarar que el widget no funciona (ver a continuación: también he intentado configurar la clase dentro de data-dojo-props. Todavía no ir).Cambiar el estilo predeterminado del widget DOJO

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

Las siguientes son las clases que quiero cambiar en el archivo claro.css. Por supuesto, podría cambiar el borde allí, pero no quiero ir por esa ruta por razones obvias. Todo lo que quiero hacer es anular estas configuraciones en mi propia clase. Este debería ser ser realmente fácil, pero solo estoy dibujando un calambre cerebral. ¿Alguna ayuda? (Usando DOJO 1.7.1).

Gracias

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

Fuente

2012-01-16 Mark Hall

Usted debe ser capaz de anular los estilos al hacer un selector que es más específico.

Esto debería funcionar. En el elemento del cuerpo, añadir otra clase, como

<body class='claro myCompany'>

continuación, puede definir su propio estilo:

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

Algo más específico basado en la ruta de árbol DOM funcionará también, como

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

Y luego, en el selector:

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

Fuente

2012-01-16 23:55:50 mtyson

Funciona a la perfección! Gracias. Solo puedo suponer que si trabajo lo suficiente con CSS, y obtengo una ayuda sólida como esta, eventualmente aprenderé sus complejidades. –

¡Me alegro de que funcionó! – mtyson

Cambiar el estilo predeterminado del widget DOJO

Respuesta

Cuestiones relacionadas