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
Comments
Why not just use images -
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:)
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Scalability
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
___________________
Preston So
I would love to use images
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
Your reply doesnt make sense
This comment uses rounded corners that are all .png files - use firebug and take a wee peak under the hood.
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.