This would probably be obvious to anyone with a clue about css. I see the cdd id and css class settings but nothing I've put in there renders my panes like my theme's blocks (when in left or right sidebars). I'm using the pixture reloaded theme.

I don't think this is a bug at all, so I'm filing as a support request...hope that's ok.

Panels frankly look like an absolute killer feature. I've never used them because I'm mainly a 6.x gen drupal user...thank you for putting in the effort to port to 6.x.

Comments

jeff h’s picture

jeff h commented

Unfortunately this isn't something CSS will be able to change - panel panes output quite different HTML markup than what blocks do. It's possible to override this but that requires some PHP.

pengi’s picture

pengi commented

OK, thanks. I suppose it'd be possible to create a new style, or whatever they're called. The rounded corners pane style is a little like the look I'd want...to create a new style, I think I read somewhere that it's possible, but maybe it's not simple?

stephthegeek’s picture

stephthegeek commented

Yeah there are a few ways to go about this. I've "hijacked" the rounded corner style to use as markup for my own custom block styles in panels before. Or you could just work off of the plain style markup and give 'em the same kind of styling as your blocks, based on column or row. There's not any one magic bullet for this though -- you'd need to look at the markup and your CSS and what you're trying to accomplish, and add Panels' classes into your theme.

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed

In the pane configuration modal popup, the top or nearly top item is 'Pane style'. Select 'System block'.

pengi’s picture

pengi commented

That's outrageously cool to find the solution is that simple. For some reason the block formatting is not applied with the theme I was using, pixture reloaded. But your post made me check and with at least some other themes the block effect appears. Would this be panels 6.x alpha issue or a theme issue? I've found other themes now where the system block setting does not work.

stephthegeek’s picture

stephthegeek commented

pengi, this setting can be helpful but it's very dependent on how your theme is doing its styling. It uses the block-wrapper class, but if your theme's blocks don't really do styling based on this (and many don't), then it won't help you at all. An example would be if your theme has different block styles for the left and right sidebars, so its css might be #sidebar-left .block-wrapper h2 {} for the titles or something, which isn't then going to get picked up in Panels' .block-wrapper. You'd have to look at your theme's css in greater detail and see where you can add in Panels' classes to duplicate the effect.

pengi’s picture

pengi commented

I see; I will mention this to the theme folk that manage the themes I'm most interested in. I have very little exposure to css so I'm not sure I'll be able to cook up a solution on my own (which I think you're implying might be possible) but I'll try anyways.

One other thing that would be useful would be some examples of how one can use the cdd id and css class settings to apply css to the panel/pane. I mentioned that I couldn't get those to work. But, I suppose at least part of the reason my efforts didn't work is because the theme's css just doesn't go well with panels? Looking at the syles.css file, there seemed to be no single top level css element for an entire block, but rather many component elements like block header. I wasn't sure how one would apply those multiple styles to panels.

I know you're very busy doing great things so don't worry about it if it'd be too time consuming to explain things sufficiently to me...it's just not an area I'm familiar with. I'll be able to create a workaround in any case.

Anonymous’s picture

Anonymous (not verified) commented
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

g76’s picture

g76 commented

I wanted to reopen this issue and was wondering if anyone had the time to assist me with this. I am posting our templates (aqua marina) block.tpl and css for sidebar blocks and was hoping someone could tell me what to add for the css id and css class to get the panels blocks to appear like the sidebar(#sidebar-first) blocks. I have "system block" selected as the display, but this alone does not seem to work.
Block.tpl--------------------------------

// $Id: block.tpl.php,v 1.1 2008/10/01 03:26:19 jwolf Exp $
?>

<!-- start block.tpl.php -->
<div class="block-wrapper <?php print $block_zebra; ?>">
  <?php if ($rounded_block): ?>   <!-- see preprocess_block() -->
  <div class="rounded-block">
    <div class="rounded-block-top-left"></div>
    <div class="rounded-block-top-right"></div>
    <div class="rounded-outside">
      <div class="rounded-inside">
        <p class="rounded-topspace"></p>
  <?php endif; ?>
      
        <div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">
          <?php if ($block->subject): ?>
            <?php if ($rounded_block): ?>
          <div class="block-icon pngfix"></div>
            <?php endif; ?>
          <h2 class="title block-title pngfix"><?php print $block->subject ?></h2>
          <?php endif; ?>
          <div class="content">
            <?php print $block->content ?>
          </div>
        </div>
  
  <?php if ($rounded_block): ?>
        <p class="rounded-bottomspace"></p>
      </div><!-- /rounded-inside -->
    </div>
    <div class="rounded-block-bottom-left"></div>
    <div class="rounded-block-bottom-right"></div>
  </div><!-- /rounded-block -->
  <?php endif; ?>
  
</div>
<!-- /end block.tpl.php -->

Sidebar css--------------------------------

/*******************/
/* SIDEBAR REGIONS */
/*******************/

#sidebar-first {
float: left;
overflow: hidden;
}

