By smallbizpod on

Hi

Just wanted to say what a fantastic resource this is. I'm experimenting with Drupal for a site I'm building and have learned masses without just be searching, but I'm stuck ...

I'm trying to create rounded corners for blocks. I've successfully managed to achieve rounded corners at the top of a block by styling the .title element and also have nice shadow edges for the block by styling the background of the block itself, but ...

I can't seem to find any tag to fix the rounded corners at the bottom of the block.

Any ideas how I might be able to achieve this?

Cheers

AB

⋅ Categories: Drupal 4.7.x

Comments

gravit’s picture

gravit commented

I'm gonna respond with what I do, but I am new to Drupal, so I am still curious if this is the best considered practice.

You can customize the HTML for all blocks in your template folder in the block.tpl.php file. Here you can probably add a or

tag where you need it. It looks like the main drupal site uses this technique in their HTML. There are span elements before the title in the block.

To do it without changing the theme - you might be able to add a background image for the bottom of ".block .content" ?

Have fun! and let me know what works.

TheWhippinpost’s picture

TheWhippinpost commented

Not tested for blocks but should work.

Clearly, you'll need to have the round corner images made and you'll need to change the names and path to them in the code below.

In your block.tpl.php file:

<div class="<?php print "block block-$block->module" ?> roundcorners" id="<?php print "block-$block->module-$block->delta"; ?>">
  <div class="roundtop">
   <img src="<?php print $base_path . path_to_theme() ?>/global/imgs/blockTopLftCrnr.gif" alt="" 
   width="15" height="15" class="corner" style="display: none" />
  </div>
  
<div class="block-content">
  <h3><?php print $block->subject; ?></h3>
  <div class="menu">
	<?php print $block->content ?>
  </div>
  </div>
  
<hr class="clearing" />
   <div class="roundbottom">
	 <img src="<?php print $base_path . path_to_theme() ?>/global/imgs/blockBtmLftCrnr.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>

</div>

CSS:

.roundcorners {
	background-color: #8e5988;
	color: #fff;
}
.roundcorners p {
	margin: 0 10px;
}
.roundtop { 
	width: 100%;
	background: url(../global/imgs/blockTopRtCrnr.gif) no-repeat top right; 
}
.roundbottom {
	width: 100%;
	background: url(../global/imgs/blockBtmRtCrnr.gif) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

Mike

smallbizpod’s picture

smallbizpod commented

Brilliant, I'm off to try these suggestions out ... really very many thanks.

In the interim in css I had managed to attach the bottom rounded corners to the block .content tag, but need to sort out a few things to make it look pretty.

Many thanks for the block.tpl example - I'll let you know if it works!

Thanks

AB

smallbizpod’s picture

smallbizpod commented

Mike, the block.tpl method works a treat, although I had to tweak a little for my theme obviously.

I've also sussed out that I can use this method to theme blocks using different styles depending on their location. I've used conditional statements based on the 'regions' variable within block.tpl to call additional customised block.tpls files. This means my blocks are automatically styled how I want them depending on their whereabouts on the site.

Probably very obvious to others ... but a bit of a light-bulb moment for me, bearing in mind my novice status with both drupal and php.

Thanks again.

AB

TheWhippinpost’s picture

TheWhippinpost commented

Good stuff - Glad it worked for you.

Mike

sammos’s picture

sammos commented

This worked like a charm. Thank you!

My one problem is that I can't add a border without it showing up as a box around the area. I want to have rounded blocks with evenly rounded borders.
Any thoughts?

-samantha
--
www.digitalaid.net

airali’s picture

airali commented

...a simple idea: if you need to change block background color (i.e. if you have blocks with different backgrounds), without saving again 4 new corner images, you can create those images using transparent gifs.

Imagine you have a black body background and a grey block background.
As usual, you create an image with black background, and then draw a rounded corner area, filled with grey.
Then you save that as a .gif, and make the grey area transparent. The resulting image will be only such a semi-lunar black area. It will cover any background color you choose with a perfect rounded corner.
Pay attention in applying transparence: zoom in and make all non-black pixels transparent.

ap’s picture

ap commented

Have a look at the roundness theme. Maybe you could use something from there.

Dubber Dan’s picture

Dubber Dan commented

...for the fact that it uses tables for the layout. Will have to try some of the other suggestions above instead.

evolvedideas’s picture

evolvedideas commented

tables are out use tableless CSS =)

www.evolvedideas.net

Evolving Ideas for the methods of marketing for internet entrepreneurs.

whizkid00’s picture

whizkid00 commented

How can I have rounded corners for right side bar blocks only?

seutje’s picture

seutje commented

I always just put the divs in the header and footer of the block, that way I can easily pick which block gets it and which one doesn't and I can even stick 2 blocks together without ppl even noticing that they're 1 element with a 2-sided rounded bar in the middle :p

dwightaspinwall’s picture

dwightaspinwall commented

Yeah, you just need to qualify the CSS selector with the region or view (which creates a CSS ID selector), like this example:

block.tpl.php:

<div id="block-<?php print $block->module .'-'. $block->delta ?>" class="block block-<?php print $block->module ?> block-<?php print $block_id ?> blocktile">
  <?php if ($block->subject): ?><h2 class="blocktop"><?php print $block->subject ?></h2><?php endif; ?>
  <div class="content"><?php print $block->content ?></div>
  <div class="blockbottom"></div>
</div>

css snippet:

...
#sidebar-right .blocktile {
  background: url(images/header300_r3_c1.jpg) repeat-y;
}
#sidebar-right .blocktop {
  font-size: 1.3em;
  font-weight: normal;
  color: #0066cc;
  margin: 0;
  height: 24px;
  background: url(images/header300_r1_c1.jpg) no-repeat left top;
  padding-top: 4px;
  padding-left: 10px;
}
#sidebar-right .blockbottom {
  background: url(images/header300_r5_c1.jpg) no-repeat left top;
  width: 300px;
  height: 5px;
}
...

Tip of the hat to Andy Budd CSS Mastery: Advanced Web Standards Solutions p. 48 "Fixed Width Rounded Corner Box".