Trovare codice all'interno di un sito internet

[andrew4]

salve,
sto cercando di modificare un codice in un sito che ho fatto per un'amica.
non sono un programmatore, però ho già sistemato gran parte del problema,
il sito è http://www.gabrielabalaj.com/.

se passo sopra al menu home, e passo sopra al sottomenu prova, nella selezione compare un quadrato nero, nel file template.css sono riuscito a cambiare il colore del sottomenu e della scritta, ma della selezione proprio no, non sono un programmatore, spero che possiate aiutarmi.

[Lele80]

Tasto destro -> Analizza elemento oppure Ispeziona (o simili a seconda del browser)

[KillerWorm]

Ciao, quel rettangolo scuro è dato dal background definito per l'hover sull'elemento <a> (che determina le voci di menu).
La definizione si trova esattamente alla riga 11 del file preset1.css.

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background: #222;
}

Dovrai quindi modificare quel valore.

Tasto destro -> Analizza elemento oppure Ispeziona (o simili a seconda del browser)

Vero, ma in questo caso va anche attivato :hover su quello specifico elemento per poter visualizzare il css relativo a quello stato.

[andrew4]

grazie infinitamente, siete stati davvero d'aiuto, ho provato a fare analizza elemento, ma dove trovo il file e la riga precisi?

[KillerWorm]

Se devi risolvere il problema (cioè modificare il colore di quel rettangolo scuro), senza fare "Analizza elemento" (che ti serve solo per vedere dove sta il problema), scarica dal tuo sito (ad esempio con un FTP) il file che ti ho linkato (che ovviamente sta nel template del tuo sito) e modifica la riga che ti ho indicato. Quindi ricarica sul tuo sito quel file aggiornato.

Se invece vuoi vedere dove sta il problema (con gli strumenti di sviluppo del tuo browser), oltre a quanto ti ha indicato Lele80, dovrai attivare l'opzione ":hover" (come ho precisato sopra).

Andando passo per passo:

Mi pare di capire che utilizzi FireFox (ad ogni modo si può agire in maniera analoga anche sugli altri browser).
Per cui, una volta che hai fatto "Analizza elemento" ti si aprirà, sulla stessa pagina, il pannello degli "Strumenti di sviluppo" in cui sarà mostrata la scheda "Analisi pagina". Lì è visibile la struttura HTML dove è possibile selezionare i vari nodi (elementi del DOM) e manipolarli in tempo reale. Da precisare che tutte le eventuali modifiche eseguite attraverso tale strumento, non saranno permanenti, ma le potrai vedere tu soltanto, sul tuo proprio browser, finché non chiudi il browser o non fai un refresh della pagina stessa.

Chiaramente lì dietro c'è un mondo in cui è difficile addentrarsi più di tanto per un "non programmatore".

Comunque sia, avendo fatto "Analisi elemento" sulla voce di menu in questione, dovresti trovare già selezionato, su quella scheda, quell'elemento specifico che si riferisce a questo preciso nodo:

<a href="/index.php/homepage/prova">prova</a>

cioè l'elemento <a> che costituisce quella voce di menu.

A questo punto dovresti già vedere (normalmente sulla parte destra del pannello) tutte le regole CSS che vengono applicate su quell'elemento.
Ogni regola raggruppa le varie proprietà specificate sui vari ed eventuali fogli di stile.
A fianco ad ogni regola puoi vedere l'indicazione del file e della riga in cui questa risiede.

Da precisare che in questo caso vedrai però solo le regole riferite allo stato normale dell'elemento.
Dal momento che il problema in questione è dato quando si va col mouse sopra l'elemento, cioè sullo stato hover di quell'elemento, dovrai "forzare" questo stato per poterne vedere le relative regole applicate.

Per impostare lo stato di un qualsiasi elemento puoi cliccare col destro sul nodo in questione (quello selezionato nella struttura HTML visibile sul pannello) quindi spuntare la voce ":hover" dal menu contestuale

Se ci sono delle regole CSS riferite a questo stato dell'elemento, saranno visibili sempre sul pannellino a destra.

Spero sia tutto chiaro.

Se ti interessa approfondire lo studio sui CSS ti invito a dare uno sguardo ai link utili. Al capitolo 5 puoi trovare, tra l'altro, diversi link di strumenti per lavorare con i CSS.

Buon proseguimento

[Lele80]

Grazie KillerWorm io non sarei stato in grado di andare così a fondo nella ricerca. Ho imparato qualcosa anche io!