CSS Sprites

[ragtek]

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.

<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

 

[x4rl]

add

        background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;

under

.optionEditLink

Its hard to see what your doing from that single "closed" firebug shot

 

[ragtek]

add

        background: transparent url('@imagePath/xenforo/widgets/edit-sprite.png') no-repeat 0px;

under

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

at one of this 2 positions

 

[x4rl]

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

 

[ragtek]

Is that top arrow pointing to "just" before the html block new name? or the link under it?

Left to it

 

[x4rl]

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)

 

[ragtek]

This is my complete template

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

 

[x4rl]

<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 I normaly look on firebug so might not work.

 

[ragtek]

hm, still not working

 

[x4rl]

hm, still not working

Is there anyway I can see the page?

 

[DrYontem]

use this css
remove top and right position valus

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

 

[ragtek]

use this css
..

thx
that did it

 

[DrYontem]

thx
that did it

u re welcome =)

 

[ragtek]

Is there anyway I can see the page?

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^^)

 

[x4rl]

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^^)

hehe too late now TikiBey fixed it