WordPress.org

1. Showgirl
   Member
   Posted 4 years ago #

   Hello

   I am trying to put a button in my sidebar text widget but it will not show up. I generated the html for the button on another site and thought it would be a simple matter of pasting it into a widget. I have done this and it doesn't show up at all. I have saved the uploaded the image to my ftp server's images folder and doen't know why it's not showing up.

   Can someone tell me what I'm doing wrong, my site is http://www.urbanspirit.co.uk and it's text widget 1 and I've attached the code below:

   <a href="http://www.urbanspirit.co.uk/index.php/reiki/"
   <div id='button8706' style='>
   height: 100; width: 145;
   background: url(button58189594.jpg); background-position: 0px 0px; '
   onmouseover = 'document.getElementById("button8706").style.backgroundPosition = "-145px 0px"; '
   onmouseout =  'document.getElementById("button8706").style.backgroundPosition = "0px 0px"; '
   ></div>
   </a>

   Thanks

2. matt-test
   Member
   Posted 4 years ago #

   
   

3. lukadium
   Member
   Posted 4 years ago #

   I checked ur website but I didn't find any widgets in it!
   By the way are u using any plugins to cache wordpress?
   If so the changes u make into your website takes sometime to show up.

4. Otto
   Tech Ninja
   Posted 4 years ago #

   <a href="http://www.urbanspirit.co.uk/index.php/reiki/"
   <div id='button8706' style='>
   height: 100; width: 145;
   background: url(button58189594.jpg); background-position: 0px 0px; '
   onmouseover = 'document.getElementById("button8706").style.backgroundPosition = "-145px 0px"; '
   onmouseout =  'document.getElementById("button8706").style.backgroundPosition = "0px 0px"; '
   ></div>
   </a>

   That code is seriously screwed up. It's not valid HTML. I'm not sure what you're trying to do, but whatever it is, you're doing it wrong.

   Your initial anchor tag is not closed, the DIV has an unclosed style in it, and overall it's just a very weird way of trying to do a mouseover image.

   My advice: Stop using weird tricks like this. Stick to IMG tags for images. Use preloading instead of shifting backgrounds for mouseover images. And write proper HTML.

5. Showgirl
   Member
   Posted 4 years ago #

   No, I'm not using a plug-in to cache wordpress and the widgets are definitely there as they make up my sidebar.

   I didn't write the code and I have also tried uing img tags which is also not working! I used a generator, all I want is an eye-catching button to add to my sidebar to link to a particular page, the html is for a plain blue button with a link.

   Maybe it is a widget issue, is there some plug-in that could help with this as I am using the widget that was supplied with the theme.

6. Otto
   Tech Ninja
   Posted 4 years ago #

   It is not a widget issue, the issue is that your HTML code is invalid and would never work because it's not valid.

   I don't know what generator you used, but it sucks. That code can never possibly work.

   This might do what you're wanting, but since I have no idea what you're wanting, I cannot say for sure:
   

   <a href="http://www.urbanspirit.co.uk/index.php/reiki/">
   <div id='button8706'
   style='height: 100; width: 145; background: url(button58189594.jpg); background-position: 0px 0px;'
   onmouseover='document.getElementById("button8706").style.backgroundPosition="-145px 0px";'
   onmouseout='document.getElementById("button8706").style.backgroundPosition="0px 0px";'></div>
   </a>

   Also, there's no button58189594.jpg on your server that I can find, so you'll have to either upload it or change the path of it in the code above for that to work correctly.

7. Showgirl
   Member
   Posted 4 years ago #

   Thank you for fixing my code, I am trying to add an html image to my sidebar that links to one of my pages. I have uploaded the image to my images folder of my server, he same one that houses my logo and that shows up so I don't know why it cannot be seen, I can see it.

   Thanks for the tp on changing the path, how do I do that? When I go to my image on the server it has an address shall I use that and if so where? If yes,shall I replace ftp. with http://www.?

   Really appreciate this help, thanks.

8. Otto
   Tech Ninja
   Posted 4 years ago #

   Try this then:

   <a href="http://www.urbanspirit.co.uk/index.php/reiki/">
   <div id='button8706'
   style='height: 100; width: 145; background: url(http://www.urbanspirit.co.uk/wp-content/themes/jewelrybox-01/images/button58189594.jpg); background-position: 0px 0px;'
   onmouseover='document.getElementById("button8706").style.backgroundPosition="-145px 0px";'
   onmouseout='document.getElementById("button8706").style.backgroundPosition="0px 0px";'></div>
   </a>

9. Showgirl
   Member
   Posted 4 years ago #

   Unfortunatlely still no joy! Thanks Otto, I really thought it was going to work!

10. Otto
    Tech Ninja
    Posted 4 years ago #

    This code works. I just tested it.

    <a href="http://www.urbanspirit.co.uk/index.php/reiki/">
    <div id='button8706'
    style='height: 100px; width: 145px; background: url(http://www.urbanspirit.co.uk/wp-content/themes/jewelrybox-01/images/button58189594.jpg); background-position: 0px 0px;'
    onmouseover='document.getElementById("button8706").style.backgroundPosition="-145px 0px";'
    onmouseout='document.getElementById("button8706").style.backgroundPosition="0px 0px";'></div>
    </a>

11. Showgirl
    Member
    Posted 4 years ago #

    Thanks Otto42, it now works. Much appreciated :)

Topic Closed

This topic has been closed to new replies.