#sidebar-last {
background-color: #F4F7E7;
float: right;
overflow: hidden;
margin: 0 0 0 10px;
}

----------------------------------
/**********/
/* BLOCKS */
/**********/

div.block {
position: relative;
}

div.block-region {
background-color: #FFFF66;
color: #000;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
margin-bottom: 4px;
margin-top: 4px;
padding: 3px;
text-align: center;
}

div.block .title {
}

div.block .submitted { /* byline styles in blocks */
}

div.block .submitted a:link {
}

div.block .submitted a:visited,
div.block .submitted a:hover,
div.block .submitted a:active {
}

div.block-wrapper { /* spacing between blocks */
margin: 10px 0;
}

#user-login-form .item-list ul li,
div.terms ul li {
list-style-type: none;
margin: 2px 0 0 16px;
}

#header-middle h2.block-title,
#header-last h2.block-title {
color: #51748C;
font-size: 1.833em;
margin: 0;
padding: 0;
}

#preface-wrapper h2.block-title {
background-color: transparent;
color: #94CE18;
font-size: 1em;
padding: 0;
}

#preface-wrapper .block .content {
margin: 10px 0 0;
}

body.layout-first-main-last #sidebar-first .block-wrapper,
body.layout-first-main-last #sidebar-last .block-wrapper {
margin: 0 0 10px;
}

/* rounded blocks styles -= layout-first-main-last & layout-first-main blocks */
#sidebar-first h2.block-title,
#sidebar-last h2.block-title,
#postscript-wrapper h2.block-title {
background-color: #94CE18;
color: #fff;
padding: 8px 8px 6px 46px;
text-align: right;
text-shadow: #545454 1px 1px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
}

#sidebar-first div.block div.content,
#sidebar-last div.block div.content,
#postscript-wrapper div.block div.content {
background: transparent url('images/block-gradient.png') no-repeat center bottom;
border-bottom: 3px solid #F1F5F7;
padding: 10px 10px 8px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
}

/* non-rounded blocks styles = prefaces & layout-main-last blocks */
#preface-wrapper div.block div.content,
body.layout-main-last #sidebar-last div.block div.content {
border: none;
}

body.layout-main-last #sidebar-last div.block-wrapper {
margin: 0 0 30px;
}

#preface-wrapper div.block div.content,
body.layout-main-last #sidebar-last div.block div.content,
#footer div.block div.content {
background: none;
border-bottom: none;
margin: 0;
padding: 0;
}

body.layout-main-last #sidebar-last h2.block-title {
border-bottom: 1px solid #D6DDB9 ;
background-color: transparent;
color: #666;
padding: 0;
text-align: left;
text-shadow: none;
width: 400px;
}

#footer h2.block-title {
background: transparent;
color: #666;
}

#sidebar-first #block-search-0 .form-item label,
#sidebar-last #block-search-0 .form-item label {
display: none;
}

/***************/

g76’s picture

g76 commented
Status: Closed (fixed) » Active

sorry, forgot to reopen.

stephthegeek’s picture

stephthegeek commented
Status: Active » Fixed

g76, the system block option isn't going to work for a lot of themes, including Acquia Marina, because of the exact reasons I mentioned above: http://drupal.org/node/308068#comment-1015986

You'd need to add in Panels' IDs/classes to the CSS wherever it's setting block styles.

Anonymous’s picture

Anonymous (not verified) commented
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

Anonymous’s picture

Anonymous (not verified) commented

@merlinofchaos - thank you for sharing solution! This one had me scratching my head for a little longer than I care to admit.