schede ui jquery grande cambiamento di stile

Question

Sto usando schede UI jQuery e ho bisogno di cambiare lo stile majorly su di esso. Ho bisogno di rempve l'immagine di sfondo, i confini, quasi tutto. Ho bisogno di look minimal, e non come è autonomo.

Qual è il modo migliore per farlo? Ho bisogno di usare lo stile di default interfaccia utente per il widget del calendario tuttavia, che si trova sulla stessa pagina. Ho fatto un sacco di ricerca e tutti sembrano puntare al tema-rullo. Tuttavia, io non voglio solo cambiare i colori e bordo raggi. Devo cancellare merda. tema-roller sembra essere solo cambiare le cose come i colori (non molto utile per il mondo reale). Come posso adattare il css per le schede senza modificare gli stili degli altri widget UI sulla stessa pagina (voglio il calendario per rimanere come è)?

E 'anche la pena utilizzare jQuery UI per le mie schede?

Answer 1

Si dovrebbe verificare dettagliato post sul blog di Keith Wood su styling JQuery UI Tabs .

La risposta alla tua domanda specifica

  

Ho bisogno di rempve l'immagine di sfondo, i confini, quasi tutto.   Ho bisogno di look minimal

è in questa sezione " Rimuovere la maggior parte del formattazione" del post di Keith Wood.

In aggiunta a questo, ci sono altri 10 cambiamenti di stile, completi con il CSS necessario per ottenere l'effetto desiderato.

jQuery UI Tabs Styling - Keith Wood Blog post

Answer 2

Ho scelto di scrivere il mio funzionalità semplici schede quando, mi sono reso conto che non avevo bisogno di maggior parte delle sue funzionalità integrate, come il caricamento di contenuto AJAX e dinamica l'aggiunta / rimozione di schede. Se avevo bisogno di queste caratteristiche, sarebbe facile da implementare io stesso. Ciò che mi ha spinto ad abbandonare jQuery UI Tabs è che ho dovuto strutturare i miei elementi DOM in modo diverso. Ho anche bisogno per lo stile mie schede per cercare il minimo, e ho pensato che la costruzione da zero sarebbe meno sforzo che cercare di spogliare un sacco.

La caratteristica mi manca di più è il modo in jQuery UI Tabs seleziona automaticamente la scheda indicata dal # nell'URL (so che posso basta copiare esso - solo che non hanno ottenuto ad esso ancora).

---

UPDATE: Ma, sì, se si sta attaccando con esso, è possibile ignorare il CSS utilizzando qualsiasi ID che hai:

#my-tabs .ui-state-default {
    background-image: none; /* remove default bg image */
}

e così via ..

Answer 3

Prova quanto segue nel css assumendo la classe è .mytabs per il css prevalente. Si dovrebbe iniziare a

.mytabs li {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 

    }
    .mytabs li.ui-state-active {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 
        margin: 0;


    }

.mytabs li a 
    {
        color:          Black !important;
        font-size:      1.4em !important;
        font-weight:    bolder;
        padding:        4px 1.5ex 3px !important;
    }

Answer 4

E 'facile con un po' di CSS si può facilmente ignorare lo standard CSS fornito con jQuery UI. Potrebbe non essere necessario! Importante se il CSS modificato appare dopo l'interfaccia utente CSS jQuery.

È inoltre possibile rimuovere / aggiungere classi per ogni elemento con jQuery sul carico, ma che sembra un po 'inutile.

Answer 5

Dovrebbe essere abbastanza semplice con i CSS. I suoi elementi hanno gli ID e le classi su di loro e si possono toccare con i CSS. Themeroller è solo un rapido go-to cosa.

Se non ricordo male, si potrebbe anche modificare le schede js e regolare le linee che aggiungono immagini (se questo è lo stesso plugin) o semplicemente rimuovere quella linea del tutto a proprio piacimento.

Answer 6

Mi chiedo se i! Attributi importanti dovrebbero essere nei modelli dell'interfaccia utente predefinita di jQuery, in primo luogo. Ad esempio, se si modificano le schede per essere sul lato sinistro o destro invece che in alto, il 'border-bottom' non dovrebbe avere una! Importante, dal momento che questo è comunemente sovrascritto.

Answer 7

Quasi tutto è coperto qui, ma si guardava intorno e ha trovato un modo per gettare le cose che davvero non servono abbastanza facilmente con una sola classe, mentre poi la modifica dei rimanenti attributi.

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

In questo modo si seleziona ogni classe che inizia con "UI-" e rimuovere tutto ciò che si desidera rimuovere dal jQuery UI.

Answer 8

 #my-tabs * {
    background-image: transparent;
}