• Marko

    Il Drago
  • Modificato
  • 200+ Like
  • Reputazione
  • 12.3

Oggi voglio condividere con voi questa bella modifica grafica, fattibile con poche righe di css, vi permetterà di far illuminare TUTTO l'avatar di un utente quando è online, e mettere i badge alle destra dell'username, invece che sull'avatar stesso.

esempio prima:

esempio dopo:

Da aggiungere nel pannello amministrazione/aspetto/css

@media (max-width: 768px) {
.PostUser-badges {
    position: relative;
    top: 0px;
    left: 0px;
    width: 32px;
}
}

.PostUser-badges.badges {
  float: none;
  width: auto;
  margin-left: 4px;
  top: -2px;
}
.PostUser-badges.badges li span {
  margin-left: 4px;
}
.PostUser .UserOnline {
  position: absolute;
  left: -87px;
  top: -3px;
  z-index: -1;
}
.PostUser .UserOnline .icon {
  font-size: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 64px;
  box-shadow: 0 0px 3px 3px;
}

ed il codice per cambiare il colore del cerchio è il seguente:

.PostUser .UserOnline .fa-circle {
    color: green;
}
  • Feb 19 2021
  • 191
  • 680
  • 222
  • 17
Marko ha cambiato il titolo in Badge grado a destra del nome utente e online circle .
  • GGatsu

      Conoscitore
    • 10+ Like
    • Reputazione
    • 0

    Grazie per questo css. Ho notato che in user agent android/mobile, non viene visualizzato il cerchio colorato di verde quando si è online.
    Mentre in desktop mode, si sovrapppongono i vari colori nel cerchio con il gruppo utente e il colore verde per chi è online.

    • Marko ha risposto a questo messaggio
    • Mar 09 2021
    • 3
    • 67
    • 19
    • 0

      Ciao, sembra che tu sia interessato a questo post!

      Quando crei un account, potremo ricordare esattamente cosa hai letto, in modo che tu possa riprendere esattamente da dove hai lasciato. Riceverai inoltre notifiche, qui o via email, quando qualcuno ti risponde. Potrai anche mettere "Mi piace" per mostrare il tuo apprezzamento. Clicca sul pulsante qui in basso per creare un account!

      • Marko

        Il Drago
      • Modificato
      • 200+ Like
      • Reputazione
      • 12.3

      Gatsu puoi mandare uno screen per capire meglio?

      se vuoi vederli anche su mobile puoi provare:

      @media only screen and (max-width: 480px) {
      
      .PostUser-badges {
          position: relative;
          top: 0px;
          left: 0px;
          width: 32px;
      }
      
      
      .PostUser-badges.badges {
        float: none;
        width: auto;
        margin-left: 4px;
        top: -2px;
      }
      .PostUser-badges.badges li span {
        margin-left: 4px;
      }
      .PostUser .UserOnline {
        position: absolute;
        left: -87px;
        top: -3px;
        z-index: -1;
      }
      .PostUser .UserOnline .icon {
        font-size: 64px;
        border: 2px solid #fff;
        border-radius: 50%;
        line-height: 64px;
        box-shadow: 0 0px 3px 3px;
      }
      
      }
      • Reward 1Reward 2Reward 3Reward 4
      • Gatsu ha risposto a questo messaggio
      • Feb 19 2021
      • 191
      • 680
      • 222
      • 17
        • GGatsu

            Conoscitore
          • 10+ Like
          • Reputazione
          • 0

          Marko Il problema riguarda solo per la mancata visualizzazione per chi è online, in modalita user agent Android.

          In Desktop mode funziona ma i colori si sovrappongono, ecco degli screen.

          https://ibb.co/NmnBhjk
          https://ibb.co/tqxvV39

          • Marko ha risposto a questo messaggio
          • Mar 09 2021
          • 3
          • 67
          • 19
          • 0
            • Marko

              Il Drago
            • 200+ Like
            • Reputazione
            • 12.3

            Gatsu hai provato l'ultimo css che ho postato?

            • Reward 1Reward 2Reward 3Reward 4
            • Gatsu ha risposto a questo messaggio
            • Feb 19 2021
            • 191
            • 680
            • 222
            • 17
              • GGatsu

                  Conoscitore
                • 10+ Like
                • Reputazione
                • 0

                Marko Si è uguale

                • Mar 09 2021
                • 3
                • 67
                • 19
                • 0
                • Marko

                  Il Drago
                • Modificato
                • 200+ Like
                • Reputazione
                • 12.3

                Faccio qualche prova

                edit provato con le media query tipo a 320px?

                • Reward 1Reward 2Reward 3Reward 4
                • Feb 19 2021
                • 191
                • 680
                • 222
                • 17