CSS Sprites

  • Thread starter Thread starter ragtek
  • Start date Start date
R

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
 

Attachments

  • cssproblem.webp
    cssproblem.webp
    45.3 KB · Views: 8
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
 
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
It's still the same problem.

I'm trying to add this image:
edit-sprite.png
at one of this 2 positions
here.webp
 
Is that top arrow pointing to "just" before the html block new name? or the line under it?
 
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)
 
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>
 
PHP:
<style type="text/css">
.ragtek {
background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;
}

.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;

    }

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

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;
}
 
Top Bottom