Archived

This topic is now archived and is closed to further replies.

  • 0

Pagelines Boxes Css Not Working As Expected

Question

Posted · Report post

Hi,

Im attempting to use a pagelines box section to make something like this: http://store.nike.com/us/en_us/?l=shop,gift_cards

Notice the hover at the bottom below each element. I was able to get the hover to work by using

#fbox_126:hover and changing the background color. Unfortunatley though it appears that the boxes have some elements that i cant get rid off. I end up with spaces on either side of the image even though ive set its margins to zero.

Ive tried setting the width of the .fboxgraphic to the width of the container div #fbox_126 while clearing margins and padding but it doesnt seem to work.

Any suggestions? I guess I was hoping to generate a box style with hover characteristic very much like the nike link above.

Thanks,

post-44898-0-52460600-1353988410_thumb.j

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

You can view the code for the boxes section here http://phpxref.pagel...ource.html#l389

If you not using it already I'd advise getting firebug to inspect the various layers to target the exact area with the additional padding (www.getfirebug.com).

Only other thing i can think to check would be the margin assigned to the H3 tag, the below is showing on the default box setup.


.fboxtitle h3 {

padding: 0 0 0.4em;

}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, its really hard to tell which elements to adjust from the screenshot. It definitely looks like there's some padding left in there somewhere but there's quite a few layers to the boxes and they change css classes depending on where the thumbs are placed in the meta settings. If you have a live site we can look at we might be able to find the correct selector for you.

In the meatime I'd say look at the following


.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {


padding:0;

}

Share this post


Link to post
Share on other sites

Posted · Report post

ok, Ive gotten a bit closer but I cant get it to work all the way, the outter container div in the red and blue area (colours just to try to work out whats going on) is

.fboxinfo.fix.bd whats weird though is that there is no padding or margin on this div but it trys to place a bit of white space around the outside. Refer screenshot.

Is there sometype of autospan thing written into the plugin or break? Where would I go in my pagelines directory to inspect the plugin code? This might make it easier to work out whats going on since currently all I can view is the plugins output code.

As far as the box goes, this is just the standard boxes plugin with pagelines. Hopefully its structure is well known.

post-44898-0-52332700-1354066708_thumb.j

Share this post


Link to post
Share on other sites