Jump to content


Photo
- - - - -
Open

Pagelines Boxes Css Not Working As Expected



  • Please log in to reply
3 replies to this topic

#1 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 27 November 2012 - 03:53 AM

Hi,

Im attempting to use a pagelines box section to make something like this:

Please Login or Register to see this Hidden Content



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,

Attached Files



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 November 2012 - 05:21 AM

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


Please Login or Register to see this Hidden Content



#3 steck1983

steck1983

    Member

  • Members
  • 27 posts
  • Framework Version:2.02
  • Country: Country Flag

Posted 28 November 2012 - 01:40 AM

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.

Attached Files



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 28 November 2012 - 05:35 AM

You can view the code for the boxes section here

Please Login or Register to see this Hidden Content



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.

Please Login or Register to see this Hidden Content