Rounded corners with CSS only zen sub-theme

I have the exact same question (subscribing). After struggling I finally decided to resort to a jquery approach for the time being while I work on other things. Edited to add: My struggles were with a 5.x subtheme. Have not looked into this for 6.x subthemes yet.

@silurius: Since the HTML and CSS are nearly identical for Zen 5.x and 6.x, the same styling techniques will work for both.

I use the classic faux columns method to do rounded corners: http://www.alistapart.com/articles/fauxcolumns/

Note that Zen has several wrapper divs, so if you were trying to put rounded corners on the content div, you have these divs to play with:

• #content-inner
• #content
• #main-inner
• #main
• #page-inner
• #page

You can also use adjoining divs to add bg images:

• #header-inner
• #header
• #footer-inner
• #footer

I often find those divs sufficient to do rounded corners, especially with fixed width layouts. For example, #main-inner gets a bg image with the top of the rounded corner boxes for content and sidebar columns, #main gets the repeating middle, and #footer gets a fat top padding and a bg image with the bottom of the rounded corner boxes.

This does take some mental gymnastics to figure out how to do it without adding wrapper divs, but its possible.

And, if you can't figure out a way, you can always copy the page.tpl.php from the main zen theme into your sub-theme and add an extra wrapper div. I've had designs that required adding them. :-)

Liquid layouts require a lot more wrapper divs. If you don't want to add wrapper divs, javascript is the only possibility.

Leaving this as "active" so someone else can chime in with a js solution; I haven't ever used one.

I installed NiftyCube (not the Drupal module, but directly from http://www.html.it/articoli/niftycube/index.html ), which creates rounded corners on your div elements. My code ended up looking something like this:

drupal_add_js(drupal_get_path('theme', 'homebase') . '/NiftyCube/niftycube.js', 'theme', 'header');
// Change the following to match the DIV elements you want rounded.
$rounded_corners = 'window.onload=function(){
     Nifty("div.block-inner","all");
     Nifty("div#main-inner","bottom");
     Nifty("ul.secondary","top");
     Nifty("ul.secondary a","top");
   } ';
drupal_add_js($rounded_corners, 'inline', 'header');

drupal_add_css(path_to_subtheme() .'/NiftyCube/niftyCorners.css', 'theme', 'all');

I will second the need to add additional div elements to the Zen theme so that designers can create liquid layouts, or at least incorporate some help/documentation in the Zen theme since so many people have been conditioned with A List Apart's Sliding Doors technique.

If you don't mind a little js here is a jQuery plugin
http://www.methvin.com/jquery/jq-corner-demo.html
And here is a drupal module for that:
http://drupal.org/project/jq_eyecandy

just to let you know that i've successfully used http://drupal.org/project/rounded_corners together with the zen theme, but there's no 6 port (yet)

@attiks
Your short words sound pleasing and promising.

I am working on the same path, but I do not get working "Rounded Corners" on the sidebars :-(
Could you explain your proceedings a little bit in some more words? What code did you enter for your successful results?

And - are you already working with v.1.92? On the following page, there are very interesting improvemnts shown:
http://malsup.com/jquery/corner/

Especially the "adornments"-part with frames around a block sound very interesting!

@JuLearn
I'm using Rounded corners 5.x-1.x-dev (2007-Jun-19) together with version 1.7 (1/26/2007) of jquery.corner.js, to add the corners i just added the following to /admin/settings/rounded_corners

$("#cart-form-pane").corner("round 20px");
$("#uc-cart-checkout-form").corner("round 20px");

$("#block-uc_cart-0").corner("round 10px");

First two lines for the main content, the last line for a block in a sidebar

What problem do you have?

@attiks
Thank you so much for answering that quickly!

Now I found out that I don't have a Rounded Corners-problem but a Drupal/CSS-Knowledge-Problem.

First I had to learn to declare a special Drupal-block in CSS which is nicely described here:
http://drupal.org/node/74481

With these informations it's easy to attribute blocks. Great!

My actual problem may be another CSS one. I hope I don't bother anybody...
On this page there are described a lot more varations with RC:
http://malsup.com/jquery/corner/

Very interesting to me: "Adornment". In the description they talk about "Effects Using Nested Cornered Elements (Thanks to Kevin Scholl for this idea)"

Code for the example "Round" like
$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")

...what the hell are Nested Elements e.g. how do I handle them in Drupal?

(Resurrecting thread & changing to 6.x-1.0)

In my fixed layout subtheme, I struggled a bit trying to apply a pure CSS technique with a border variation to node-inner. Part of bottom region would lose the a portion of the right- and left-hand borders (but not the corners) and would lose part of the background color. Tweaking the margins and padding only seemed to make this worse. I finally caved and went with a jQuery method (jquery.corner.js by malsup).

So far the most basic approach works great when applied to the node-inner class in all browsers. But when I attempt to apply a border using two different techniques, it fails in IE.

Technique #1

jQ: $(".node-inner").corner("keep round 10px");

CSS:

  .node-inner /* Additional wrapper for node */
  {
  background-color: #EEEEEE;
  border: 1px solid #AAAAAA;
  padding: 0 10px 10px 10px;
  }

Outcome: IE applies a square corner around the rounded background. FF & Safari are fine.

Technique #2

jQ: $(".node-inner").corner("round 8px").parent().css('padding', '4px').corner("round 10px");

CSS: (Same as above)

Outcome: IE does not display the border. FF & Safari are still fine.

I'm certain I have seen an IE CSS trick for this, but I have lost track of it.

Help?

Subscribing.

subscribe

Thread bump reminded me that I found a pretty good compromise for sidebar content, which I saw in use on roundedcorner.com.

Block rounded corner HTML:

Paste this into a block edit form, and replace [MY CONTENT] with the content you want in the block.

<div class="rounded_corner_box_sidebar">
   <div class="rounded_corner_top_sidebar"><div></div></div>
      <div class="rounded_corner_content_sidebar">
         [MY CONTENT]
      </div></div><div class="rounded_corner_bottom_sidebar"><div></div></div>
</div>

Block rounded corner CSS:

/** Rounded corners for select right sidebar content **/

.rounded_corner_box_sidebar {
  background: url(images/rounded_corner_sidebar_right_tl.png) no-repeat top left;
}
.rounded_corner_top_sidebar {
  background: url(images/rounded_corner_sidebar_right_tr.png) no-repeat top right;
}
.rounded_corner_bottom_sidebar {
  background: url(images/rounded_corner_sidebar_right_bl.png) no-repeat bottom left;
}
.rounded_corner_bottom_sidebar div {
  background: url(images/rounded_corner_sidebar_right_br.png) no-repeat bottom right;
}
.rounded_corner_content_sidebar {
  background: url(images/rounded_corner_sidebar_right_r.png) top right repeat-y;
}

.rounded_corner_top_sidebar div,.rounded_corner_top_sidebar,
.rounded_corner_bottom_sidebar div, .rounded_corner_bottom_sidebar {
  width: 100%;
  height: 15px;
  font-size: 1px;
}
.rounded_corner_content_sidebar, .rounded_corner_bottom_sidebar {
  margin-top: -19px;
}

This solution is crude, but it works pretty well so far. I plan to move the html into one of the template files instead, and then adopt the same solution for the main content area. If anyone else manages to do that, please report back!

Even though I prefer CSS over jQuery for this, I would love to hear input on the jQuery IE issue I mentioned above.

Closing old and inactive support requests.