By akurashy on

Hello i been wondering, how can i do rounded blocks?
im insterested to know!
can anyone tell me how

Comments

joemc91’s picture

joemc91 commented

This is a fun one. For my site ahpnational.org, here's the code that makes up the block (in php):

function ahp_block($block) {
  $output  = "<div class=\"block block-$block->module\" id=\"block-$block->module-$block->delta\">\n";
  $output .= "<div class=\"rtop\"><div>$block->subject</div></div>";
  $output .= "<div class=\"content\">$block->content</div>\n";
  $output .= "<div class=\"rbot\"><div></div></div>\n";
  $output .="</div>\n";
  return $output;
}

The key features are the div class rtop and rbot with the div inside them. Then, if you check the css file (the layout file), you'll see this:

.rtop {
 background:url("/themes/ahp/images/corner_ur.gif") 100% 0 no-repeat;
 text-align:center;
 width:100%;
 height:10px;
}

.rtop div {
 width:100%;
 height:10px;
 background:url("/themes/ahp/images/corner_ul.gif") 0 0 no-repeat;
}

Basically this puts the rounded corners in the corners. The bluebeach theme appears to have main div have a border of one pixel while pushing the corner images out one pixel by using margins of -1.

To better disect the themes, I'd recommend getting the Firefox web developer plugin to check-out the layout. Hope this info helps.