¿Es posible anular los elementos de JQuery Mobile ya configurados (botones, listas, etc.) con un archivo css personalizado diferente?Anular Jquery Mobile CSS
En caso afirmativo, ¿cómo hago para hacer referencia a los elementos?
Gracias
No sé de un funcionario, elegante manera de hacerlo, pero me miro en el archivo CSS no min a encontrar las clases, a continuación, añadir cosas como esta en un archivo .css incluido después de la jQuery Mobile uno:
.ui-header-.ui título {margin-right: 20px; margin-left: 20px;}
.ui-pie-.ui título {margin-right: 20px; margen -izquierda: 20px; espacio-blanco: normal;}
Además, firebug y dev. herramientas (cromo) son tus amigos: examina los elementos y sus estilos.
Libby
Sí se puede anular todos los estilos css ya definidos en el móvil jQuery, pero echar un vistazo sobre cómo hacerlo de una buena manera. Theming overview en la documentación de jQuery tiene la información referida a su pregunta. En particular:
temas preponderantes
Los temas están diseñados como un sólido punto de partida, pero están destinados a ser personalizado para agregar los elementos de diseño personalizado que hacen que su sitio o aplicación única. Como todo está controlado por CSS, es fácil utilizar una herramienta de inspector web para identificar las propiedades de estilo que desea modificar . El conjunto de clases de tema (global) y clases semánticas estructurales (específicas del widget) agregadas a los elementos proporcionan un amplio conjunto de posibles selectores para las modificaciones de estilo de destino en contra. Recomendamos agregando una hoja de estilo externa al encabezado, colocada después de la estructura y referencias de hoja de estilo de tema, que contienen todas las modificaciones de estilo . Esto le permite actualizar fácilmente a las versiones más recientes de la biblioteca porque las modificaciones se mantienen separadas del código de la biblioteca.
+1 para publicar la documentación para anular los temas. – botbot
Hay un error enorme sobre el uso de sus propios estilos con JQM que he encontrado en todas partes, incluyendo el SO. El truco para usar tu propio CSS con JQM está en cómo escribes tu propio CSS. En general, primero debe especificar el elemento que desea sobreescribir el CSS de JQM con una identificación, y luego adjuntar la clase de JQM a esa ID. Por ejemplo, para eliminar el borde del enlace estándar de JQM CSS de un enlace de imagen, donde # img_button_1 es la identificación proporcionada al elemento principal de anclaje de la imagen, usted codificaría su CSS como ...
El HTML ...
<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
href="http://www.google.com" target="_blank">
<img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>
Su sustitución CSS ...
#img_button_1 .ui-btn-inner { border: 0 }
me respondió esto antes con algunos ejemplos de trabajo que se pueden encontrar aquí
Jquery Mobile - Using image as link - Blue line below image
Puede utilizar la misma técnica para resolver todos sus conflictos JQM CSS. Ahora puede reconsiderar el uso de JQM para lograr los resultados deseados, sabiendo lo simple que es resolver estos conflictos utilizando la especificidad de CSS en su propio CSS. ¡Espero que esto ayude!
Esta fue una solución fácil para mí, gracias. – robnick
Intenté utilizar el enfoque de clase, pero a pesar de que mi css se cargó después de jquery mobile css fue anulado. Usando ID arreglado eso. Gracias. –
Asegúrese de verificar las notas de la versión para cada nueva versión.
Hay cosas útiles sobre los cambios en la jerarquía de css. Por supuesto, esto generalmente se vuelve más estable con cada lanzamiento, pero probablemente haya algo que debes saber.
1.4 CSS actualización doc: http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css
muy útil para que la gente sepa. Puedo ver que esta es una herramienta fantástica para personalizar la interfaz de usuario. – jcrowson
ThemeRoller se ha mudado a: - http://themeroller.jquerymobile.com/ –