Jump to content


Photo
- - - - -

Boxes id

boxes framework

Best Answer bauerhaus , 17 May 2013 - 03:29 PM

Just in case anyone else runs into this same problem. I ended up changing the first "Share your Family Classic" orange area from a Box to a Callout and uploading a custom Callout button.

 

This allowed me to still use this for the boxes:

 

#boxes .content-pad {
    padding-left: 35px;
}

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 14 May 2013 - 10:06 PM

On this site I am having some issues with the boxes on the page not lining up with everything else. I am in the latest version of Pagelines Framework.

 

Website:

Please Login or Register to see this Hidden Content

 

I want the left side of the orange bar that says "Share your Family Classic" to line up with the left side of the box below it.

 

I tried the below code to shift the food photos to the right:

 

#boxes .content-pad {
    padding-left: 35px;
}

 

But since the "Share your Family Classic" bar is also a box, it shifts everything right. Duh! Since I have two sets of boxes, I know I need to somehow call out the Boxes ID of only the bottom set. Where do I find the box set ID number?

 

Thanks!



#2 James B

James B

    Advocate

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

Posted 14 May 2013 - 11:10 PM

Hi there,

 

To effect a box set you'll need to use the clone class that follows #boxes in the inspector -

Please Login or Register to see this Hidden Content

 

For a single box ID check just before the box class -

Please Login or Register to see this Hidden Content

 

Hope that helps



#3 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 15 May 2013 - 04:13 PM

Thanks James! Ok, I feel like I am on the right track. I do have Firebug installed and did see the box set I want to add padding to is:

".container clone_1 section-boxes fix"

 

But, while I know basic CSS, like referencing sections and div-id, I'm not quite getting how I reference a class within a section. And I can't figure out what to google to figure it out!

 

Here is my try that does not work:

 

#boxes  .container clone_1 section-boxes fix {
    padding: 30px;
}



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 May 2013 - 05:06 PM

Hi,

 

If I understand this correctly, you want the orange backgrounded area (an image) to align left, flush with the left edge of the boxes below that.  Is my understanding correct?



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 May 2013 - 05:13 PM

Using Firebug, I found this:

Please Login or Register to see this Hidden Content

But when I changed it to

Please Login or Register to see this Hidden Content

The image moved left to fill the entire space, but because it's a fixed image, not a dynamic background color filling the space, it did not stretch edge to the maximum reach of the space on the right.  Still, it lines up on both sides.



#6 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 15 May 2013 - 05:15 PM

Hi Rob -

 

I want the Features box, the orange box and the Recipe photos all to line up. I want to keep the orange box where it is and have the Recipe boxes scoot to the right.



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 May 2013 - 05:28 PM

If you can shoot me a mock-up, I'll see what I can do!



#8 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 15 May 2013 - 05:42 PM

Thanks, I just sent you a message.



#9 James B

James B

    Advocate

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

Posted 15 May 2013 - 08:06 PM

Hi Bauerhaus.

 

The format for adding the clone class in the css will be like

Please Login or Register to see this Hidden Content



#10 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 17 May 2013 - 03:29 PM   Best Answer

Just in case anyone else runs into this same problem. I ended up changing the first "Share your Family Classic" orange area from a Box to a Callout and uploading a custom Callout button.

 

This allowed me to still use this for the boxes:

 

#boxes .content-pad {
    padding-left: 35px;
}



#11 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2469 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 17 May 2013 - 04:46 PM

Thanks for the update 







Also tagged with one or more of these keywords: boxes, framework