Override Jquery Mobile CSS

Question

È possibile sovrascrivere gli elementi JQuery Mobile già in stile (pulsanti, elenchi, ecc.) Con un file css personalizzato separato?

Se sì, come faccio a fare riferimento agli elementi.

Grazie

Answer 1

Non so di un funzionario, modo elegante per farlo, ma mi guardo file css non-min per trovare le classi, quindi aggiungere cose come questa in un file css incluso dopo la jQuery mobile uno:

.ui-header .ui-title {margin-right: 20px; margin-left: 20px;}

.ui-footer .ui-title {margin-right: 20px; margine -left: 20px; white-space: normal;}

Inoltre, firebug e dev. strumenti (chrome) sono tuoi amici: esamina gli elementi e i loro stili.

Libby

Answer 2

Sì, è possibile ignorare tutti gli stili CSS già definite nella telefonia mobile jQuery, ma dare uno sguardo su come farlo nel modo giusto. Theming overview nella documentazione jQuery ha le informazioni relative alla tua domanda. In particolare:

Sostituzione di temi

I temi sono pensati come un solido punto di partenza, ma sono destinate ad essere personalizzato per aggiungere gli elementi di design personalizzati che rendono il vostro sito o applicazione unica. Poiché tutto è controllato dai CSS, è facile utilizzare uno strumento di ispezione web per identificare le proprietà di stile che si desidera modificare . L'insieme di classi tematiche (globali) e classi semantiche strutturali (specifiche del widget) aggiunte agli elementi forniscono un ricco set di selettori possibili su cui indirizzare gli override di stile da . Consigliamo aggiungendo un foglio di stile esterno alla testata, posizionato dopo la struttura e riferimenti al foglio di stile del tema, che contengono tutte le sostituzioni dello stile . Ciò consente di aggiornare facilmente alle versioni più recenti della libreria poiché le sostituzioni sono mantenute separate dal codice della libreria.

Answer 3

C'è un enorme equivoco su come utilizzare i propri stili con jQm che ho trovato ovunque, anche SO. Il trucco per usare il tuo CSS con JQM è come scrivi il tuo CSS. In generale, è necessario innanzitutto specificare l'elemento che si desidera sovrascrivere il CSS JQM con un ID, quindi collegare la classe JQM a tale ID. Ad esempio, per rimuovere il CSS del bordo del collegamento standard JQM da un collegamento immagine, dove # img_button_1 è l'ID assegnato all'ancora genitore dell'immagine, si codificherà il CSS in questo modo ...

L'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> 

Il tuo override CSS ...

#img_button_1 .ui-btn-inner { border: 0 } 

ho risposto prima con alcuni esempi di lavoro che può essere trovato qui

Jquery Mobile - Using image as link - Blue line below image

È possibile utilizzare la stessa tecnica per risolvere tutti i conflitti jQm CSS. Ora puoi riconsiderare l'utilizzo di JQM per ottenere i risultati desiderati, sapendo quanto sia semplice risolvere questi conflitti usando la specicività CSS nel tuo CSS. Spero che questo ti aiuti!

Answer 4

Assicuratevi di controllare le note di rilascio per ogni nuova versione.

Ci sono cose utili su quali sono le modifiche nella gerarchia css. Naturalmente questo diventa generalmente più stabile con ogni versione, ma probabilmente ci sarà qualcosa che devi sapere.

1.4 CSS aggiornamento doc: http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css