CSS - header e pulsanti

Salve a tutti,
avrei bisogno di un piccolo aiuto con i css, in particolare:

1- Andando sulla home del blog, http://mangadata.altervista.org/, si vede in alto al centro un rettangolo azzurro al posto del nome del sito: io vorrei togliere tutta la parte bianca intorno a tale rettangolo (a sinistra, a destra e in basso), in modo da poter inserire un'immagine (di grandezza pari a quella del rettangolo) contenente già il nome del blog. In particolare ho agito sull'id site-title, inserendo il seguente codice:

#site-title
{
  font-size: 0px;
  width: 441px;
  height: 300px;
  opacity: 0.5;
  background-color: #3399FF;
  margin: auto;
}

il font-size 0px; mi è servito per far scomparire la scritta presente di default.

2- vorrei personalizzare il menù di navigazione, in particolare i pulsanti (sto lavorando sul tasto "home"). Sono riuscito a cambiare colore al passaggio del mouse e quando il pulsante non è cliccato, ma non riesco proprio a cambiare il colore quando è cliccato:

#menu-item-57 a
{
  border-radius: 7px;
}
#menu-item-57 a:link {
  background-color: #3399FF;
}
#menu-item-57 a:visited {
  background-color: #3399FF;
}
#menu-item-57 a:hover {
  background-color: #afd1ed !important;
}

anche andando ad inserire #menu-item-57 a:active non mi leva quel #239bc7!

Qualche buon'anima mi riesce ad aiutare?
Grazie mille.

[karl94]

1- Andando sulla home del blog, http://mangadata.altervista.org/, si vede in alto al centro un rettangolo azzurro al posto del nome del sito: io vorrei togliere tutta la parte bianca intorno a tale rettangolo (a sinistra, a destra e in basso), in modo da poter inserire un'immagine (di grandezza pari a quella del rettangolo) contenente già il nome del blog.

Non c'è bisogno di mettere mano al foglio di stile per questo, puoi fare tutto dalla sezione Personalizza che trovi sotto Aspetto nel pannello di amministrazione di WordPress.

2- vorrei personalizzare il menù di navigazione, in particolare i pulsanti (sto lavorando sul tasto "home"). Sono riuscito a cambiare colore al passaggio del mouse e quando il pulsante non è cliccato, ma non riesco proprio a cambiare il colore quando è cliccato:

#menu-item-57 a
{
  border-radius: 7px;
}
#menu-item-57 a:link {
  background-color: #3399FF;
}
#menu-item-57 a:visited {
  background-color: #3399FF;
}
#menu-item-57 a:hover {
  background-color: #afd1ed !important;
}

anche andando ad inserire #menu-item-57 a:active non mi leva quel #239bc7!

Qualche buon'anima mi riesce ad aiutare?
Grazie mille.

Con la pesudo-classe active mi sembra funzionare, puoi riportare il codice che stai provando?

Ti riferisci a aspetto > personalizza > testata > immagine della testata? Perché mi dice di inserire per forza un'immagine di 1110 x 255 pixel e se ne metto una più piccola me la taglia da solo... e comunque non mi leva il bianco di sfondo.

2- Il codice è il seguente:

#menu-item-57 a
{
  border-radius: 7px;
}
#menu-item-57 a:link {
  background-color: #3399FF;
}
#menu-item-57 a:visited {
  background-color: #3399FF;
}
#menu-item-57 a:hover {
  background-color: #afd1ed !important;
}
#menu-item-57 a:active {
  background-color: black;
}

Ho aggiunto la classe a:active, quindi dovrebbe diventare nero il pulsante quando è attivo, invece no.

[karl94]

Ti riferisci a aspetto > personalizza > testata > immagine della testata? Perché mi dice di inserire per forza un'immagine di 1110 x 255 pixel e se ne metto una più piccola me la taglia da solo... e comunque non mi leva il bianco di sfondo.

In che senso la taglia? Intanto inseriscila, poi vediamo come sistemarla.

2- Il codice è il seguente:

Ho aggiunto la classe a:active, quindi dovrebbe diventare nero il pulsante quando è attivo, invece no.

Aggiungi !important.

[darkwolf]

Non son sicuro di aver capito bene, ma se vuoi solo togliere il bianco ti basta cambiare:

#site-header hgroup {
background-color: #fff;
}

in:

#site-header hgroup {
/*background-color: #fff;*/
}

oppure (meglio) sovrascrivere via plugin (eg, il custom css fornito da altervista):

#site-header hgroup {
background-color: transparent !important;
}

@darkwolf
Grazie! Era quello che cercavo!

@karl94
Nel senso che l'immagine che volevo inserire è 441x300 px e, quando la inserisco come immagine della testata, mi obbliga a fare un ritaglio in modo da avere (in proporzione) 1110x255 px... comunque con quello che mi ha consigliato darkwolf ho tolto lo sfondo bianco che mi dava fastidio, quindi dovrei farcela ora.

