padding in a block with gradient and curvy corners
flickerfly - June 19, 2008 - 23:53
| Project: | jQuery Eye Candy |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
I have applied the gradient and curvy corners to the blocks in the right column here: http://members.fim.org. It works nicely, but I can't seem to come up with a way to tell anything in a paragraph tag to stay away from the edge without causing the content to expand and become wider that the curvy graphics above and below it. This makes it look stupid, but being up against the edge looks stupid too.
Anyone fought this battle and won yet?
Here's the code for CurvyCorners:
$(function(){
$('.block .content')
.corner({
tl: false,
tr: false,
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true
});
$('.block .title')
.corner({
tl: {radius: 16 },
tr: {radius: 16 },
bl: false,
br: false,
antiAlias: true,
autoPad: true
});
});and here's the code for gradient:
$(function() {
$('#userAgent').html(navigator.userAgent);
$('#main #sidebar-right .block .title').gradient({
from: '50B7DD',
to: '0288B8',
direction: 'horizontal'
});
$('#main #sidebar-right .block .content').gradient({
from: '0288B8',
to: '50B7DD',
direction: 'horizontal'
});
});
#1
Did you try margins in your css? Padding should work too. And try it in style.css after you found the block id using firebug.
#2
Doh, I must be off my game a bit. I thought for sure I'd done it, but it worked this time and didn't before. Thanks!
#3
#4
Automatically closed -- issue fixed for two weeks with no activity.