WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS Move text out of the way, but not the background image (16 posts)

  1. Florence
    Member
    Posted 1 year 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('http://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...

  2. jonpedlow
    Member
    Posted 1 year ago #

    (http://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?

  3. Florence
    Member
    Posted 1 year ago #

    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!

  4. jonpedlow
    Member
    Posted 1 year ago #

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

  5. Florence
    Member
    Posted 1 year ago #

    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.

  6. jonpedlow
    Member
    Posted 1 year ago #

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

  7. Florence
    Member
    Posted 1 year ago #

    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!

  8. Florence
    Member
    Posted 1 year ago #

    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?

  9. jonpedlow
    Member
    Posted 1 year ago #

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

  10. Florence
    Member
    Posted 1 year ago #

    It's on this page:
    http://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 :)

  11. Florence
    Member
    Posted 1 year ago #

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

  12. jonpedlow
    Member
    Posted 1 year ago #

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

  13. Florence
    Member
    Posted 1 year ago #

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

  14. jonpedlow
    Member
    Posted 1 year ago #

    #bookmark-list a.upb_del_bookmark {
    color: transparent;
    background-image: url('http://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?

  15. Florence
    Member
    Posted 1 year ago #

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

    Cheers Jon!

  16. jonpedlow
    Member
    Posted 1 year ago #

    Blij dat het hielp en je welkom!

Topic Closed

This topic has been closed to new replies.

About this Topic