Need help styling a button

Discussion in 'Web Design and Development' started by celticpride678, Feb 19, 2010.

  1. celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #1
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    If you're talking about the "Continue Reading" links I don't see any CSS applied to it to try to make it look like a button. Are you sure you uploaded the CSS? You may also have an issue with your CSS selector.
     
  3. celticpride678 thread starter Guest

    celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #3
    Sorry, I brought it down because I was working on it. I put the CSS in the Stylesheet. Everything works except for the background of the button. I uploaded the image, but it does not work. Any ideas?
     
  4. ergdegdeg Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007
    #4
    It doesn't find the image. Are you sure you used the right path?
     
  5. celticpride678 thread starter Guest

    celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #5
    Yes- I uploaded the image into /wp-content/themes/mystique. That's where the CSS is pointing to as well.
     
  6. astroot macrumors regular

    Joined:
    Nov 12, 2009
    #6
    All of your other images are in the images directory. It's not finding your gif files for the button.
     
  7. celticpride678 thread starter Guest

    celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #7
    I moved it into the Images directory and it still does not work. I changed the code to point to the images directory also.
     
  8. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #8
    Code:
    background:transparent url(/wp-content/themes/mystique/imagesbg_button_a.gif) no-repeat scroll right top;
    You're missing a forward slash after images. I would also change it to a path relative to your themes directory;

    Code:
    background:transparent url(images/bg_button_a.gif) no-repeat scroll right top;
     
  9. celticpride678 thread starter Guest

    celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #9
    For some reason it's still not working.
     
  10. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #10
    Using the full URL, I can directly access other images on your site, for example your youtube button.

    But when I try the same with bg_button_a.gif, this is what I get.

    Are you certain the image is located where you think it is?
     
  11. celticpride678 thread starter Guest

    celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #11
    That's weird. I can work that out later. I just tried using the YouTube icon that we know we can access and the background still does not work. Seems like an issue with the code, not the image.
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    The Youtube image didn't work because you used a relative path instead of an absolute one, you were forgetting the first forward slash. I was able to get the image to show using Firebug after adding that slash. So the code is fine. Are you sure you have the right capitalization and the correct extension on the image?
     
  13. celticpride678 thread starter Guest

    celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #13
    I kinda gave up on that image and just made a quick one in Photoshop. It works fine now. Thanks for all the help.
     
  14. brisbaneguy29 macrumors 6502

    brisbaneguy29

    Joined:
    Nov 27, 2007
    Location:
    Brisbane
    #14
    With wordpress use this

    background:transparent url('images/bg_button_a.gif') no-repeat scroll right top;

    If you,look at the other css that comes with wordpress they always put '' around the images in the CSS.
     

Share This Page