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

.UserOffline (Online Status Indicator) [Code]

Discussion in 'Styling and Customization Questions' started by BioRage, Mar 4, 2012.

  1. BioRage

    BioRage Member

    Hello, I'm not the greatest at coding, so I'm seeking some help please;

    If your familiar with Online Status Indicator

    What I'm trying to do is simply change the background for .UserOnline to have a green background, and .UserOffline to have a red background.

    This is the current code.. I was thinking maybe it would be (below) however it didn't work to well

    Code:
        .UserOnline, .UserOffline, .UserOnlineInvisible
        {
            font-weight: bold;
            font-size: 10px;
            color: @contentBackground;
            background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border: 1px solid @primaryLight;
            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, .UserOffline span, .UserOnlineInvisible span
            {
                background-color: @primaryLight;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
    
    For Both offline + online, but I'll do offline for an example
    Code:
        .UserOffline
        {
            font-weight: bold;
            font-size: 10px;
            color: @contentBackground;
            background: @red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border: 1px solid @primaryLight;
            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 span
            {
                background-color: @red;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
    
    Is there something I'm missing?

    This is what I'm trying to end up with:
    Untitled.png Untitled.png

    Thanks,
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Don't use @red. Just use red.
     
  3. BioRage

    BioRage Member

    Okay, so this should work than?
    Code:
        .UserOnline, .UserOnlineInvisible
        {
            font-weight: bold;
            font-size: 10px;
            color: @contentBackground;
            background: green url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border: 1px solid @primaryLight;
            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, .UserOnlineInvisible span
            {
                background-color: green;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
    <!-- Offline -->
        .UserOffline
        {
            font-weight: bold;
            font-size: 10px;
            color: @contentBackground;
            background: red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border: 1px solid @primaryLight;
            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 span
            {
                background-color: red;
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                width: 5px;
                height: 4px;
            }
    
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It looks correct.
     
  5. BioRage

    BioRage Member

    For some reason the offline shows like this... Would you happen to know why?
    Untitled.png
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Remove that HTML comment. It doesn't belong in your style sheet:

    Code:
    <!-- Offline -->
    
     
  7. BioRage

    BioRage Member

    Thank's so much! :D
     
  8. bogus

    bogus Guest

    Since i am also using this again to indicate who´s online and who´s not, i would like to restrict the display of Online Status Ribbons for Guests and some Groups i added. Is there any way?
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    For template modifications like that you can surround the ribbon code with this conditional:

    Code:
    <xen:if is="{$visitor.user_id}">
    
    </xen:if>
    
    That will make it so the code inside is only shown for users who are logged in (excludes guests).
     
    bogus likes this.
  10. bogus

    bogus Guest

    Hi Jake. Many Thanks.
    Is there an Error in the Indicator Addon? I was online but the Ribbon shows offline?. Maybe anyone knows about it?
     

Share This Page