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

CSS Sprites

Discussion in 'XenForo Development Discussions' started by ragtek, May 23, 2011.

  1. ragtek

    ragtek Guest

    I'm trying to include a small sprite edit icon in my frontend.
    I've copied the code from acp option edit links for this.

    Code:
    <style type="text/css">
    .optionEditLink
    {
        font-size: 10px;
        line-height: 25px;
        position: absolute;
        top: 0px;
        right: 0px;
    }
        .optionEditLink .editText
        {
            display: inline-block;
            width: 16px;
            height: 25px;
            overflow: hidden;
            white-space: nowrap;
            text-indent: 9999em;
    
            background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;
        }
    
            a.optionEditLink:hover,
            .optionEditLink a:hover
            {
                text-decoration: none;
            }
    
            .optionEditLink:hover .editText
            {
                background-position: -16px;
            }
    </style>
    
    <a href="{xen:link 'htmlblock/edit'}" class="optionEditLink"><span class="editText">{xen:phrase edit}</span></a>
    But it's not working.
    As you see on this screenshot:

    it's not where it should be and there's no image + link
     

    Attached Files:

  2. Wuebit

    Wuebit Well-Known Member

    add
    Code:
            background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;
    
    under
    Code:
    .optionEditLink
    Its hard to see what your doing from that single "closed" firebug shot
     
  3. ragtek

    ragtek Guest

    It's still the same problem.

    I'm trying to add this image: [​IMG] at one of this 2 positions
    here.PNG
     
  4. Wuebit

    Wuebit Well-Known Member

    Is that top arrow pointing to "just" before the html block new name? or the line under it?
     
  5. ragtek

    ragtek Guest

    Left to it
     
  6. Wuebit

    Wuebit Well-Known Member

    And am guessing the text in in <h3> tags ? (could you screen shot the firebug open or give me a link to it so I can look)
     
  7. ragtek

    ragtek Guest

    This is my complete template
    Code:
    <style type="text/css">
    .optionEditLink
    {
        font-size: 10px;
        line-height: 25px;
        position: absolute;
        top: 0px;
        right: 0px;
        background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;
    
    }
        .optionEditLink .editText
        {
            display: inline-block;
            width: 16px;
            height: 25px;
            overflow: hidden;
            white-space: nowrap;
            text-indent: 9999em;
    
            background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;
        }
    
            a.optionEditLink:hover,
            .optionEditLink a:hover
            {
                text-decoration: none;
            }
    
            .optionEditLink:hover .editText
            {
                background-position: -16px;
            }
    </style>
    <div class="section">
        <div class="secondaryContent">
    
    <!..         <a href="{xen:link 'htmlblock/edit'}" class="optionEditLink"><span class="editText">{xen:phrase edit}</span></a>
    -->
    <h3>{$title}</h3>
                <div class="ugc baseHtml">
                    {xen:raw $code}
                </div>
            <a href="{xen:link 'htmlblock/edit'}" class="optionEditLink"><span class="editText">{xen:phrase edit}</span></a>
        </div>
    </div>
     
  8. Wuebit

    Wuebit Well-Known Member

    PHP:
    <style type="text/css">
    .
    ragtek {
    backgroundtransparent url('@imagePath/xenforo/widgets/edit-sprite.png'no-repeat 0px;
    }

    .
    optionEditLink
    {
        
    font-size10px;
        
    line-height25px;
        
    positionabsolute;
        
    top0px;
        
    right0px;
    }
        .
    optionEditLink .editText
        
    {
            
    displayinline-block;
            
    width16px;
            
    height25px;
            
    overflowhidden;
            
    white-spacenowrap;
            
    text-indent9999em;

        }

            
    a.optionEditLink:hover,
            .
    optionEditLink a:hover
            
    {
                
    text-decorationnone;
            }

            .
    optionEditLink:hover .editText
            
    {
                
    background-position: -16px;
            }
    </
    style>
    <
    div class="section">
        <
    div class="secondaryContent">

    <!..        <
    a href="{xen:link 'htmlblock/edit'}" class="optionEditLink"><span class="editText">{xen:phrase edit}</span></a>
    -->
    <
    h3 class="ragtek">{$title}</h3>
                <
    div class="ugc baseHtml">
                    {
    xen:raw $code}
                </
    div>
            <
    a href="{xen:link 'htmlblock/edit'}" class="optionEditLink"><span class="editText">{xen:phrase edit}</span></a>
        </
    div>
    </
    div>
    Try that ( will need to line the image up but it should show)
    Its hard for me :p I normaly look on firebug so might not work.
     
  9. ragtek

    ragtek Guest

    hm, still not working
     
  10. Wuebit

    Wuebit Well-Known Member

    Is there anyway I can see the page?
     
  11. Tilkißey

    Tilkißey Well-Known Member


    use this css
    remove top and right position valus ;)
    HTML:
    .optionEditLink
    {
        font-size: 10px;
        line-height: 25px;
        position: absolute;
    }
        .optionEditLink .editText
        {
            display: inline-block;
            width: 16px;
            height: 25px;
            overflow: hidden;
            white-space: nowrap;
            text-indent: 9999em;
    
            background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;
        }
    
            a.optionEditLink:hover,
            .optionEditLink a:hover
            {
                text-decoration: none;
            }
    
            .optionEditLink:hover .editText
            {
                background-position: -16px;
    }
     
    Vodkaholic likes this.
  12. ragtek

    ragtek Guest

    thx
    that did it:)
     

    Attached Files:

  13. Tilkißey

    Tilkißey Well-Known Member

    u re welcome =)
     
  14. ragtek

    ragtek Guest

    If you still want to see it: http://ragtek.org/xenforo/
    (I've enabled the icon for everybody, but only admins can edit the text^^)
     
  15. Wuebit

    Wuebit Well-Known Member

    hehe too late now TikiBey fixed it :p
     

Share This Page