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

XF 1.4 Switch the side of the online indicator

Discussion in 'Styling and Customization Questions' started by DRaver, Dec 28, 2014.

  1. DRaver

    DRaver Active Member

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

    Brogan XenForo Moderator Staff Member

    Edit the CSS as shown.

    upload_2014-12-28_11-43-26.png

    upload_2014-12-28_11-43-38.png
     
    DRaver likes this.
  3. DRaver

    DRaver Active Member

    Which CSS?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    The class names are visible in the screenshot.
     
  5. Tracy Perry

    Tracy Perry Well-Known Member

    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
     
  6. DRaver

    DRaver Active Member

    I dont get it. I think this is the original code:
    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.
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

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

    Tracy Perry Well-Known Member

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

    Code:
    .messageUserBlock div.avatarHolder .onlineMarker {
    top: -25px;
    left: -25px;
    }
    
    Try that in your EXTRA.css and you will see it should move it.
     
  9. DRaver

    DRaver Active Member

    hehe. I make this code change:

    Code:
    .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 :

    upload_2014-12-28_15-55-14.png
     
  10. jOOc

    jOOc Active Member

    Remove the spaces in the top & right properties
    Code:
    top:   9 px;
    right: 9 px;
    Should be:
    Code:
    top:   9px;
    right: 9px;
     
    DRaver likes this.
  11. Tracy Perry

    Tracy Perry Well-Known Member

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

    DRaver Active Member

    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.
     

Share This Page