CSS Move text out of the way, but not the background image

  • Resolved Florence

    (@floortjahh)


    12 years, 5 months ago

    Hello!

    It shouldn’t be this hard but I can’t seem to get it right. I have a plugin which displays a user’s bookmarked post in a list. After the name of post it says ‘delete’. The plugin comes with a handy custom CSS area which will let you edit just that ‘delete’ link.

    Now, what I want is remove the ‘delete’ link all together, and replace is with an image, a red X.

    Here’s what I’ve got:

    #bookmark-list a.upb_del_bookmark {
display: inline-block;
text-indent: -999px;
background-image: url('https://www.cookingblondes.nl/wp-content/uploads/2012/09/X-delete.png');
background-repeat: no-repeat;
}

    I moved the text off screen, but now the background image is gone as well! I tried adding background position but that didn’t work. I’m out of ideas. Ugh…

Viewing 15 replies - 1 through 15 (of 15 total)

  • (https://www.cookingblondes.nl/wp-content/uploads/2012/09/X-delete.png)

    Hi I have searched your website for this image in your images folder but it does not seem to be there? Try re uploading it then changing the image link in your CSS.

    Hope this helps?

    Thread Starter Florence

    (@floortjahh)

    Oh no that particular image isn’t there anymore. I deleted it because I wasn’t happy with it. Sorry about that ??

    What do you think of the css code though? Did I miss somehting?

    Thanks for taking the time to answer my question btw!

    Would need to see the original CSS to compare how it would work?

    Thread Starter Florence

    (@floortjahh)

    Of my theme, you mean? You want to look at all of it? I don’t think I can post that much here haha! I wish I could find the interfering code myself but I don’t know what I’m supposed to look for.

    I dont know if this helps or not, but if I don’t include the inline block, the text indent doesn’t work.

    If I include neither (the text-indent, nor the inline-block), I just get the ‘delete’ text with the background image behind it.

    Sorry no, I meant the original CSS of the delete text your trying to change?

    Thread Starter Florence

    (@floortjahh)

    Oh no, I did this in a box withing the settings page of the plugin. I guess whatever you write here overrides the plugin css. Let me find you the plugin css. Just a sec!

    Thread Starter Florence

    (@floortjahh)

    Hm there doesn’t seem to be any css for the plugin. It’s just displaying a list of links without any styling, so there doesn’t need to be any.

    What’s the next step?

    Sorry in that case would need to see the page where this delete text is?

    Thread Starter Florence

    (@floortjahh)

    It’s on this page:
    https://www.cookingblondes.nl/?mijn=kookschrift

    You can only see it when you’re logged in though. I have a test acount you can use.

    Username: [redacted]
    Password: [redacted]

    And thank you again for all your time and effort ??

    Thread Starter Florence

    (@floortjahh)

    The page looks messed up in IE btw.. It looks fine in all others. Haven’t had time to fix it yet.

    Ok am looking now! But please remove the login details straight away, should never make these public!!!

    Thread Starter Florence

    (@floortjahh)

    Its just a subscriber account though. I don’t think I even can delete that. woops

    #bookmark-list a.upb_del_bookmark {
color: transparent;
background-image: url('https://image url here');
background-repeat: no-repeat;
}

    Just tested this using an red x image of mine and worked great. Not the best way to things as would be better editing the PHP but it achieves what your looking for easily!

    Hope this helps?

    Thread Starter Florence

    (@floortjahh)

    Yay you did it! Thank you so much! If you see a recipe you like and you want me to translate it, let me know haha ??

    Cheers Jon!

    Blij dat het hielp en je welkom!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘CSS Move text out of the way, but not the background image’ is closed to new replies.