I needed a way to put rounded corners on the top and the bottom. In my case, I am using a customized theme based off of zen-fixed. I wanted a total of 8 rounded corners, 4 on top and 4 on bottom. There might be a better way of doing this, but I had to modify the page.tpl.php to have 4 div's surrounding the "container" div:

     39     <div class="top-left">
     40     <div class="top-right">
     41     <div class="bottom-left">
     42     <div class="bottom-right">

This allowed me to set the div's background-image to have the rounded corners.

For an example of what I'm talking about please see the attached drupal-rounded-corners.png screenshot.

Thanks!

--
Marcus

CommentFileSizeAuthor
drupal-rounded-corners.png86.53 KBmalcomm

Comments

zirafa’s picture

zirafa commented

Haven't done much with rounded corners myself, but just wanted to mention that jQuery has a rounded corners plugin. Sometimes it's buggy though. jQuery also has the nifty .wrap function for DOM elements so using javascript you could do:

$("#container").wrap("<div class='top-left'></div>");
$("#container").wrap("<div class='top-right'></div>");
$("#container").wrap("<div class='bottom-left'></div>");
$("#container").wrap("<div class='bottom-right'></div>");

that would wrap #container with all four classes using javascript. using javascript is kind of a nice approach to corners since corner require a lot of extra wrapper divs that can make the xhtml skeleton hard to manage after a while. the downside of course is without JS, corners disappear :(

malcomm’s picture

malcomm commented

Thanks for the input zirafa, but I think I'd really like to see a non-JS solution on this one. In my honest opinion, adding:

<div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right">
</div></div></div></div>

This is just two lines and shouldn't be too hard to manage. Then again, if the JS route is a better way, then I'm down. I personally just don't like JS. :)

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Closed (won't fix)

FYI, I try to avoid javascript solutions to CSS design issues since js can be disabled.

I occasionally use rounded corners as well, but I don’t think adding them to the base of Zen is a good idea because most people won’t ever need the extra divs and would consider it code bloat.

Sorry, but you'll just have to manually edit Zen (which is easy) when you need rounded corners.