I just inlined all the styling since it's easy to do via Firebug. But for production, they should be separated. This html+css markup should achieve the same effect: (untested in other browsers)What css doc are you refrenceing with that html,
<div class="messageUserBlock extended">
<!-- Extra markup for arrow -->
<div class="arrow"><span></span></div>
<!-- Width of image less than or equal to 122px -->
<img class="userRank" src="path/to/your/user_rank.png" />
</div>
.messageUserBlock.extended {
margin-top: 10px;
padding: 2px 0pt;
background: #F0F7FC;
}
.messageUserBlock.extended .arrow {
border-color: transparent transparent #D7EDFC;
border-style: none solid solid;
border-width: medium 10px 10px;
position: absolute; top: -10px; left: 10px;
}
.messageUserBlock.extended .arrow span {
border-color: transparent transparent #F0F7FC;
border-style: none solid solid;
border-width: medium 10px 10px;
position: absolute; top: 1px; left: -10px;
}
.messageUserBlock.extended .userRank {
display: block;
margin: 0 auto;
}
Personally I would put them in the postbit directly below the user title.
You bring up a description in my mind. This design is fad-less (hyphenated to prevent making up words) and I say this with the greatest respect and regard to Jonathan. To elaborate on that I would like to point out that with color changes and pattern overlays you would be hard pressed to find a board that couldn't fit this in with minimal modification. The word I was thinking of by the way was universal.I love the nice clean streamlined look of them.
And as an aside, I'm happy to see that the "glass" fad is finally fading out.
You will need to crop the images to fit.They are bigger than the reserved space. How can I fix? xD
You will need to crop the images to fit.
The message template is 124px wide.
It's simple, just change the user rank from 'Owner' to '<img src="pathtoimage/owner.png" alt="Owner">How could I apply this to every Owner, Admin, Super Mod, Mod, Respected and Member of my community?
I would need multi in some of the members...
Well, I'm using this, but it shows up in every user...It's simple, just change the user rank from 'Owner' to '<img src="pathtoimage/owner.png" alt="Owner">
Well, that's not really the objective.You got to change that in the admin cp on your profile
Well that code wont do much, because it would show the same image to all the users...I'm not the brightest when it comes to this, so I apologize lol. What code did you use and where did you paste it? in the CSS field for usergroups? I have been trying all sorts of combos with my test image and have gotten no where.
We use essential cookies to make this site work, and optional cookies to enhance your experience.