Ho inserito l'important (l'avevo già fatto in alcune prove, poi mi son dimenticato di metterlo quando me l'ha chiesto). Ora il codice è il seguente:

#menu-item-57 a
{
  border-radius: 7px;
}
#menu-item-57 a:link {
  background-color: #3399FF;
}
#menu-item-57 a:visited {
  background-color: #3399FF;
}
#menu-item-57 a:hover {
  background-color: #afd1ed !important;
}
#menu-item-57 a:active {
  background-color: black !important;
}

ma il pulsante non cambia colore anche se attivo.
Se però prova a cliccare sul pulsante col tasto destro del mouse, senza rilasciare il tasto destro, diventa nero finché non si rilascia.
Io vorrei rimanesse nero quando mi trovo sulla home, ossia quando il pulsante è attivo.

[karl94]

ma il pulsante non cambia colore anche se attivo.
Se però prova a cliccare sul pulsante col tasto destro del mouse, senza rilasciare il tasto destro, diventa nero finché non si rilascia.

Cambia correttamente colore, ma con un click breve non si nota molto per via della animazione.

Io vorrei rimanesse nero quando mi trovo sulla home, ossia quando il pulsante è attivo.

Questa è una cosa differente, la pseudo-classe active non c'entra nulla. Per questo sfrutta la classe current-menu-item.

Grazie! Ora sono riuscito a fare quello che mi interessava: ho inserito questo codice

#menu-item-57 a
{
  border-radius: 7px;
}
#menu-item-57 a:link {
  background-color: #3399FF;
}
#menu-item-57 a:visited {
  background-color: #3399FF;
}
#menu-item-57 a:hover {
  background-color: #afd1ed !important;
}
.current-menu-item a
{
  background-color: black !important;  
}

e sembra funzionare.
Grazie davvero per l'aiuto e la pazienza.

Scusatemi se riesumo questa discussione, ma avrei bisogno di un altro aiuto, inerente sempre agli stessi argomenti:
ho personalizzato il menù di navigazione, ma mi sono scontrato col seguente problema: se provo a cliccare col tasto sinistro del mouse su un pulsante non attivo della barra di navigazione (per esempio il tasto "pagina di prova" se ci si trova nella home), poi, senza rilasciare, trascino in un qualsiasi altro punto della pagina e infine rilascio il tasto sinistro del mouse, il pulsante (ad esempio "pagina di prova") cambia colore di sfondo, che diventa quello standard del tema altervista Keith.

Non ho la più pallida idea di come poter risolvere.

Non mi darebbe molto fastidio, ma lo stesso cambio di colore (da quello impostato da me a quello standard di altervista Keith) si riscontra anche quando, cliccando su un pulsante del menù di navigazione e spostando il cursore, si attende il caricamento della pagina.
Spero di essere riuscito a spiegarmi e che possiate di nuovo aiutarmi.
Il codice inserito da me è il seguente:

#access
{
  margin-top: 25px;
  border-radius: 10px 7px 7px 10px;
}

#menu-navigazione
{
  background-color: #a3daf5;
  box-shadow: 0px 0px 1px #ddd, inset 0px 0px 8px #0c6ad3 !important;
  -webkit-box-shadow: 0px 0px 1px #ddd, inset 0px 0px 8px #0c6ad3 !important;
  -moz-box-shadow: 0px 0px 1px #ddd, inset 0px 0px 8px #0c6ad3 !important;
  font-size: 17px !important;
  border-radius: 10px 7px 7px 10px;
  -moz-border-radius: 10px 7px 7px 10px;
  -webkit-border-radius: 10px 7px 7px 10px;
}
.menu a
{
  color: black !important;
}

.menu a:hover
{
  background-color: #3998e2 !important;
  color: #ecf4f8 !important;
}

.current-menu-item a
{
  background-color: #3998e2 !important;
  color: #ecf4f8 !important;
}

/*tasto "home"*/
#menu-item-57 a
{
  border-right: 2px #3998e2 solid;
  border-radius: 8px 0 0 8px;
}

/*tasto 2*/
#menu-item-58 a
{
  border-right: 2px #3998e2 solid;
}

Grazie in anticipo.

[karl94]

Quello accade quando il collegamento riceve il focus, quindi puoi usare la relativa pseudo-classe :focus per specificare l'aspetto del collegamento in quelle condizioni.

Quello accade quando il collegamento riceve il focus, quindi puoi usare la relativa pseudo-classe :focus per specificare l'aspetto del collegamento in quelle condizioni.

Hai ragione:
ho inserito

.menu a:focus
{
  background-color: #3998e2 !important;
  color: #ecf4f8 !important;
}

e funziona. Grazie di nuovo!