• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 online ribbon

#2
You thought about using the "Online Banner" Add-on?

Failing that:

Use this CSS (Open up "message_user_info" template)

.messageUserBlock div.avatarHolder .onlineMarker {
position: absolute;
top: 112px;
left: 112px;

border: 8px solid transparent;
border-bottom-color: rgb(127, 185, 0);
border-right-color: rgb(127, 185, 0);
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-khtml-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-khtml-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-khtml-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

NOTE -
- This probably wont work on mobiles..
- The bold text is what I replaced I.E. "border-bottom-right-radius: 3px;" replaces "border-bottom-left-radius: 3px;"

Result:

upload_2014-9-14_13-35-36.png

upload_2014-9-14_13-34-51.png
 
Last edited:

Brad P

Active member
#3
You thought about using the "Online Banner" Add-on?

Failing that:

Use this CSS (Open up "message_user_info" template)

.messageUserBlock div.avatarHolder .onlineMarker {
position: absolute;
top: 112px;
left: 112px;

border: 8px solid transparent;
border-bottom-color: rgb(127, 185, 0);
border-right-color: rgb(127, 185, 0);
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-khtml-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-khtml-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-khtml-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

NOTE -
- This probably wont work on mobiles..
- The bold text is what I replaced I.E. "border-bottom-right-radius: 3px;" replaces "border-bottom-left-radius: 3px;"

Result:

View attachment 83823

View attachment 83822
Many thanks for the reply.

I have played around with it and managed to get it to fit without messing around with templates. But I must admit I like it better in the bottom right :)