A Tree House Agency Community

Using JQuery to Replace graphics for block beautification by Josiah

I've been playing lately with JQuery to replace images for block beautification. My biggest challenge has been when using curvy corners and gradients in a block. Doing the gradient this way is interesting because the gradient is custom to the size of the block. I know of no simple way to accomplish this with graphics. The problem: It seems to require a lot of very specific CSS to get all the different blocks in drupal to look proper. The padding is the biggest issue that I've run into.

I'd like to hear about a simple solution to jquery to make blocks with curved corners and a gradient so that the gradient scales to the length of the block.

Comment

The best solution I can quickly think of... would be to leverage a jquery library, to minimize the amount of actual work you will need to do.

First thing I did was went to http://plugins.jquery.com and did a search on "gradient". This returned a bunch of results... one of which was http://plugins.jquery.com/project/jqcanvas, which seems to be cross browser compatible and was actually the one we used in our session for this very example.

Just include your scripts and then call the functions on the appropriate elements.

I hope this helps,

J

Post new Comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options