Jump to content
bauerhaus

Boxes id

Recommended Posts

bauerhaus    0
bauerhaus

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: http://www.family-classics.com/

 

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!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

To effect a box set you'll need to use the clone class that follows #boxes in the inspector - http://screencast.com/t/pwpqdBzaMt

 

For a single box ID check just before the box class - http://screencast.com/t/Ba3yvsTz1

 

Hope that helps


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
bauerhaus    0
bauerhaus

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;
}

Share this post


Link to post
Share on other sites
Rob    547
Rob

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?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Using Firebug, I found this:

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {
    text-align: center;
}

But when I changed it to

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {
    text-align: left;
}

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bauerhaus    0
bauerhaus

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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bauerhaus    0
bauerhaus

Thanks, I just sent you a message.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Bauerhaus.

 

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

 .clone_1 .section-boxes {border:1px solid black;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
bauerhaus    0
bauerhaus

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;
}

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Thanks for the update 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • dougalperman
      By dougalperman+
      Hi there,
      I'm a big fan of Pagelines, and have been for years.
      I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward.
      I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels.
      I can't work out how to change either.
      I'm using the latest version of Pagelines Framework (Pro) with the Agency them.
      Any help or advice very much appreciated.
      Thanks,
      Dougal
    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.
       
       

×