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

XF 1.1 Padding online/offline icon.

Discussion in 'Troubleshooting and Problems' started by sydneyh, Oct 19, 2012.

  1. sydneyh

    sydneyh Member

    Hi guys.

    I'm fairly new towards xenforo and im quite clueless how to pad the offline/online icon a bit higher then it is now.
    So the icon can overlap a tiny bit of the avatar.

    example.jpg

    the current code i'm using is :
    HTML:
    /* Online and Offline */
        .UserOnline
        {
            font-weight: bold;
            font-size: 10px;
            color: @contentBackground;
            background: green;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border: 1px solid darkgreen;
            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;
        }
     
        .UserOffline, .UserOnlineInvisible
        {
            font-weight: bold;
            font-size: 10px;
            color: @contentBackground;
            background: gray;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border: 1px solid darkgreen;
            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: green;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
     
            .UserOffline span, .UserOnlineInvisible span
            {
                background-color: gray;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    They are already relatively positioned. Probably just adjust the "top" attributes which is the vertical position adjustment:

    Code:
            .UserOnline span
            {
                background-color: green;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
     
            .UserOffline span, .UserOnlineInvisible span
            {
                background-color: gray;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
    
     
    sydneyh likes this.
  3. sydneyh

    sydneyh Member

    Thanks jake I will work around with that :)!!
    U probably do know the answer:p.
     

Share This Page