The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

rollover buttons

leftwaveleftwave Member
in Bugs & Feature Requests edited September 2008
hey again!

now that i've got my custom "continue shopping" button here:

i would like to know how to either:

1. disable the rollover and tiling
or if that can't be done:
2. properly design my image so it rolls over and tiles correctly

where is this all being controlled anyway???
  • brettbrett FoxyCart Team
    You can definitely disable the rollover and tiling. Because I know you're a fast learner, I'll point you in the right direction to see if you can figure it out on your own.

    Google "css sprites" for an explanation of how the rollover/tiling is done in the first place. That's probably a really good thing to understand, since you're modifying it.

    As far as modifying or disabling it, use Firebug to see where those styles are defined. Now that you know what order to place your CSS in it should be a little easier to override the CSS.

    If you need more specific pointers, just let us know.
  • oh wow. i had no idea about sprites, or the savings in page loading time. i might have to start over with everything i know. thanks foxycart!

    i now understand how/why the tiling and rollover stuff is happening..... but in the case of this freaking "contiune shopping" button, i still don't understand where in the code it is located. when i use firebug to open the cart window "box" in its own frame, i lose this button since it's outside of the frame:

    help! again! pleeease
  • brettbrett FoxyCart Team
    Ok so:
    The link you just posted is a direct cart link, which won't work, as you've noticed, because the cart template doesn't contain those elements.

    That HTML is generated dynamically by the Thickbox script included in foxycart_includes.js. So pull up your butterfly.html page and we'll work from there.

    Load up Firebug and also do the "Edit CSS" from the CSS menu of the web developers toolbar. Inspect (in Firebug) the button, and notice the CSS that's being applied.

    The next step is to figure out where that CSS is. Unfortunately, Firebug doesn't tell you which CSS file the declarations are in (which is kind of odd and seems like a bug to me, but it's not the end of the world). So you'll see some declarations.

    The :hover declarations that affect the background position are how the hover effects work (CSS sprites).
    You already have a declaration overriding the background image.
    Next comes what you could consider the "main" declaration. You'll see that it's got a height (0), a width (156px), and some top padding.

    Figure out where all those declarations are coming from. (Hint: theme.foxybox.css and your own styles.css)

    You already have a declaration in your own CSS overriding the bg image, so you just need to modify the top padding (not the height, because of how we're doing the image replacement) and the width. Then override the :hover declaration so it doesn't change the background-position.

    et viola!

    (If you get stuck just let me know.)
  • brett, you're an awesome teacher. i read this 2 times and thought WTF?! then, i slowly reread through it and i was able to do what you said!


    but.... i think i'm somewhat "faking" the results because i played with the padding-top value to get the button to look like it isn't hovering even though it really is. how do i actually override the :hover declaration?

    here's the new CSS i have now:

    #fc_tb_closeWindowButtonBot {
    height:0px; overflow:hidden;
    margin:0px 0px;
    background-position:left top;

    a#fc_tb_closeWindowButtonBot:hover {
  • brettbrett FoxyCart Team
    edited September 2008
    The easiest thing to do would be to just copy your background-position value from the non-hover to the hover, so you'd have :left top; for both.

    There's no way to "remove" CSS once there. You have to override it, which is what you're doing.

    The slight jump you're seeing now is because you have the background position with only one value (which is assumed to be the x-axis (right/left), so it's guessing the other (top/bottom)).

    So background-position:0 0; or 0px 0px would work better than just a single "0px".

    Also, when you have a 0 you don't need a unit like "px". Not a big deal at all though.

    PS: The customization looks great. Super clean, great color choices. Nice work, as always!
  • thanks for all of your patience and quick followup with this! i feel like i'm sooo close to getting this all.

    i'm not quite sure i understand what you're saying about copying the background position from the non-hover to the hover.... but i can't see the jump anymore, can you?

    i changed the zeros - thanks for letting me know about that.

    on a completely different note, do you have any idea why the table is getting a gap in it (under the logo) when viewed in internet explorer? it looks perfect in firefox for me. (yes, i know, i should be using CSS not tables). have a look at this screenshot:
  • brettbrett FoxyCart Team
    If I knew anything about building a site with tables I'd try to help, but that's totally not something I've ever really done.

    As far as copying the bg position, I just meant that if you have background-position:top left; for one, copy it for the other. But "0px 0px" is effectively the same as "top left", so you're fine at this point.
  • haha, well if you want to learn anything about tables, hit me up. i owe you some major help... although it seems like CSS is the way to go.

    thanks for explaining about the BG posistion. this officially answers ALL of my questions (for now... i'm certain i'll have a few more before i can get this site launched)

    thanks again for all of your help and prompt replies!!
  • brettbrett FoxyCart Team
    We're super glad to help, leftwave.
    How about I trade you a lesson in table-based layouts for your undying enthusiasm and maybe some blog posts or other spreading-of-the-foxyness? ;)
  • LOL! you got it! i don't have a blog, but i'm happy to spread the foxy word :)
Sign In or Register to comment.