Panels 3

Brilliant. Looking much better in Firefox (though Safari's not so keen on one of the boxes).

I can see I'll need to delve a bit further into CSS for some fine tuning.

Many thanks for all your help.

Ian

Hi,

If you look under Firebug's style window, you will notice that our ".theboxesparadise_98 .pane-title" is 3 rules below. The 3rd rule (counting from the top) modifies the margin top to 0px, overwriting our magin top of -38px.

In another words, the css is working correctly, but there is another css statement that overwrites ours, and masks the correctness.

You can alter the line as follows:

.theboxesparadise_98 .pane-title { margin-top: -38px; }  //  modify this line to

.theboxesparadise_98 .pane-title { margin-top: -38px !important; }  //  this line

Update me again.

Additional Note: Your table seems to have an extra gray line at the top. This is caused by a

tbody {border: 1px solid #cccccc;}

This is found in system.css line 29. You might want to change this line. Alternatively, you can add the following to your theme's css file, so that you can overwrite it

tbody {border: 0;}

That's very good of you. The page in question is at www.centreforjournalism.co.uk/mediablogs

You'll see there's various panels on there. The ones that use TBP30 are fine. But am still struggling to get TBP71 and TBP72 to work. Both .inc files for those have the additional css lines in that you suggested.

Thanks

Ian

Hi,

I should take a look at your website. It might be faster for me to help you.

Thanks for taking the time to look at this.

I've added the css lines you suggested into the .inc files for TBP 71 and TBP 72.

Unfortunately, it hasn't helped the display. I'm afraid I'm by no means a CSS expert. Using Firebug I can see that the -38px margin style is there - but it hasn't shifted the title upwards. See screengrab:

Ian

Yes, you are right about the Boxes with a Title background facing the issue.

I will present the problem background first, and the solution second.

Problem Background

In panels or panes, the title and the contents are rendered together. In our TBP Box's inc file, you will see the $content being printed in the Box's body. The pane's title AND contents are both sent to the $content variable.

function panels_theboxesparadise_98_box($content, $padding) {
    $padding .= 'px';   

  return <<<EOF
<div class="$idstr">
    ...
                    <div style="padding:$padding;">
                        $content // this is where the contents are rendered

But our Box has a Title background. Thus, as per your screenshot, the pane's title is not printed in the Box's Title area.

Solution

You can add an extra CSS statement as below:

function panels_theboxesparadise_98_css($display, $where = 'pane') {
  $idstr = empty($display->css_id) ? '.theboxesparadise' : "#$display->css_id";

  $url = panels_get_path('plugins/styles/res/98', TRUE);

  ...

  .theboxesparadise_98 .b { background: transparent url($url/b.png) repeat-x top left ;  font-size: 1px; line-height:1px;} // insert after this line

  .theboxesparadise_98 .pane-title {margin-top:-38px;} // add this line

What this does is basically to shift the title up into our Box Title background area.

The above will solve your TBP 71. For TBP 72 (red aqua), you do the same as above, but you have to add one more extra line:

.theboxesparadise_98 table {margin:0;} // add this line

This is because your Drupal theme has a css file style.css, which by default sets the margin of EVERY table with top and bottom 1em. We will overwrite that css style just for our Box.

Update me again with your findings. =)

Update. The title problem only occurs on box styles where the title sits on a background. See additional screengrab below for one that works correctly using Panels 3. Still interested if there's a solution for the others. Thanks. This site is a great design aid.

Thanks for the response. I'm nearly there. I've successfully installed three boxes that Panels 3 is seeing. But in each case, once I've changed the Panels settings appropriately, the title of the panel (or mini-panel) isn't displaying in the right place - it's showing up below the title area of the box. See screengrabs below. Any thoughts?

Hi,

Following the discussion here, which primarily discusses the change in the directory structure of the new Panels 3, there is only just one place in the inc file that you need to change. This code below is found at the bottom of the inc file.

function panels_theboxesparadise_21_css($display, $where = 'pane') {
  $idstr = empty($display->css_id) ? '.theboxesparadise' : "#$display->css_id";

  $url = panels_get_path('styles/res/21', TRUE);  // change this line

You should change this line to:

  $url = panels_get_path('plugins/styles/res/21', TRUE);  // to this line

 

You install the box in the panels directory as detailed here in the handbook, just that the styles directory is now located one level under plugins, under Panels 3. Thus the change above will point it to the right place. Let us know if you are still experiencing hiccups after trying this.