Suggestion: Inline avatar badges

debynory

I think: status icon (green online, grey offline) at the bottom of the avatar, on the right or left, and then all the badges at the top of the avatar (like now), on the right, close together

MirHamid

debynory

I like the fifth

jordanjay29

MFW my edit corrections are immortalized in mockups. 😳

MirHamid

jordanjay29
Because you were just online

psylancholy

Franz
Could you provide CSS with which I can make badges appear like #2/3 on my forum?

Mark73

psylancholy Could you provide CSS with which I can make badges appear like #2/3 on my forum?

I would like to know this one as well

MirHamid

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

MirHamid

afboyxiyang

MirHamid
😃

[deleted]

Woah, your ideas are nice! I am currently applying some of those on my forum 😃

Mark73

@MirHamid Are these only simple mockups or you actually set up some CSS modifications?

MirHamid

Mark73 css

Mark73

MirHamid Is there any chance that you could share this with us? 😃

[deleted]

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

MirHamid

[deleted] I haven't installed it yet

Mark73 I do this live with inspect and I don't save it. Which one do you want?

Mark73

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

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

Mark73

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

Ralkage

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

debynory

Hi, how do you do this?

[deleted]

Mark73 A link to a random post on my forum provides an alternative flavour in case you'd like to consider this also.

I've had this layout for almost a year but never shared it 🙂

https://hub.phenomlab.com/d/2580-full-stack-web-development

Arnold

[deleted] looks great! Will you share it? 😉

[deleted]

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

« Previous Page Next Page »