Theme individual blocks, with rounded corners, and different colors

ChrisOPeterson - September 29, 2008 - 22:23

Hello all,

I ahve been developing this website for almost a year now, on and off with a client. This has led to a lot more code than i really want so I am wondering if you all could give me some advice on making this particular problem I am having, not be as bloated as I am thinking of doing it. There must be a better way.

I am giving borders to all of the blocks and these borders are supposed to be rounded. I am currently using the nifty rounded corner technique from http://www.html.it/articoli/nifty/index.html

However the boss wants a change and wants the border only and no internal color. He also wants each one to be different depending on the block type. So I jury-rigged it and it works for the most part except for ie6. I am unhappy with it though because it is just way to much code and it really doesn't look as nice as I would like. Is there a more elegant way of doing this?

I am also wondering if you could take a look at the way I am calling the block names to style the individual blocks. Is this the best way?

<b id="<?php print $block->module ?>" class="rbottom">

block.tpl.php full

<b id="<?php print $block->module ?>" class="rtop">
 <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r5"></b></b>
 
<div id="sidebar-right-border" class="<?php print $block->module ?>">
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">


<?php if ($block->subject): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

  <div class="content"><?php print $block->content ?></div>
  
</div>
</div>

<b id="<?php print $block->module ?>" class="rbottom">

  <b class="r5"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
  
<br />

CSS

#sidebar-right-border {
	padding-left: 5px;
	border: 2px solid #CC6600;
}

.rtop, .rbottom{
	display:block;
	background: #fbfbfb;
}
.rtop *, .rbottom *{
	display: block;
	height: 1px;
	overflow: hidden;
	background:  #CC6600
}

.rtop *, .rbottom *{
	display: block;
	height: 1px;
	overflow: hidden;
	background:  #CC6600
}

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r5{margin: 0 1px}
.r4{margin: 0 0px; height: 2px}

#menu-top b {
	display: none;
}

#menu-top #sidebar-right-border {
	border: 0px;
	background-color: #fbfbfb;
	padding: 0px;
	margin: 0px;
}

#sidebar-right-border.blog {
	border-color: #0000CC;
}

#blog.rtop *, #blog.rbottom * {
	background: #0000CC;
}

#sidebar-right-border.user {
	border-color: #FF0000;
}

#user.rtop *, #user.rbottom * {
	background: #FF0000;
}

#sidebar-right-border.search {
	border-color: #999999;
}

#search.rtop *, #search.rbottom * {
	background: #999999;
}

#sidebar-right-border.menu {
	border-color: #999999;
}

#menu.rtop *, #menu.rbottom * {
	background: #999999;
}

#sidebar-right-border.comment {
	border-color: #006600;
}

#comment.rtop *, #comment.rbottom * {
	background: #006600;
}

#sidebar-right-border.comment {
	border-color: #006600;
}

The site is http://www.b2btribes.com

» Login or register to post comments

Why not just use images -

Jeff Burnz - September 30, 2008 - 00:27

Why not just use images - you can do it with two images per block and no additional markup to the default block template - and they will look stunning.

If you're set on JavaScript rounded corners there's some jquery plugins & modules in the Downloads section that do it quite well, frankly I cant be bothered with JS rounded corners until the day comes when they can look as good as a 32bit png...

Using <?php print $block->module ?> is not good as it will create validation errors (ID defined more than once) and make it harder to target a specific block. That's why the default block template adds the delta to the ID - module + delta = unique ID for each block output by a particular module.

Strait off I'd trash all those empty <b> tags, use stunning images and no extra markup (and a fraction of the CSS) then kick back and eat cake.

Else get hardcore and use -moz-border-radius and -webkit-border-radius and let IE have its square corners :/

http://www.css3.info/preview/rounded-border/ just for a laugh:)

Scalability

prestonso - September 30, 2008 - 22:04

The nifty rounded corners works well for designers who absolutely despise rounded corners using images. But now that Firefox has adopted the zoomed increase-size method, there is probably no real reason to stick with nifty corners (which is really un-semantic anyway), unless you're a big sucker for scalability.

jQuery will also perform admirably.
___________________

Preston So
Creative Director
Monarch Digital, Colorado Springs
My near-dead non-Drupal site

I would love to use images

ChrisOPeterson - October 3, 2008 - 03:18

I would love to use images but the problem is that i only want a rounded border, not a background and I have yet to find a good method for this. If you know of a tutorial that covers this, it would be greatly appreciated.

http://inletmedia.com