Possible to have rollover images for box icons?

[burgess 0]

I realize I'm not using boxes as they were seemingly meant to be used, but on my site I've been designing it using the boxes as big, featured links on the pages: www.nicholasburgess.com (don't mind that nothing makes sense... it's just placeholder content) If I keep using it this way, I would like the box icons to have a second image for mouse hover, so it'll be more obviously interactive. Is there any way to do this? My other option, I guess, is to edit the template to make these links without using boxes at all. But I don't really know how to do that either! Any advice?

[kastelic 6]

There are many ways to achive the structure you are going for. One way is via a hook and straight up custom HTML and CSS. Another is the Full-width Sidebar with html and css inside. At any rate to get your hover look you will need some custom CSS and there are different ways to do that as well. The best way is to use background images instead of images. To get you started try this bit of code that works on the current setup you have.: [code] #fbox_54 img { display: none; } #fbox_54 a { background: url(http://nicholasburgess.com/wp-content/uploads/2011/10/MasterofPuppets.jpg) no-repeat; display: block; height: 200px; width: 200px; } #fbox_54 a:hover { background: url(http://nicholasburgess.com/wp-content/uploads/2011/10/box1.jpg); } [/code]

[burgess 0]

It did work, it seems! I assume I should just repeat this code with the different box numbers and sub in my desired images?

[burgess 0]

I tried setting the size in that code you gave me to 210, just to see, and it actually made a duplicate box below the first one, with the text over it. When I set it to 200, it's just the one box where it should be, but with no text under it. Any idea why? Is it because if it goes over a certain size, it bleeds down into the space below?

[burgess 0]

Okay, I set up the first 2 of the 4 boxes this way. I changed the size to 210 to match what's in my platformpro settings: http://nicholasburgess.com/ You can probably see what's happening. I think what I need to do is make either the image or text field disappear, so only one of them shows up (it actually affects the edit field too, when I'm logged in). Either that or make the CSS specify to only change the image field. I guess from a user experience POV, it makes sense to only show the image link anyway. That way people don't think the text link is unrelated. Here's a screenshot of how it looks on firefox and explorer: http://gyazo.com/47fbe9997e407a310e002007e220d19d Actually looks fine in chrome: http://gyazo.com/f57f8f8805eb555cc97b739e46a9c82f

[Kate 3]

You could try this: [code] .fbox .fboxgraphic a{float:left;display:block;height:210px;width:210px;} #fbox_54 .fboxgraphic a { background: url(http://nicholasburgess.com/wp-content/uploads/2011/10/MasterofPuppets.jpg) no-repeat; } #fbox_54 img{display:none;} #fbox_54 .fboxgraphic a:hover { background:url(http://nicholasburgess.com/wp-content/uploads/2011/10/box1.jpg); } #fbox_29 .fboxgraphic a { background: url(http://nicholasburgess.com/wp-content/uploads/2011/10/nicholasburgess_wizarddemos.jpg) no-repeat; } #fbox_29 img{display:none;} #fbox_29 .fboxgraphic a:hover { background: url(http://nicholasburgess.com/wp-content/uploads/2011/10/box3.jpg); } [/code] Obviously you'd need to add the other image declarations as well. BTW: Not sure all of the reasons you have for using boxes, but you could accomplish this same thing with a simple navigation, and that would be more semantic ;)

[burgess 0]

I like how the big square boxes look, as opposed to the standard small text nav bar. I'm trying to focus attention on a few big, bold areas, and then dump the rest of the links in the sidebar. Is there a way I could customize the nav bar to use images like this? The only other thing I can think of, as I said above, would be to just insert my own custom-made bar into the header template. I have not tried this yet, so I don't know how easy or hard that will be! That said, your fix worked. Thanks! At the very least, now I can keep using boxes until I figure something else out.

[burgess 0]

I'm gonna give this a shot via a full width sidebar. I had not considered that before kastelic's response.