Add border with rounded corners on nodes
j0k3z - October 11, 2006 - 11:16
How can I modify my template to have rounded courners and borders around the nodes?
All of my nodes are kind of blending in so I want to place a border on them.
Here is my website: http://www.chicagolanddining.com/drupal/node
css
Quick answer: With css ofcourse, and some images.
Long answer: Styling content for theming using CSS
The easiest way is to start off with a theme that already has them..
i know i'll be flamed for
i know i'll be flamed for this, but here goes.
for rounded corners, use style="-moz-border-radius:6px;". doesn't work in IE? well as much as we want to target all audiences, we (as an open-source community) want our software to be better than software in the commercial sector. the cooler our sites look in FF compared to IE, the more people would rather view our sites in FF, and (1) that's a hit for evil microsoft, and (2) it will force THEM to conform to US. The site will have the same functionality in either browser, but will be prettier in FF.
and now the onslaught of flaming :)
rounded corners without images - Awesome script
I just found this script the other day and haven't had the opportunity to put it into use, but it looks awesome. Check out the examples on the site.
http://www.curvycorners.net/
One thing you can do that you could never do before is have rounded corners that show a background image through perfectly.
Michael
www.webemulsion.com
Issues with curvyCorners and drupal 5
If you're using curvyCorners (either from http://www.curvycorners.net or the jquery plug-in at http://www.talrasha.com/jquery/curvycorners/demo.html) and drupal 5, you could face two possible problems (maybe more...) when a curved div has decendent(s) of tinymce and/or collapseable fieldset.
The problems I experienced are:
Collapseable Fieldset
TinyMCE
The solution is to set the autoPad option of curvyCorners to false.
For example, if your layout looks like this...
...<body>
<div id='container-outer'>
...
tinymce and/or collapseable fieldset somewhere here
...
</div>
</body>
...
and you wanted to curve the corners of container-outer, you'll have problems if curvyCorners is passed autoPad: true. To correct this, the option autoPad has to be false and the container-outer will need a child div to which padding can be set in css. So, something like the following will do...
...<body>
<div id='container-outer'>
...
<div id='container-inner'>
...
tinymce and/or collapseable fieldset somewhere here
...
</div>
...
</div>
</body>
...
I hope this makes sense and helps someone else.
autoPad: false solved my issue
... with CurvyCorners and the associated jquery plugin. Thank you!
I should note I had to put in the JQuery Update module to get the CurvyCorners jquery plug-in to work, but it looks like I may be using a different plug-in that the one originally linked.
http://drupal.org/project/jquery_update
http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery
Worked!
You bet it does! curvyCorners now works fine with anti-aliased corners. I don't wanted to mess up my CSS with pictures everywhere again.
Thank you!
Sam
Curved borders without using corner images
Hi can anyone tell me, do we have any option to bring the curved corners without using corner images in CSS. If anybody knows please reply me. Thanks in advance
Srikumar.G
you should use images
Unfortunately, from what I can tell, we are somewhat stuck with images for now. The closest thing I've seen to a solution is http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery which works beautifully - the corners look even better than images.
But for my sites, like most drupal sites, I have lots of nodes/comments/blocks that display on a single page. Even on a powerful new computer, I notice a very significant lag in the rendering time of the page because it takes a lot to render so many corners using these methods. It much faster to have the user download the image(s) for the corners instead.
There are also rendering problems that can be a challenge to overcome.
I can't wait til the day when we can code corners through css, and leave it up to the browser to take care of it, but I think that day is still a few years down the road.
I don't see any problem with
I don't see any problem with using the Rounded Corners module, it uses Jquery and is very lightweight.
omg please help us
somebody please help the lot of us helpless folk!
I've tried adding drupal add rounded_corners_lite.inc.js
and in my comments.tpl
My Div is showing as "comments" in html
(I've also tried this in my page.tpl and also template.tpl(error)
<script type="text/JavaScript" src="js/rounded_corners_lite.inc.js"></script>
<script type="text/JavaScript">
window.onload = function()
{
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true
}
var divObj = document.getElementById("comments");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>
All you need to do is
All you need to do is download the rounded corners module, and follow the demo on the module page to get your rounded corners. No messing with .inc files or .tpl files needed :)
it's amazing what happens if
it's amazing what happens if you read the readme and use the correct js file.
also make sure your css has a background color
;)
thanks
Did you get Rounded Corners Module Working in IE
I have not been lucky using rounded corners module with IE ...sounds like you guys have...can you can confirm:|
thanks
henns20
Panels 2 is the ultimate solution
Panels 2 is a great way to do it, with no coding needed.
Define a 'page panel' to override the node, then use the 'rounded corners' style under the panel's 'layout settings' tab.
Amnon
-
Professional: Drupal Israel | Drupal Development & Consulting
Personal: Hitech Dolphin: Regain Simple Joy :)
Please see this
I got some codings for curved division without images: (I am not interesed to say from where I got this any way I want to share this.)
<html>
<head>
<style type="text/css">
.raised
{
background:transparent;
width:40%;
}
.raised h1, .raised p
{
margin:0 10px;
}
.raised h1
{
font-size:2em;
color:#fff;
}
.raised p
{
padding-bottom:0.5em;
}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,
.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b
{
display:block;
overflow:hidden;
font-size:1px;
}
.raised .b1, .raised .b2, .raised .b3,
.raised .b1b, .raised .b2b, .raised .b3b
{
height:1px;
}
.raised .b2
{
background:#f2f2f2;
border-left:1px solid #0c4e76;
border-right:1px solid #0c4e76;
}
.raised .b3
{
background:#f2f2f2;
border-left:1px solid #0c4e76;
border-right:1px solid #0c4e76;
}
.raised .b4
{
background:#f2f2f2;
border-left:1px solid #0c4e76;
border-right:1px solid #0c4e76;
}
.raised .b4b
{
background:#f2f2f2;
border-left:1px solid #0c4e76;
border-right:1px solid #0c4e76;
}
.raised .b3b
{
background:#f2f2f2;
border-left:1px solid #0c4e76;
border-right:1px solid #0c4e76;
}
.raised .b2b
{
background:#f2f2f2;
border-left:1px solid #0c4e76;
border-right:1px solid #0c4e76;
}
.raised .b1
{
margin:0 5px;
background:#0c4e76;
}
.raised .b2, .raised .b2b
{
margin:0 3px;
border-width:0 2px;
}
.raised .b3, .raised .b3b
{
margin:0 2px;
}
.raised .b4, .raised .b4b
{
height:2px; margin:0 1px;
}
.raised .b1b
{
margin:0 5px; background:#0c4e76;
}
.raised .boxcontent
{
display:block;
background:#f2f2f2;
border-left:1px solid #0c4e76;
border-right:1px solid #0c4e76;
}
</style>
</head>
<div class="raised" style="width:100%;" >
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<div class="boxcontent">
<p>
Here is the curvey div without images
Here is the curvey div without images
Here is the curvey div without images
Here is the curvey div without images
Here is the curvey div without images
Here is the curvey div without images
Here is the curvey div without images
Here is the curvey div without images
</p>
</div>
<b class="b4b"></b>
<b class="b3b"></b>
<b class="b2b"></b>
<b class="b1b"></b>
</div>
</body></html>
check it out.. I hope this will work.............
_________________________________________________
http://tekren.blogspot.com