Modifiche CSS sul tema mobile e desktop

[camillabelle]

salve volevamo apportare alcune modifiche di colori sul tema (primerose), ovviamente dove potevamo abbiamo agito ma ci solo alcuni elementi che vanno modificati agendo sul codice css, le modifiche che volgiamo apportare sono semplici ma non riusciamo a individuare le classi giuste da richiamare o c'è qualche stringa di codice particolare da aggiungere.

MODIFICHE MOBILE:
1. vogliamo cambiare il colore della barra superiore ma inserendo il codice .av-site-header .header-content {background-color #410080 che per noi va bene ma se si è in visualizzazione desktop vorremmo non cambiasse.

2. richiamando il menu hamburger che ora è bianco vorremmo farlo nero con i testi bianchi, abbiamo provato a richiamare le classi che pensiamo fossero coinvolte ma siamo davvero confusi tra queste .av-elem menu inner .av-mobile-menu .menu-hinner perche nessuno di queste ci cambia colore inserendole nel codice.

MODIFICHE DESKTOP:
sul menu di navigazione vorremo semplicemente fare l'hover dei pulsanti nero, ma questo è probabile che da soli ci riusciamo.

GRazie per lalettura attendiamo risposte, intando noi facciamo ancora qualche prova.

[alemoppo]

La filosofia dei temi Seamless è quella di avere lo stesso aspetto sia da desktop sia da mobile.

Se vuoi far avere colori (o in generale aspetto) differente, più che metter mano al CSS, prima prova ad abilitare il tema "Mobile" (dal menu amministrativo -> mobile). In quel modo puoi personalizzare indipendentemente i colori del tema desktop (primrose) e mobile.

Visto che hai una pagina statica come homepage, ricordati (nei temi mobile) di spuntare la voce: "Consenti pagine iniziali statiche nei temi mobile".

Come effetto "negativo", apparirà nella pagina ammnistrativa un avviso che ti avverte di aggiornare il tema desktop, se ti piace però la soluzione del tema mobile, puoi ignorare l'avviso.

Se, invece, non riesci ad ottenere quel che desideravi, vediamo di trovare altre soluzioni.

Ciao!

[camillabelle]

La filosofia dei temi Seamless è quella di avere lo stesso aspetto sia da desktop sia da mobile.

Se vuoi far avere colori (o in generale aspetto) differente, più che metter mano al CSS, prima prova ad abilitare il tema "Mobile" (dal menu amministrativo -> mobile). In quel modo puoi personalizzare indipendentemente i colori del tema desktop (primrose) e mobile.

Dal pannello non abbiamo voci specifiche per il mobile e sembra perfettamente attivo.

PALANDO DEL MODALITA' DESKTOP:
Abbiamo appena apportato le modifiche dei colori al menu di navigazione desktop con gli hover giusti ed i sottomenu neri con a sua volta gli hover del sottomenu inserendo questo codice:

==== CODICE PER HOVER NEL MENU DI NAVIGAZIONE =====

#menu-item-500 a:hover {background-color: #000000;}
#menu-item-482 a:hover {background-color: #000000;}
#menu-item-487 a:hover {background-color: #000000;}
#menu-item-500 a:hover {background-color: #000000;}
#menu-item-70 a:hover {background-color: #000000;}
#menu-item-552 a:hover {background-color: #000000;}
#menu-item-76 a:hover {background-color: #000000;}
#menu-item-81 a:hover {background-color: #000000;}
#menu-item-542 a:hover {background-color: #000000;}
#menu-item-82 a:hover {background-color: #000000;}

====== CODICI PER IL SOTTOMENU E L'HOVER ========

#menu-navigazione .sub-menu a {background-color: black; } SERVE PER MOSTRARE IL SOTTOMENU TUTTO NERO

#menu-item-533 a:hover {background-color: #410080;}
#menu-item-528 a:hover {background-color: #410080;}
#menu-item-524 a:hover {background-color: #410080;}
#menu-item-519 a:hover {background-color: #410080;}
#menu-item-506 a:hover {background-color: #410080;}

Vorremmo però fare che lo sfondo del link selezionato rimanga nero una volta cliccato e raggiunta la pagina, il comando dovrebbe essere "a:active" ma non funziona per ciascun "menu-item", in oltre vorremmo che la voce FILMOGRAFIA una volta aperto il sottomenu rimanesse nera, non capiamo quale classe usare.

Per il discorso mobile al momento lasciamo stare, lo vediamo in seguito.

grazie.

[camillabelle]

Noi abbiamo apparentemente risolto un po tutto delle problematiche che avevamo segnalato trovando una soluzione alle idee di base che avevamo in mente per il restyle del sito che va avanti da un anno.

Oltre al codice scritto prima che riguarda la visualizzazione desktop abbiamo usato queste soluzioni dopo aver sperimentato tutto il pomeriggio per la visualizzazione mobile che ora è piu coerente.

#av-mobile-menu a {color:white; } PER MOSTRARE IL TESTO BIANCO
#av-mobile-menu .sidebar-close, .av-mobile-arrow, a {color: white; } PER MOSTRARE LA X BIANCA
#av-mobile-menu .av-elem {background-color: black;} PER MOSTRARE TUTTO LO SFONDO NERO

Siamo molto contenti al momento ma rimangono dei dettagli che non riusciamo a capire.

-la barra viola in cima nel mobile col pulsante menu hamburger e la ricerca la vorremmo un po piu scura, non capiamo come modificarla?

-su desktop invece vorremmo che le voci selezionate sul menu rimanessero con sfondo nero una volta cliccate.
-sempre su desktop sarebbe ideale se la voce FILMOGRAFIA che apre il sottomenu invece di rimanere con quel viola chiaro fosse nera.

Se ci aiutate a trovare le classi corrette da richiamare ve ne saremo grati.

PS. per fare l'hover nelle voci del menu di navigazione si puo usare anche questa soluzione: #menu-navigazione a:hover {background-color: black} ..... vorremo chiedere se meglio usare questo abbreviativo o immettere il codice con la lista pulsante per pulsante come vi abbiamo mostrato sopra ?

[alemoppo]

-la barra viola in cima nel mobile col pulsante menu hamburger e la ricerca la vorremmo un po piu scura, non capiamo come modificarla?

Ma avete provato modificandolo da Aspetto -> Personalizza -> Colori ?

-su desktop invece vorremmo che le voci selezionate sul menu rimanessero con sfondo nero una volta cliccate.

[aria-current] 
{
  background-color: #000!important;
}

-sempre su desktop sarebbe ideale se la voce FILMOGRAFIA che apre il sottomenu invece di rimanere con quel viola chiaro fosse nera.

Ma deve rimanere nera sempre? Una brutta soluzione è questa:

#menu-item-500
{
  background-color: #000!important;
}

Ovviamente però se cambia l'id, non funzionerà più.

PS. per fare l'hover nelle voci del menu di navigazione si puo usare anche questa soluzione: #menu-navigazione a:hover {background-color: black} ..... vorremo chiedere se meglio usare questo abbreviativo o immettere il codice con la lista pulsante per pulsante come vi abbiamo mostrato sopra ?

Molto meglio questa, è da evitare l'utilizzo diretto degli "item", perché con modifiche del menu potrebbero modificarsi il numero.

Ciao!