CSS per aumentare l'altezza di logo e header da desktop a mobile

Dal desktop del mio PC, tramite l’ispettore in Firefox, il tag CSS che manipola l’altezza del logo è:

.d-header .title {
  --d-logo-height: 4em;
}

Tuttavia, noto che quando inserisco questo tag CSS nel tema predefinito nell’editor CSS sotto desktop, non fa nulla all’altezza del logo come visualizzato sul mio PC desktop né sul telefono cellulare.
Tuttavia, se inserisco lo stesso codice CSS sotto mobile, cambia l’altezza del logo non solo sul mio PC desktop ma anche sul telefono cellulare. È un bug in Discourse o mi sfugge qualcosa.

1 Mi Piace

Ciao,

Nel caso, dove hai messo questo CSS?

2 Mi Piace

È sempre buona norma cercare di formulare una richiesta di aiuto un po’ meglio. Molte persone qui sono super desiderose di aiutare, ma ci sono così tanti modi in cui le cose possono essere fatte, che una buona spiegazione è fondamentale per ottenere aiuto il prima possibile :slight_smile:

Inoltre, se stai testando le cose localmente, non dimenticare di aggiungere ?mobile_view=1 all’URL.

3 Mi Piace

Dal desktop del mio PC, tramite l’ispettore in Firefox, il tag CSS che manipola l’altezza del logo è:

.d-header .title {
  --d-logo-height: 4em;
}

Tuttavia, noto che quando inserisco questo tag CSS nel tema predefinito nell’editor CSS sotto desktop, non fa nulla all’altezza del logo vista sul mio PC desktop né sul telefono cellulare.
Tuttavia, se inserisco lo stesso codice CSS sotto mobile, cambia l’altezza del logo non solo sul mio PC desktop ma anche sul telefono cellulare. È un bug in Discourse o mi sfugge qualcosa?

Non riesco a riprodurre questo problema, ho provato a ricreare quello che penso tu stia facendo:

Cambia correttamente su mobile e non influisce sul desktop.

Se aggiungo questo CSS nell’editor, funziona come previsto per il desktop:

E per il mobile, devi solo impostare l’altezza per il logo, non per l’header:

Spero che questo aiuti.

1 Mi Piace

Grazie, sono passato a un’altra macchina, una che esegue ubuntu 22.04 (server web), il codice CSS nel bucket CSS desktop è stato visualizzato correttamente, quindi forse un problema del browser sul mio altro PC desktop con Windows 7.
Ho notato che sembro essere limitato nel bucket CSS mobile a:

.d-header #site-logo {
  height: 3em;
}

Qualsiasi tentativo di andare oltre 3em non aumenta l’altezza del logo sul mio cellulare, GS23, anche dopo aver aggiornato la cache.

Pensieri?

Sì, prova a rimuovere max-width dal logo, dovrebbe liberarlo da qualsiasi vincolo.

1 Mi Piace

Grazie per l’input, non sono riuscito a trovare quell’opzione nelle impostazioni, viene fatta tramite CSS o un input da riga di comando in Rails e, in tal caso, come si presenta?

Sarebbe CSS, così:

.d-header #site-logo {
  max-width: unset;
}

Se non funziona, aggiungi !important.

3 Mi Piace

Grazie per il tuo aiuto:

Per coloro che verranno dopo di me e desiderano aumentare le dimensioni del loro logo sia nella visualizzazione desktop che mobile.

  1. Personalizza → Temi → Predefinito → Modifica CSS/HTML

a) Inserisci nel blocco Desktop:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b) Inserisci nel blocco Mobile:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
2 Mi Piace

Quelle potrebbe essere una regola:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

Penso che potresti compattare anche la prima regola, ma non ricordo come al momento.

2 Mi Piace

Un’altra cosa che sarebbe utile aggiungere è come ridurre il padding, in modo da spostare il logo a sinistra nella visualizzazione mobile - pensieri?

.wrap {
  padding-left: 0;
}

A questo punto, potrebbe essere una buona idea seguire un corso introduttivo al CSS perché:

Maggiori informazioni sullo sviluppo dei propri temi possono essere lette nella categoria dev.

2 Mi Piace

Grazie Charlie, lo apprezzo.
Ho familiarità con l’uso di Inspector, ad esempio Firefox, e con l’ottenimento di alcune soluzioni.

Qualche pensiero sul perché il ridimensionamento del logo non faccia parte della funzionalità principale di Discourse. Il branding di qualsiasi sito web è fondamentale e la mancanza di granularità a questo riguardo è sorprendente.

1 Mi Piace

La “manipolazione del logo” è perfettamente possibile, proprio come tutti gli altri tipi di styling, all’interno di temi e componenti tematici.
Dovrai semplicemente imparare le basi di html/css/js e consultare l’abbondanza di documentazione su meta per fare le cose da solo, oppure dovrai cercare qualcuno da assumere per apportare le modifiche desiderate.
Quest’ultima opzione può essere fatta nella categoria marketplace.

Dato che la tua domanda originale ha ricevuto risposta, penso che possiamo chiudere questo argomento ora.
Ti auguro il meglio per il tuo forum.

3 Mi Piace

Personalmente, non mi aspetterei che il ridimensionamento del logo di un’azienda faccia parte della funzionalità principale di una piattaforma di forum. Inoltre, il nostro software è open source e forniamo tale supporto per aiutarti a raggiungere questo obiettivo, come abbiamo fatto sopra. Offriamo anche molte informazioni su come imparare a sviluppare le tue personalizzazioni.

3 Mi Piace

Ciao Charlie,

Con “Manipolazione del logo” intendevo la possibilità di cambiare le dimensioni del logo all’interno dell’interfaccia utente.

Grazie per il tuo aiuto.

Questo argomento è stato chiuso automaticamente 30 giorni dopo l’ultima risposta. Non sono più consentite nuove risposte.