• [deleted]

  • Post #56

Your forum needs to look epic, can you share the link? 😃

    for example

    /* end of all css codes
******************************************************/
.PostUser .UserOnline {
  position: absolute;
  left: -60.5px;
  top: 56px;
  border-radius: 50%;
  border: 2px solid #fff;
  line-height: 0;
}
.PostUser-badges.badges {
  margin-left: -64px;
  margin-top: 80px;
  width: 22px;
}
.PostUser-badges.badges li {
  display: block;
}
.PostUser-badges.badges li span {
  border-radius: 0;
  /* display: block; */
  margin: auto;
}
.PostUser-badges.badges li:first-of-type span {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.PostUser-badges.badges li:last-of-type span {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

      MirHamid I don't want to sound stingy and ask for them all to try them out. But next time you do more of these just share the css, only if you don't mind sharing it of course!

        MirHamid By the way, this seems to be hiding badges on mobile view

          • [deleted]

          • Post #67
          • Edited

          Arnold Yep

          .Post-Rank {
    color: gray;
    font-size: 10px;
    margin-left: 10px;
    display: inline;
}

.PostUser-badges {
    position: relative;
    width: 0px;
    margin-left: 10px;
    display: inline;
}
time {
    padding-left: 15px;
    display: inline;
}

          Note, that you don't need the .Post-Rankif you are not using ranks extension

          And to make the mobile view look nice

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

              MirHamid somehow, visually, my brain is expecting those icons to be above the avatar and inline with the username 🤔

                Mark73 debynory psylancholy 

                .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;
}

                that is possible with Pollux thank you

                          • [deleted]

                          • Post #72

                          MirHamid Its not public yet, maybe a other person with the level ranks extension can post here?

                              [deleted] you can find the relative LESS values here. Try playing around with them using your browser's inspector to see what fits your needs 😉

                              You can also post your question in the Level Ranks discussion, DM me, or ask in the Flarum Community Discord 🙂