Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,552

    cambiare colore di sfondo del dropdown menu di bootstrap

    salve a tutti
    ho necessità di cambiare il colore di sfondo del dropdown menu di bootstrap ma non riesco a capire come fare.

    Ispezionando la pagina con chrome mi dice che la classe è a.dropdown-toggle che pero' non trovo da nessuna parte in nessun file che carico

    Inoltre, sempre dallo strumento di ispezione, mi dice che il file è /inc/bootstrap/css/less/navbar.less:661
    Ma questo file non lo tengo da nessuna parte, forse richiama qualche altro file situato in qualche altra directory?

    Allego l'immagine per chiarezza
    Devo cambiare quel nero che come colore ha #080808 e sostituirlo con un verde

    Allego anche quello che mi esce quando vado ad ispezionare con chrome

    Ho anche provato ad aggiungere una classe in piu' nel mio file stile.css ma ugualmente non riesco a fare quello che voglio.

    Sapreste aiutarmi a sistemare sta cosa?
    Grazie
    Immagini allegate Immagini allegate

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,760
    Ciao, si tratta di un file less, per cui il CSS che arriva sulla pagina viene generato dinamicamente attraverso il codice di programmazione (pseudo CSS) presente su quel file.

    Ora, modificare quel file sorgente .less può essere dannoso perché se non si sa esattamente dove mettere le mani si rischia di comprometterne il regolare funzionamento.

    Ti suggerisco invece di aggiungere un tuo css personalizzato, magari includendo il file dopo gli altri css presenti sulla pagina, quindi mettere quella stessa regola, che ti salta fuori dall'ispezione, ma con i valori che preferisci.

    Questa regola di norma dovrebbe sovrascrivere quella già presente.

    Avrai quindi un tuo file del tipo custom-style.css dove metterai una cosa del genere:
    codice:
    .navbar-inverse .navbar-nav > .open > a, 
    .navbar-inverse .navbar-nav > .open > a:focus, 
    .navbar-inverse .navbar-nav > .open > a:hover {
        background-color: #090;
    }
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    130
    less e sass sono strumenti per ottimizzare la scrittura di css, se non hai dimestichezza utilizza il file css puro e poi minifizza(scusate il termine) il tutto, oppure come dice KillerWorm utilizza un file css custom, nel tuo caso potresti fare cosi :
    codice:
     .nav-item.dropdown.show {
                background-color: #0808;
            }

  4. #4
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,552
    ciao,
    si ho utilizzato la soluzione di killerworm e funziona alla grande.

    In effetti non capivo bene cosa fosse quel file less (ed anche sass) visto che non riuscivo a trovarlo nelle directory

    Quindi ho aggiunto il pezzo di codice al mio file custom css ed ora funziona

    Grazie

  5. #5
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,552
    solo ora noto che rientrando con chrome, i 3 dropdown del menu li vedo di nuovo verdi appena apro la pagina e non quando ci clicco sopra...
    come mai?

  6. #6
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    130
    Il codice che ti ho postato funziona su FF, chrome, edge, non ho potuto testarlo su safari ma penso funzioni anche li.

  7. #7
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,552
    adesso ho cancellato la cronologia del browser e sembra funzionare tutto bene, nel caso provo anche il tuo codice

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.