.UserOnline, .UserOnlineInvisible
{
background: green url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
... all the other CSS...
}
.UserOffline
{
background: red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
... all the other CSS...
}
Divide it into tow parts in your EXTRA.css (something like that):
PHP:.UserOnline, .UserOnlineInvisible { background: green url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top; ... all the other CSS... }
PHP:.UserOffline { background: red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top; ... all the other CSS... }
Bumping my comment?I want to add these as ranks and then that green dot for online. Anyways, I want to have colors changeable so like purple ribbon that says admin, green for moderator, etc. Is there a way to do this?
Thanks.
I personally would prefer something far more subtle, such as the green dot I proposed a while ago.
That's easily done using css though.
However, here's an alternative location for the ribbon which doesn't require any additional space and doesn't overlap the avatar, user name or title.
View attachment 6157
Bumping my comment?
This post get's the sad face -->I only installed it for testing and haven't had it installed for months now.
I don't remember too much about it to be honest.
.UserOnline
{
font-weight: bold;
font-size: 10px;
color: @contentBackground;
background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid #5791BA;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-left: -{xen:calc '@content.padding-right + 5'}px;
}
.UserOnline span
{
background-color: #5791BA;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
.UserOffline
{
font-weight: bold;
font-size: 10px;
color: @contentBackground;
background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid #5791BA;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
opacity: 0.5;
filter: alpha(opacity='50');
margin-left: -{xen:calc '@content.padding-right + 5'}px;
}
.UserOffline span
{
background-color: #5791BA;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
.UserOnlineInvisible {
font-weight: bold;
font-size: 10px;
color: @contentBackground;
background: #f4a135 url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid #f4a135;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-left: -{xen:calc '@content.padding-right + 5'}px;
}
.UserOnlineInvisible span
{
background-color: #f4a135;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
I think you should swap the offline and invisible ones. Invisible ones = half opacity!Example:
View attachment 16887
- Add in EXTRA.css template:
Code:.UserOnline { font-weight: bold; font-size: 10px; color: @contentBackground; background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top; padding: 1px 5px; margin: -5px -5px 5px 5px; border: 1px solid #5791BA; border-radius: 3px; border-top-right-radius: 0px; display: block; float: right; position: relative; box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); margin-left: -{xen:calc '@content.padding-right + 5'}px; } .UserOnline span { background-color: #5791BA; border-top-right-radius: 3px; position: absolute; top: -4px; right: -1px; width: 5px; height: 4px; } .UserOffline { font-weight: bold; font-size: 10px; color: @contentBackground; background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top; padding: 1px 5px; margin: -5px -5px 5px 5px; border: 1px solid #5791BA; border-radius: 3px; border-top-right-radius: 0px; display: block; float: right; position: relative; box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); opacity: 0.5; filter: alpha(opacity='50'); margin-left: -{xen:calc '@content.padding-right + 5'}px; } .UserOffline span { background-color: #5791BA; border-top-right-radius: 3px; position: absolute; top: -4px; right: -1px; width: 5px; height: 4px; } .UserOnlineInvisible { font-weight: bold; font-size: 10px; color: @contentBackground; background: #f4a135 url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top; padding: 1px 5px; margin: -5px -5px 5px 5px; border: 1px solid #f4a135; border-radius: 3px; border-top-right-radius: 0px; display: block; float: right; position: relative; box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); margin-left: -{xen:calc '@content.padding-right + 5'}px; } .UserOnlineInvisible span { background-color: #f4a135; border-top-right-radius: 3px; position: absolute; top: -4px; right: -1px; width: 5px; height: 4px; }
No, because only the administrators see invisible tab.I think you should swap the offline and invisible ones. Invisible ones = half opacity!
.messageUserBlock h3.userText {
text-align: center;
@property "messageUserText";
padding: 0px;
@property "/messageUserText";
}
.UserOnline
{
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/online.png') no-repeat !important;
}
.UserOffline
{
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/offline.png') no-repeat !important;
}
.UserOnlineInvisible
{
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/invisible.png') no-repeat !important;
}
<span class="{$userStatus.class}"><span></span>{$userStatus.text}</span>
<span class="{$userStatus.class}"></span>
We use essential cookies to make this site work, and optional cookies to enhance your experience.