Where to put CSS in my WCF style
A few days ago I set an alternative marking of users online in messages for Elevenfour. To show what I mean, when saying user online marking, have a look at this little pic in Blue Temptation style:
What we're trying to achive is this:
Users who are online receive a colored border for their avatar.
Users who are offline won't get displayed their avatar in colors, their avaar will be grayscaled.
The border of the avatars gets a little thicker.
As I already said, all we need is some CSS.
First of all we need to adjust the border of the avatars. but we only want to do this in messages - to be more precise only the messageSidebar is of intererest. Other parts of the WCF don't use the online marking so it doesn't make sense to change it elsewhere. The class we need to style is userAvatarImage. That's the first part of our code:
Next we will grayscale the avatars.
Since WCF only marks online users we have to grayscale all avatars first and say that's the default.
Grayscaling is achieved using CSS filters. The code will be extended by filter: grayscale(1);. Now we see the first "problem" - blink browsers (Chrome, Vivaldi, Opera) don't yet know this code. So the ignore. But there's a prefixed version available and that's -webkit-filter: grayscale(1);. So these browsers now do what we want. The code now looks like this:
That's how it looks in our forum:
Let's now code the declarations for users online. If a user is online the messageSidebar gets extended by the class userOnline.
Attention: WCF always needs a little time to display that you're only. So there is a short time you're displayed offline while surfing the forum.
To avoid duplicate online marking we first remove the green "online" badge.
So now we have to remove the grayscaling and set the colored border. We're using a CSS gradient so our final code looks like this:
-webkit-filter: grayscale(1); /* enable grayscale, Webkit syntax */
filter: grayscale(1); /* enable grayscale */
background-image: -webkit-linear-gradient(45deg, @wcfPageLinkColor 0%,@wcfTabularBoxBackgroundColor 100%);
background-image: linear-gradient(45deg, @wcfPageLinkColor 0%,@wcfTabularBoxBackgroundColor 100%);
-webkit-filter: grayscale(0); /* disable grayscale, Webkit syntax */
filter: grayscale(0); /* disable grayscale */
In our forum it looks like this:
You can of course set different colors. And blue may not be the best choice here but it shows how it works. As an alternative to a CSS gradient you could also use background-color instead to have a single colored border.
As I said earlier: Support isn't that well. So let's have a look at caniuse:
Regarding CSS gradients you could say support is given. All browsers support by WoltLab with WCF support CSS gradients. With a view to old Android browsers that are still in use I suggest that you keep the webkit syntax in your style.
For CSS filters the situation is different. Internet Explorer and Opera Mini don't support them. It's fair to say these browsers are outdated but that doesn't mean they're not used anymore. As stated earlier all Blink browsers (Chrome, Vivaldi, Opera) still need the webkit syntax. Again it's good to keep so older Safari (mobile) versions get supported, too.
Although CSS filters don't have the same support as CSS gradients now it is still save to use this method. Since you still see if a user is online by having a look at the colored border of the avatar. So if you like you can put the Code to your CSS declarations in you WCF style.
Questions on the use of CSS gradients? In 2011 I wrote an article on CSS gradients: Gradients with CSS
Do you have another method to mark a user online or do you have questions on this method? Let me know in the comments below.
P.S.: Since the comment system isn't best for support you may want to open a topic in the forum if you had extensive questions.