XF 1.4 Switch the side of the online indicator

[DRaver]

I don´t want that on the left side. I want it on the right side. What must I do?

 

[Paul B]

Edit the CSS as shown.

 

[DRaver]

Which CSS?

 

[Paul B]

The class names are visible in the screenshot.

 

[TPerry]

And if you are using a custom style (or a child style of a paid style) then you can do a simple template search for that class and change it in the appropriate CSS template for that style... otherwise you would use EXTRA.css

 

[DRaver]

I dont get it. I think this is the original code:

.messageUserBlock div.avatarHolder .onlineMarker
            {
                position: absolute;
                top: {xen:calc '@messageAvatarHolder.padding-top - 1'}px;
                left: {xen:calc '@messageAvatarHolder.padding-right - 1'}px;
              
                @property "messageOnlineMarker";
                border: 7px solid transparent;
                border-top-color: rgb(127, 185, 0);
                border-left-color: rgb(127, 185, 0);
                border-top-left-radius: 5px;
                border-top-right-radius: 3px;
                border-bottom-left-radius: 3px;
                @property "/messageOnlineMarker";
            }

Is it right and what must i change? Sorry, I am not a coder.

 

[Paul B]

Change the CSS to match how it is in the screenshot in my post above - essentially left should be right and vice versa.

 

[TPerry]

It's pretty much self explanatory in that code you gave. It's the TOP and LEFT settings that you need to change.

.messageUserBlock div.avatarHolder .onlineMarker {
top: -25px;
left: -25px;
}

Try that in your EXTRA.css and you will see it should move it.

 

[DRaver]

hehe. I make this code change:

.messageUserBlock div.avatarHolder .onlineMarker
            {
                position: absolute;
                top:   9 px;
                right: 9 px;
              
                @property "messageOnlineMarker";
                border: 7px solid transparent;
                border-top-color: rgb(127, 185, 0);
                border-left-color: rgb(127, 185, 0);
                border-top-left-radius: 5px;
                border-top-right-radius: 3px;
                border-bottom-left-radius: 3px;
                @property "/messageOnlineMarker";
            }

The Result :

 

[jOOc]

Remove the spaces in the top & right properties

top:   9 px;
right: 9 px;

Should be:

top:   9px;
right: 9px;

 

[TPerry]

If you can't get it working, give the link to your site and I'll grab the code for you.

 

[DRaver]

I have solved the problem. The problem was, that my own XenForo SEO AddOn Tool "Panda Buster", had problems with the avatar area.
Now its works. Thanks.