Fwd: Rounded CSS corners in Plone with *jquery.corner.js*

6 messages Options
Embed this post
Permalink
Kurt Bendl () Fwd: Rounded CSS corners in Plone with *jquery.corner.js*
Reply Threaded More More options
Print post
Permalink
Hi guys,

I needed rounded corners and wrote-up what I did to get there. Maybe it
can help someone else.

Could someone please take a look at this and let me know if you want it
for a tip on Plone.org? If so, I can flesh it out and add some screen shots.

Best,

   -Kurt




Rounded CSS corners in Plone with *jquery.corner.js*
=======================================================

In the following, we'll start with a really basic Plone theme based on
Plone Default, give it a border, and add nice rounded corners. The whole
exercise should take about 15 minutes.

Background
I had a graphic artist drop a design in my lap. The design was all "Web
2.0"-ish I was told, and had those rounded corners that are so "hot"
these days. I'd hacked various rounded corner things together in the
past and wasn't looking forward to it. I looked around and found a few
interesting options that let me use JQuery to make rounded corners. It
all seemed too much work. Then I asked Rob Porter at WebLion who showed
me some curvy corner stuff. It was cool, but for some reason was
blowing-up in my theme. However, Rob gave me enough of a clue to know
better what I 'did' want, and after a bit of searching I found it on the
"jquery corner demo page" maintained by Mike Alsup at
http://jquery.malsup.com/corner/ and in the *jquery.corner.js* code
originally written by Dave Methvin and currently maintained by Mike
Alsup that was being used on the demo.

This just worked for me. Just to note: I am not a JQuery or JavaScript
expert. I just needed to get this one thing done, and this is how I did
it. Your mileage may vary.

Here is an example of what I did, and hopefully enough info to prove if
it works for you.

Assumptions:
You can create a buildout-based Plone
You can create a theme
You can add it to your buildout

I'm doing this in Plone 3.3. It may or may not work in earlier versions
of Plone (depending upon versions of JQuery, etc.).


Rounded corners in Plone - Steps for the impatient
-------------------------------------------------------

Get *jquery.corner.js* and put it in your theme's skins folder

Make a *jquery.corner.config.js* file in your theme's skins folder with
the following content:


Add the following lines in your CSS to help prove that it works:


Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
*jsregistry.xml* file.

Install or re-install your theme or use generic setup to re-import your
theme's profile

Reload your demo and be amazed at the hot round corner action.



Rounded Corners in Plone - More detailed example docs
-------------------------------------------------------
Make a plone3_theme
In this example, we'll use paster to create a new theme and call it
*theme.corner* (original, I know.)
In your buildout's *./src/* folder, type this:

     paster create -t plone3_theme theme.corner

Make sure you add *theme.corner* to your buildout's eggs, develop, and
zcml. The buildout and instance sections of your buildout will look
something like this:

     [buildout]
     extends = versions.cfg
     versions = versions

     parts =
         PIL
         paster
         zope2
         productdistros
         instance
         zeoserver

     eggs =
         PIL
         theme.corner

     develop =
         src/theme.corner

     [instance]
     recipe = plone.recipe.zope2instance
     zope2-location = ${zope2:location}
     zeo-client = True

     eggs =
         Plone
         ${buildout:eggs}

     zcml =
         theme.corner

     products =
         ${buildout:directory}/products
         ${productdistros:location}


Get *jquery.corner.js*
-------------------------
Get a copy of *jquery.corner.js* and put it in your theme's *skins* folder.
You can download it from the demo page http://jquery.malsup.com/corner/.
The plone3_theme paster template does not include a scripts or js folder
for adding extra javascripts, etc. So in your proof of concept theme you
can just drop it into your
`buildout_dir/src/theme.corner/theme/corner/skins/theme_corner_templates/`
folder.


Make a config file: jquery.corner.config.js
------------------------------------------------
Make a *jquery.corner.config.js* file and put it in the
*./skins/theme_corner_templates/* folder with the *jquery.corner.js*
file. The config file for this example will contain the following content:

     jq(function(){
       jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
     });


Add some CSS
------------------------------------------------
To add a border around the site using the #visual-portal-wrapper to help
prove that the rounded corner code works, add the following lines in
your theme's CSS (I register a new CSS file in my themes, but if you're
starting with a default paster plone3_theme, you can put the following
in *./browser/main.css*):

     body {
       padding: 40px;
     }

     #visual-portal-wrapper {
       border: 4px solid #888888;
     }



Add jquery.corner stuff to jsregistry.xml
------------------------------------------------
Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
*jsregistry.xml* file. The file may be found (or should be created) in
*theme.corner/theme/corner/profiles/default/jsregistry.xml* and should
look something similar to the following:

     <?xml version="1.0"?>
     <object name="portal_javascripts">
      <javascript cacheable="True" compression="safe" cookable="True"
         enabled="True" expression="" id="jquery.corner.js"
         inline="False"/>
      <javascript cacheable="True" compression="safe" cookable="True"
         enabled="True" expression="" id="jquery.corner.config.js"
         inline="False"/>
     </object>



Run buildout
------------------------------------------------
Re-run your buildout to make sure your new theme.corner is available to
be installed.


Install the theme
------------------------------------------------
Install or re-install the ThemeCorner theme or use generic setup to
import the stuff defined in the *jsregistry.xml* file.

To use generic setup, go to your plonesite -> portal_setup -> Import
tab, then under *Select Profile or Snapshot* select your ThemeCorner.
Scroll down a bit, and look for and click on the *Import All Steps* button.


Be amazed!
------------------------------------------------
Reload your demo plone site and be amazed at the hot round corner action.



More rounded corners in Plone
------------------------------------------------
*jquery.round.js* lets you set a corner effect type, which corners to
curve, and how big a curve to make. should be able to put a curve on
almost any div or class block you have. Just add another line to your
*jquery.corner.config.js* file. For example, put curvy corners on the
.contentViews tabs for logged-in users, simply add another line:

     jq(function(){
       jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
       jq('.contentViews li a').corner("round top 6px");
     });

Notice on the second line we defined the corner effect type as
**round**, told it to only manipulate the *top* corners, and do it with
a *6px* corner.

At a minimum, all you need to get rounded corners is:

     jq('#visual-portal-wrapper').corner();

*jquery.round.js* will round all four corners by default with a 10px
radius width. Personally, I like to be explicit. But I'd probably be
okay with defining the portal wrapper this way:
     *jq('#visual-portal-wrapper').corner("20px");*.

The options for what corners to effect are top, bottom, tr, tl, br, and
bl. And, the width must be defiled in pixels.


Acknowledgments
---------------------
Thanks to Rob Porter at WebLion who got me on the right path, and Mike
Alsup and Dave Methvin for writing and maintaining the *jquery.round.js*
code that helped make my life a little easier.

------------------------------------------------------------------------------
Come build with us! The BlackBerry® Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9-12, 2009. Register now!
http://p.sf.net/sfu/devconf
_______________________________________________
Plone-docs mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-docs
Israel Saeta Pérez () Re: Fwd: Rounded CSS corners in Plone with *jquery.corner.js*
Reply Threaded More More options
Print post
Permalink
Kurt Bendl wrote:

> Hi guys,
>
> I needed rounded corners and wrote-up what I did to get there. Maybe it
> can help someone else.
>
> Could someone please take a look at this and let me know if you want it
> for a tip on Plone.org? If so, I can flesh it out and add some screen
> shots.
>
> Best,
>
>    -Kurt
>

Hi Kurt,

Thanks for sharing your knowledge with the community!

I'm sure your contribution will be useful either as a new how-to or as an
extension to an existing one. Veda Williamson or Anne Botwell are the
editors for the Theming section, so they will provide you further guidance.

-- israel



------------------------------------------------------------------------------
Come build with us! The BlackBerry® Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9-12, 2009. Register now!
http://p.sf.net/sfu/devconf
_______________________________________________
Plone-docs mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-docs
Israel Saeta Pérez
vedaw () Re: Fwd: Rounded CSS corners in Plone with *jquery.corner.js*
Reply Threaded More More options
Print post
Permalink
In reply to this post by Kurt Bendl
Hi Kurt,

We do have a tutorial on rounded corners using Jquery. Do you want access to
work this into the existing tutorial? If it's different from what's there,
I'm open to a new section.

http://plone.org/documentation/tutorial/rounded-corners-in-css/rounding-corn
ers-using-jquery

Thanks,

- Veda


On 9/16/09 7:23 AM, "Kurt Bendl" <[hidden email]> wrote:

> Hi guys,
>
> I needed rounded corners and wrote-up what I did to get there. Maybe it
> can help someone else.
>
> Could someone please take a look at this and let me know if you want it
> for a tip on Plone.org? If so, I can flesh it out and add some screen shots.
>
> Best,
>
>    -Kurt
>
>
>
>
> Rounded CSS corners in Plone with *jquery.corner.js*
> =======================================================
>
> In the following, we'll start with a really basic Plone theme based on
> Plone Default, give it a border, and add nice rounded corners. The whole
> exercise should take about 15 minutes.
>
> Background
> I had a graphic artist drop a design in my lap. The design was all "Web
> 2.0"-ish I was told, and had those rounded corners that are so "hot"
> these days. I'd hacked various rounded corner things together in the
> past and wasn't looking forward to it. I looked around and found a few
> interesting options that let me use JQuery to make rounded corners. It
> all seemed too much work. Then I asked Rob Porter at WebLion who showed
> me some curvy corner stuff. It was cool, but for some reason was
> blowing-up in my theme. However, Rob gave me enough of a clue to know
> better what I 'did' want, and after a bit of searching I found it on the
> "jquery corner demo page" maintained by Mike Alsup at
> http://jquery.malsup.com/corner/ and in the *jquery.corner.js* code
> originally written by Dave Methvin and currently maintained by Mike
> Alsup that was being used on the demo.
>
> This just worked for me. Just to note: I am not a JQuery or JavaScript
> expert. I just needed to get this one thing done, and this is how I did
> it. Your mileage may vary.
>
> Here is an example of what I did, and hopefully enough info to prove if
> it works for you.
>
> Assumptions:
> You can create a buildout-based Plone
> You can create a theme
> You can add it to your buildout
>
> I'm doing this in Plone 3.3. It may or may not work in earlier versions
> of Plone (depending upon versions of JQuery, etc.).
>
>
> Rounded corners in Plone - Steps for the impatient
> -------------------------------------------------------
>
> Get *jquery.corner.js* and put it in your theme's skins folder
>
> Make a *jquery.corner.config.js* file in your theme's skins folder with
> the following content:
>
>
> Add the following lines in your CSS to help prove that it works:
>
>
> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
> *jsregistry.xml* file.
>
> Install or re-install your theme or use generic setup to re-import your
> theme's profile
>
> Reload your demo and be amazed at the hot round corner action.
>
>
>
> Rounded Corners in Plone - More detailed example docs
> -------------------------------------------------------
> Make a plone3_theme
> In this example, we'll use paster to create a new theme and call it
> *theme.corner* (original, I know.)
> In your buildout's *./src/* folder, type this:
>
>      paster create -t plone3_theme theme.corner
>
> Make sure you add *theme.corner* to your buildout's eggs, develop, and
> zcml. The buildout and instance sections of your buildout will look
> something like this:
>
>      [buildout]
>      extends = versions.cfg
>      versions = versions
>
>      parts =
>          PIL
>          paster
>          zope2
>          productdistros
>          instance
>          zeoserver
>
>      eggs =
>          PIL
>          theme.corner
>
>      develop =
>          src/theme.corner
>
>      [instance]
>      recipe = plone.recipe.zope2instance
>      zope2-location = ${zope2:location}
>      zeo-client = True
>
>      eggs =
>          Plone
>          ${buildout:eggs}
>
>      zcml =
>          theme.corner
>
>      products =
>          ${buildout:directory}/products
>          ${productdistros:location}
>
>
> Get *jquery.corner.js*
> -------------------------
> Get a copy of *jquery.corner.js* and put it in your theme's *skins* folder.
> You can download it from the demo page http://jquery.malsup.com/corner/.
> The plone3_theme paster template does not include a scripts or js folder
> for adding extra javascripts, etc. So in your proof of concept theme you
> can just drop it into your
> `buildout_dir/src/theme.corner/theme/corner/skins/theme_corner_templates/`
> folder.
>
>
> Make a config file: jquery.corner.config.js
> ------------------------------------------------
> Make a *jquery.corner.config.js* file and put it in the
> *./skins/theme_corner_templates/* folder with the *jquery.corner.js*
> file. The config file for this example will contain the following content:
>
>      jq(function(){
>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>      });
>
>
> Add some CSS
> ------------------------------------------------
> To add a border around the site using the #visual-portal-wrapper to help
> prove that the rounded corner code works, add the following lines in
> your theme's CSS (I register a new CSS file in my themes, but if you're
> starting with a default paster plone3_theme, you can put the following
> in *./browser/main.css*):
>
>      body {
>        padding: 40px;
>      }
>
>      #visual-portal-wrapper {
>        border: 4px solid #888888;
>      }
>
>
>
> Add jquery.corner stuff to jsregistry.xml
> ------------------------------------------------
> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
> *jsregistry.xml* file. The file may be found (or should be created) in
> *theme.corner/theme/corner/profiles/default/jsregistry.xml* and should
> look something similar to the following:
>
>      <?xml version="1.0"?>
>      <object name="portal_javascripts">
>       <javascript cacheable="True" compression="safe" cookable="True"
>          enabled="True" expression="" id="jquery.corner.js"
>          inline="False"/>
>       <javascript cacheable="True" compression="safe" cookable="True"
>          enabled="True" expression="" id="jquery.corner.config.js"
>          inline="False"/>
>      </object>
>
>
>
> Run buildout
> ------------------------------------------------
> Re-run your buildout to make sure your new theme.corner is available to
> be installed.
>
>
> Install the theme
> ------------------------------------------------
> Install or re-install the ThemeCorner theme or use generic setup to
> import the stuff defined in the *jsregistry.xml* file.
>
> To use generic setup, go to your plonesite -> portal_setup -> Import
> tab, then under *Select Profile or Snapshot* select your ThemeCorner.
> Scroll down a bit, and look for and click on the *Import All Steps* button.
>
>
> Be amazed!
> ------------------------------------------------
> Reload your demo plone site and be amazed at the hot round corner action.
>
>
>
> More rounded corners in Plone
> ------------------------------------------------
> *jquery.round.js* lets you set a corner effect type, which corners to
> curve, and how big a curve to make. should be able to put a curve on
> almost any div or class block you have. Just add another line to your
> *jquery.corner.config.js* file. For example, put curvy corners on the
> .contentViews tabs for logged-in users, simply add another line:
>
>      jq(function(){
>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>        jq('.contentViews li a').corner("round top 6px");
>      });
>
> Notice on the second line we defined the corner effect type as
> **round**, told it to only manipulate the *top* corners, and do it with
> a *6px* corner.
>
> At a minimum, all you need to get rounded corners is:
>
>      jq('#visual-portal-wrapper').corner();
>
> *jquery.round.js* will round all four corners by default with a 10px
> radius width. Personally, I like to be explicit. But I'd probably be
> okay with defining the portal wrapper this way:
>      *jq('#visual-portal-wrapper').corner("20px");*.
>
> The options for what corners to effect are top, bottom, tr, tl, br, and
> bl. And, the width must be defiled in pixels.
>
>
> Acknowledgments
> ---------------------
> Thanks to Rob Porter at WebLion who got me on the right path, and Mike
> Alsup and Dave Methvin for writing and maintaining the *jquery.round.js*
> code that helped make my life a little easier.
>
> ------------------------------------------------------------------------------
> Come build with us! The BlackBerry® Developer Conference in SF, CA
> is the only developer event you need to attend this year. Jumpstart your
> developing skills, take BlackBerry mobile applications to market and stay
> ahead of the curve. Join us from November 9-12, 2009. Register now!
> http://p.sf.net/sfu/devconf
> _______________________________________________
> Plone-docs mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/plone-docs


------------------------------------------------------------------------------
Come build with us! The BlackBerry® Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9-12, 2009. Register now!
http://p.sf.net/sfu/devconf
_______________________________________________
Plone-docs mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-docs
Kurt Bendl () Re: Fwd: Rounded CSS corners in Plone with *jquery.corner.js*
Reply Threaded More More options
Print post
Permalink
Hi Veda (and everyone else),

Gawd.... I feel so... exposed. :-)

Well, there's more than one way to skin a cat... er... theme
a Plone site.  :-)   It's a different approach, using a different
JQuery module (although the modules have nearly the same
name) with many more (and more easily configurable) options,
and most of all it does not require editing each and every one
of your .pt files to use (as does the referenced document.) It's
really a much cleaner option.

This would be *another* option. I think the confusion is that
both options use jquery and end up with rounded corners. And,
since there's not "One True Way"(tm)  to do rounded corners
in  Plone 3.x themes, I think it's another valid option.

I know there are other ways to get rounded corners into a
Plone theme. I've done it differently myself using different
techniques than these. Possibly there could be a "Rounded
corners in a Plone 3.x theme" reference page, with these
two (and any others that may be contributed or linked to)
as options.

Just my $0.02.  :-)


xoxoxox,

      Kurt


On Fri, Sep 18, 2009 at 2:31 PM, Veda Williams <[hidden email]> wrote:

> Hi Kurt,
>
> We do have a tutorial on rounded corners using Jquery. Do you want access to
> work this into the existing tutorial? If it's different from what's there,
> I'm open to a new section.
>
> http://plone.org/documentation/tutorial/rounded-corners-in-css/rounding-corn
> ers-using-jquery
>
> Thanks,
>
> - Veda
>
>
> On 9/16/09 7:23 AM, "Kurt Bendl" <[hidden email]> wrote:
>
>> Hi guys,
>>
>> I needed rounded corners and wrote-up what I did to get there. Maybe it
>> can help someone else.
>>
>> Could someone please take a look at this and let me know if you want it
>> for a tip on Plone.org? If so, I can flesh it out and add some screen shots.
>>
>> Best,
>>
>>    -Kurt
>>
>>
>>
>>
>> Rounded CSS corners in Plone with *jquery.corner.js*
>> =======================================================
>>
>> In the following, we'll start with a really basic Plone theme based on
>> Plone Default, give it a border, and add nice rounded corners. The whole
>> exercise should take about 15 minutes.
>>
>> Background
>> I had a graphic artist drop a design in my lap. The design was all "Web
>> 2.0"-ish I was told, and had those rounded corners that are so "hot"
>> these days. I'd hacked various rounded corner things together in the
>> past and wasn't looking forward to it. I looked around and found a few
>> interesting options that let me use JQuery to make rounded corners. It
>> all seemed too much work. Then I asked Rob Porter at WebLion who showed
>> me some curvy corner stuff. It was cool, but for some reason was
>> blowing-up in my theme. However, Rob gave me enough of a clue to know
>> better what I 'did' want, and after a bit of searching I found it on the
>> "jquery corner demo page" maintained by Mike Alsup at
>> http://jquery.malsup.com/corner/ and in the *jquery.corner.js* code
>> originally written by Dave Methvin and currently maintained by Mike
>> Alsup that was being used on the demo.
>>
>> This just worked for me. Just to note: I am not a JQuery or JavaScript
>> expert. I just needed to get this one thing done, and this is how I did
>> it. Your mileage may vary.
>>
>> Here is an example of what I did, and hopefully enough info to prove if
>> it works for you.
>>
>> Assumptions:
>> You can create a buildout-based Plone
>> You can create a theme
>> You can add it to your buildout
>>
>> I'm doing this in Plone 3.3. It may or may not work in earlier versions
>> of Plone (depending upon versions of JQuery, etc.).
>>
>>
>> Rounded corners in Plone - Steps for the impatient
>> -------------------------------------------------------
>>
>> Get *jquery.corner.js* and put it in your theme's skins folder
>>
>> Make a *jquery.corner.config.js* file in your theme's skins folder with
>> the following content:
>>
>>
>> Add the following lines in your CSS to help prove that it works:
>>
>>
>> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
>> *jsregistry.xml* file.
>>
>> Install or re-install your theme or use generic setup to re-import your
>> theme's profile
>>
>> Reload your demo and be amazed at the hot round corner action.
>>
>>
>>
>> Rounded Corners in Plone - More detailed example docs
>> -------------------------------------------------------
>> Make a plone3_theme
>> In this example, we'll use paster to create a new theme and call it
>> *theme.corner* (original, I know.)
>> In your buildout's *./src/* folder, type this:
>>
>>      paster create -t plone3_theme theme.corner
>>
>> Make sure you add *theme.corner* to your buildout's eggs, develop, and
>> zcml. The buildout and instance sections of your buildout will look
>> something like this:
>>
>>      [buildout]
>>      extends = versions.cfg
>>      versions = versions
>>
>>      parts =
>>          PIL
>>          paster
>>          zope2
>>          productdistros
>>          instance
>>          zeoserver
>>
>>      eggs =
>>          PIL
>>          theme.corner
>>
>>      develop =
>>          src/theme.corner
>>
>>      [instance]
>>      recipe = plone.recipe.zope2instance
>>      zope2-location = ${zope2:location}
>>      zeo-client = True
>>
>>      eggs =
>>          Plone
>>          ${buildout:eggs}
>>
>>      zcml =
>>          theme.corner
>>
>>      products =
>>          ${buildout:directory}/products
>>          ${productdistros:location}
>>
>>
>> Get *jquery.corner.js*
>> -------------------------
>> Get a copy of *jquery.corner.js* and put it in your theme's *skins* folder.
>> You can download it from the demo page http://jquery.malsup.com/corner/.
>> The plone3_theme paster template does not include a scripts or js folder
>> for adding extra javascripts, etc. So in your proof of concept theme you
>> can just drop it into your
>> `buildout_dir/src/theme.corner/theme/corner/skins/theme_corner_templates/`
>> folder.
>>
>>
>> Make a config file: jquery.corner.config.js
>> ------------------------------------------------
>> Make a *jquery.corner.config.js* file and put it in the
>> *./skins/theme_corner_templates/* folder with the *jquery.corner.js*
>> file. The config file for this example will contain the following content:
>>
>>      jq(function(){
>>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>>      });
>>
>>
>> Add some CSS
>> ------------------------------------------------
>> To add a border around the site using the #visual-portal-wrapper to help
>> prove that the rounded corner code works, add the following lines in
>> your theme's CSS (I register a new CSS file in my themes, but if you're
>> starting with a default paster plone3_theme, you can put the following
>> in *./browser/main.css*):
>>
>>      body {
>>        padding: 40px;
>>      }
>>
>>      #visual-portal-wrapper {
>>        border: 4px solid #888888;
>>      }
>>
>>
>>
>> Add jquery.corner stuff to jsregistry.xml
>> ------------------------------------------------
>> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
>> *jsregistry.xml* file. The file may be found (or should be created) in
>> *theme.corner/theme/corner/profiles/default/jsregistry.xml* and should
>> look something similar to the following:
>>
>>      <?xml version="1.0"?>
>>      <object name="portal_javascripts">
>>       <javascript cacheable="True" compression="safe" cookable="True"
>>          enabled="True" expression="" id="jquery.corner.js"
>>          inline="False"/>
>>       <javascript cacheable="True" compression="safe" cookable="True"
>>          enabled="True" expression="" id="jquery.corner.config.js"
>>          inline="False"/>
>>      </object>
>>
>>
>>
>> Run buildout
>> ------------------------------------------------
>> Re-run your buildout to make sure your new theme.corner is available to
>> be installed.
>>
>>
>> Install the theme
>> ------------------------------------------------
>> Install or re-install the ThemeCorner theme or use generic setup to
>> import the stuff defined in the *jsregistry.xml* file.
>>
>> To use generic setup, go to your plonesite -> portal_setup -> Import
>> tab, then under *Select Profile or Snapshot* select your ThemeCorner.
>> Scroll down a bit, and look for and click on the *Import All Steps* button.
>>
>>
>> Be amazed!
>> ------------------------------------------------
>> Reload your demo plone site and be amazed at the hot round corner action.
>>
>>
>>
>> More rounded corners in Plone
>> ------------------------------------------------
>> *jquery.round.js* lets you set a corner effect type, which corners to
>> curve, and how big a curve to make. should be able to put a curve on
>> almost any div or class block you have. Just add another line to your
>> *jquery.corner.config.js* file. For example, put curvy corners on the
>> .contentViews tabs for logged-in users, simply add another line:
>>
>>      jq(function(){
>>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>>        jq('.contentViews li a').corner("round top 6px");
>>      });
>>
>> Notice on the second line we defined the corner effect type as
>> **round**, told it to only manipulate the *top* corners, and do it with
>> a *6px* corner.
>>
>> At a minimum, all you need to get rounded corners is:
>>
>>      jq('#visual-portal-wrapper').corner();
>>
>> *jquery.round.js* will round all four corners by default with a 10px
>> radius width. Personally, I like to be explicit. But I'd probably be
>> okay with defining the portal wrapper this way:
>>      *jq('#visual-portal-wrapper').corner("20px");*.
>>
>> The options for what corners to effect are top, bottom, tr, tl, br, and
>> bl. And, the width must be defiled in pixels.
>>
>>
>> Acknowledgments
>> ---------------------
>> Thanks to Rob Porter at WebLion who got me on the right path, and Mike
>> Alsup and Dave Methvin for writing and maintaining the *jquery.round.js*
>> code that helped make my life a little easier.
>>
>> ------------------------------------------------------------------------------
>> Come build with us! The BlackBerry® Developer Conference in SF, CA
>> is the only developer event you need to attend this year. Jumpstart your
>> developing skills, take BlackBerry mobile applications to market and stay
>> ahead of the curve. Join us from November 9-12, 2009. Register now!
>> http://p.sf.net/sfu/devconf
>> _______________________________________________
>> Plone-docs mailing list
>> [hidden email]
>> https://lists.sourceforge.net/lists/listinfo/plone-docs
>
>

------------------------------------------------------------------------------
Come build with us! The BlackBerry® Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9-12, 2009. Register now!
http://p.sf.net/sfu/devconf
_______________________________________________
Plone-docs mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-docs
vedaw () Re: Fwd: Rounded CSS corners in Plone with *jquery.corner.js*
Reply Threaded More More options
Print post
Permalink
Ha. I'm hearing myself thinking, "Gosh, I can't wait until we flip the
switch on the Knowledgebase". I think this would make a great community
contribution, but not something I'd necessarily want to keep in the core
docs...

If you have it written up (in something other than email format), we can
probably publish it and mark it as one of those items that will land in the
community section very soon.

How would that sound to you?

Cheers,

- Veda


On 9/18/09 4:04 PM, "Kurt Bendl" <[hidden email]> wrote:

> Hi Veda (and everyone else),
>
> Gawd.... I feel so... exposed. :-)
>
> Well, there's more than one way to skin a cat... er... theme
> a Plone site.  :-)   It's a different approach, using a different
> JQuery module (although the modules have nearly the same
> name) with many more (and more easily configurable) options,
> and most of all it does not require editing each and every one
> of your .pt files to use (as does the referenced document.) It's
> really a much cleaner option.
>
> This would be *another* option. I think the confusion is that
> both options use jquery and end up with rounded corners. And,
> since there's not "One True Way"(tm)  to do rounded corners
> in  Plone 3.x themes, I think it's another valid option.
>
> I know there are other ways to get rounded corners into a
> Plone theme. I've done it differently myself using different
> techniques than these. Possibly there could be a "Rounded
> corners in a Plone 3.x theme" reference page, with these
> two (and any others that may be contributed or linked to)
> as options.
>
> Just my $0.02.  :-)
>
>
> xoxoxox,
>
>       Kurt
>
>
> On Fri, Sep 18, 2009 at 2:31 PM, Veda Williams <[hidden email]> wrote:
>> Hi Kurt,
>>
>> We do have a tutorial on rounded corners using Jquery. Do you want access to
>> work this into the existing tutorial? If it's different from what's there,
>> I'm open to a new section.
>>
>> http://plone.org/documentation/tutorial/rounded-corners-in-css/rounding-corn
>> ers-using-jquery
>>
>> Thanks,
>>
>> - Veda
>>
>>
>> On 9/16/09 7:23 AM, "Kurt Bendl" <[hidden email]> wrote:
>>
>>> Hi guys,
>>>
>>> I needed rounded corners and wrote-up what I did to get there. Maybe it
>>> can help someone else.
>>>
>>> Could someone please take a look at this and let me know if you want it
>>> for a tip on Plone.org? If so, I can flesh it out and add some screen shots.
>>>
>>> Best,
>>>
>>>    -Kurt
>>>
>>>
>>>
>>>
>>> Rounded CSS corners in Plone with *jquery.corner.js*
>>> =======================================================
>>>
>>> In the following, we'll start with a really basic Plone theme based on
>>> Plone Default, give it a border, and add nice rounded corners. The whole
>>> exercise should take about 15 minutes.
>>>
>>> Background
>>> I had a graphic artist drop a design in my lap. The design was all "Web
>>> 2.0"-ish I was told, and had those rounded corners that are so "hot"
>>> these days. I'd hacked various rounded corner things together in the
>>> past and wasn't looking forward to it. I looked around and found a few
>>> interesting options that let me use JQuery to make rounded corners. It
>>> all seemed too much work. Then I asked Rob Porter at WebLion who showed
>>> me some curvy corner stuff. It was cool, but for some reason was
>>> blowing-up in my theme. However, Rob gave me enough of a clue to know
>>> better what I 'did' want, and after a bit of searching I found it on the
>>> "jquery corner demo page" maintained by Mike Alsup at
>>> http://jquery.malsup.com/corner/ and in the *jquery.corner.js* code
>>> originally written by Dave Methvin and currently maintained by Mike
>>> Alsup that was being used on the demo.
>>>
>>> This just worked for me. Just to note: I am not a JQuery or JavaScript
>>> expert. I just needed to get this one thing done, and this is how I did
>>> it. Your mileage may vary.
>>>
>>> Here is an example of what I did, and hopefully enough info to prove if
>>> it works for you.
>>>
>>> Assumptions:
>>> You can create a buildout-based Plone
>>> You can create a theme
>>> You can add it to your buildout
>>>
>>> I'm doing this in Plone 3.3. It may or may not work in earlier versions
>>> of Plone (depending upon versions of JQuery, etc.).
>>>
>>>
>>> Rounded corners in Plone - Steps for the impatient
>>> -------------------------------------------------------
>>>
>>> Get *jquery.corner.js* and put it in your theme's skins folder
>>>
>>> Make a *jquery.corner.config.js* file in your theme's skins folder with
>>> the following content:
>>>
>>>
>>> Add the following lines in your CSS to help prove that it works:
>>>
>>>
>>> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
>>> *jsregistry.xml* file.
>>>
>>> Install or re-install your theme or use generic setup to re-import your
>>> theme's profile
>>>
>>> Reload your demo and be amazed at the hot round corner action.
>>>
>>>
>>>
>>> Rounded Corners in Plone - More detailed example docs
>>> -------------------------------------------------------
>>> Make a plone3_theme
>>> In this example, we'll use paster to create a new theme and call it
>>> *theme.corner* (original, I know.)
>>> In your buildout's *./src/* folder, type this:
>>>
>>>      paster create -t plone3_theme theme.corner
>>>
>>> Make sure you add *theme.corner* to your buildout's eggs, develop, and
>>> zcml. The buildout and instance sections of your buildout will look
>>> something like this:
>>>
>>>      [buildout]
>>>      extends = versions.cfg
>>>      versions = versions
>>>
>>>      parts =
>>>          PIL
>>>          paster
>>>          zope2
>>>          productdistros
>>>          instance
>>>          zeoserver
>>>
>>>      eggs =
>>>          PIL
>>>          theme.corner
>>>
>>>      develop =
>>>          src/theme.corner
>>>
>>>      [instance]
>>>      recipe = plone.recipe.zope2instance
>>>      zope2-location = ${zope2:location}
>>>      zeo-client = True
>>>
>>>      eggs =
>>>          Plone
>>>          ${buildout:eggs}
>>>
>>>      zcml =
>>>          theme.corner
>>>
>>>      products =
>>>          ${buildout:directory}/products
>>>          ${productdistros:location}
>>>
>>>
>>> Get *jquery.corner.js*
>>> -------------------------
>>> Get a copy of *jquery.corner.js* and put it in your theme's *skins* folder.
>>> You can download it from the demo page http://jquery.malsup.com/corner/.
>>> The plone3_theme paster template does not include a scripts or js folder
>>> for adding extra javascripts, etc. So in your proof of concept theme you
>>> can just drop it into your
>>> `buildout_dir/src/theme.corner/theme/corner/skins/theme_corner_templates/`
>>> folder.
>>>
>>>
>>> Make a config file: jquery.corner.config.js
>>> ------------------------------------------------
>>> Make a *jquery.corner.config.js* file and put it in the
>>> *./skins/theme_corner_templates/* folder with the *jquery.corner.js*
>>> file. The config file for this example will contain the following content:
>>>
>>>      jq(function(){
>>>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>>>      });
>>>
>>>
>>> Add some CSS
>>> ------------------------------------------------
>>> To add a border around the site using the #visual-portal-wrapper to help
>>> prove that the rounded corner code works, add the following lines in
>>> your theme's CSS (I register a new CSS file in my themes, but if you're
>>> starting with a default paster plone3_theme, you can put the following
>>> in *./browser/main.css*):
>>>
>>>      body {
>>>        padding: 40px;
>>>      }
>>>
>>>      #visual-portal-wrapper {
>>>        border: 4px solid #888888;
>>>      }
>>>
>>>
>>>
>>> Add jquery.corner stuff to jsregistry.xml
>>> ------------------------------------------------
>>> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
>>> *jsregistry.xml* file. The file may be found (or should be created) in
>>> *theme.corner/theme/corner/profiles/default/jsregistry.xml* and should
>>> look something similar to the following:
>>>
>>>      <?xml version="1.0"?>
>>>      <object name="portal_javascripts">
>>>       <javascript cacheable="True" compression="safe" cookable="True"
>>>          enabled="True" expression="" id="jquery.corner.js"
>>>          inline="False"/>
>>>       <javascript cacheable="True" compression="safe" cookable="True"
>>>          enabled="True" expression="" id="jquery.corner.config.js"
>>>          inline="False"/>
>>>      </object>
>>>
>>>
>>>
>>> Run buildout
>>> ------------------------------------------------
>>> Re-run your buildout to make sure your new theme.corner is available to
>>> be installed.
>>>
>>>
>>> Install the theme
>>> ------------------------------------------------
>>> Install or re-install the ThemeCorner theme or use generic setup to
>>> import the stuff defined in the *jsregistry.xml* file.
>>>
>>> To use generic setup, go to your plonesite -> portal_setup -> Import
>>> tab, then under *Select Profile or Snapshot* select your ThemeCorner.
>>> Scroll down a bit, and look for and click on the *Import All Steps* button.
>>>
>>>
>>> Be amazed!
>>> ------------------------------------------------
>>> Reload your demo plone site and be amazed at the hot round corner action.
>>>
>>>
>>>
>>> More rounded corners in Plone
>>> ------------------------------------------------
>>> *jquery.round.js* lets you set a corner effect type, which corners to
>>> curve, and how big a curve to make. should be able to put a curve on
>>> almost any div or class block you have. Just add another line to your
>>> *jquery.corner.config.js* file. For example, put curvy corners on the
>>> .contentViews tabs for logged-in users, simply add another line:
>>>
>>>      jq(function(){
>>>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>>>        jq('.contentViews li a').corner("round top 6px");
>>>      });
>>>
>>> Notice on the second line we defined the corner effect type as
>>> **round**, told it to only manipulate the *top* corners, and do it with
>>> a *6px* corner.
>>>
>>> At a minimum, all you need to get rounded corners is:
>>>
>>>      jq('#visual-portal-wrapper').corner();
>>>
>>> *jquery.round.js* will round all four corners by default with a 10px
>>> radius width. Personally, I like to be explicit. But I'd probably be
>>> okay with defining the portal wrapper this way:
>>>      *jq('#visual-portal-wrapper').corner("20px");*.
>>>
>>> The options for what corners to effect are top, bottom, tr, tl, br, and
>>> bl. And, the width must be defiled in pixels.
>>>
>>>
>>> Acknowledgments
>>> ---------------------
>>> Thanks to Rob Porter at WebLion who got me on the right path, and Mike
>>> Alsup and Dave Methvin for writing and maintaining the *jquery.round.js*
>>> code that helped make my life a little easier.
>>>
>>> ----------------------------------------------------------------------------
>>> --
>>> Come build with us! The BlackBerry® Developer Conference in SF, CA
>>> is the only developer event you need to attend this year. Jumpstart your
>>> developing skills, take BlackBerry mobile applications to market and stay
>>> ahead of the curve. Join us from November 9-12, 2009. Register now!
>>> http://p.sf.net/sfu/devconf
>>> _______________________________________________
>>> Plone-docs mailing list
>>> [hidden email]
>>> https://lists.sourceforge.net/lists/listinfo/plone-docs
>>
>>


------------------------------------------------------------------------------
Come build with us! The BlackBerry® Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9-12, 2009. Register now!
http://p.sf.net/sfu/devconf
_______________________________________________
Plone-docs mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-docs
aclark () Re: Fwd: Rounded CSS corners in Plone with *jquery.corner.js*
Reply Threaded More More options
Print post
Permalink
I am now intrigued at not having to edit all my .pt files to get rounded cornders ;-)

On 2009-09-18, Veda Williams <[hidden email]> wrote:

> Ha. I'm hearing myself thinking, "Gosh, I can't wait until we flip the
> switch on the Knowledgebase". I think this would make a great community
> contribution, but not something I'd necessarily want to keep in the core
> docs...
>
> If you have it written up (in something other than email format), we can
> probably publish it and mark it as one of those items that will land in the
> community section very soon.
>
> How would that sound to you?
>
> Cheers,
>
> - Veda
>
>
> On 9/18/09 4:04 PM, "Kurt Bendl" <[hidden email]> wrote:
>
>> Hi Veda (and everyone else),
>>
>> Gawd.... I feel so... exposed. :-)
>>
>> Well, there's more than one way to skin a cat... er... theme
>> a Plone site.  :-)   It's a different approach, using a different
>> JQuery module (although the modules have nearly the same
>> name) with many more (and more easily configurable) options,
>> and most of all it does not require editing each and every one
>> of your .pt files to use (as does the referenced document.) It's
>> really a much cleaner option.
>>
>> This would be *another* option. I think the confusion is that
>> both options use jquery and end up with rounded corners. And,
>> since there's not "One True Way"(tm)  to do rounded corners
>> in  Plone 3.x themes, I think it's another valid option.
>>
>> I know there are other ways to get rounded corners into a
>> Plone theme. I've done it differently myself using different
>> techniques than these. Possibly there could be a "Rounded
>> corners in a Plone 3.x theme" reference page, with these
>> two (and any others that may be contributed or linked to)
>> as options.
>>
>> Just my $0.02.  :-)
>>
>>
>> xoxoxox,
>>
>>       Kurt
>>
>>
>> On Fri, Sep 18, 2009 at 2:31 PM, Veda Williams <[hidden email]> wrote:
>>> Hi Kurt,
>>>
>>> We do have a tutorial on rounded corners using Jquery. Do you want access to
>>> work this into the existing tutorial? If it's different from what's there,
>>> I'm open to a new section.
>>>
>>> http://plone.org/documentation/tutorial/rounded-corners-in-css/rounding-corn
>>> ers-using-jquery
>>>
>>> Thanks,
>>>
>>> - Veda
>>>
>>>
>>> On 9/16/09 7:23 AM, "Kurt Bendl" <[hidden email]> wrote:
>>>
>>>> Hi guys,
>>>>
>>>> I needed rounded corners and wrote-up what I did to get there. Maybe it
>>>> can help someone else.
>>>>
>>>> Could someone please take a look at this and let me know if you want it
>>>> for a tip on Plone.org? If so, I can flesh it out and add some screen shots.
>>>>
>>>> Best,
>>>>
>>>>    -Kurt
>>>>
>>>>
>>>>
>>>>
>>>> Rounded CSS corners in Plone with *jquery.corner.js*
>>>> =======================================================
>>>>
>>>> In the following, we'll start with a really basic Plone theme based on
>>>> Plone Default, give it a border, and add nice rounded corners. The whole
>>>> exercise should take about 15 minutes.
>>>>
>>>> Background
>>>> I had a graphic artist drop a design in my lap. The design was all "Web
>>>> 2.0"-ish I was told, and had those rounded corners that are so "hot"
>>>> these days. I'd hacked various rounded corner things together in the
>>>> past and wasn't looking forward to it. I looked around and found a few
>>>> interesting options that let me use JQuery to make rounded corners. It
>>>> all seemed too much work. Then I asked Rob Porter at WebLion who showed
>>>> me some curvy corner stuff. It was cool, but for some reason was
>>>> blowing-up in my theme. However, Rob gave me enough of a clue to know
>>>> better what I 'did' want, and after a bit of searching I found it on the
>>>> "jquery corner demo page" maintained by Mike Alsup at
>>>> http://jquery.malsup.com/corner/ and in the *jquery.corner.js* code
>>>> originally written by Dave Methvin and currently maintained by Mike
>>>> Alsup that was being used on the demo.
>>>>
>>>> This just worked for me. Just to note: I am not a JQuery or JavaScript
>>>> expert. I just needed to get this one thing done, and this is how I did
>>>> it. Your mileage may vary.
>>>>
>>>> Here is an example of what I did, and hopefully enough info to prove if
>>>> it works for you.
>>>>
>>>> Assumptions:
>>>> You can create a buildout-based Plone
>>>> You can create a theme
>>>> You can add it to your buildout
>>>>
>>>> I'm doing this in Plone 3.3. It may or may not work in earlier versions
>>>> of Plone (depending upon versions of JQuery, etc.).
>>>>
>>>>
>>>> Rounded corners in Plone - Steps for the impatient
>>>> -------------------------------------------------------
>>>>
>>>> Get *jquery.corner.js* and put it in your theme's skins folder
>>>>
>>>> Make a *jquery.corner.config.js* file in your theme's skins folder with
>>>> the following content:
>>>>
>>>>
>>>> Add the following lines in your CSS to help prove that it works:
>>>>
>>>>
>>>> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
>>>> *jsregistry.xml* file.
>>>>
>>>> Install or re-install your theme or use generic setup to re-import your
>>>> theme's profile
>>>>
>>>> Reload your demo and be amazed at the hot round corner action.
>>>>
>>>>
>>>>
>>>> Rounded Corners in Plone - More detailed example docs
>>>> -------------------------------------------------------
>>>> Make a plone3_theme
>>>> In this example, we'll use paster to create a new theme and call it
>>>> *theme.corner* (original, I know.)
>>>> In your buildout's *./src/* folder, type this:
>>>>
>>>>      paster create -t plone3_theme theme.corner
>>>>
>>>> Make sure you add *theme.corner* to your buildout's eggs, develop, and
>>>> zcml. The buildout and instance sections of your buildout will look
>>>> something like this:
>>>>
>>>>      [buildout]
>>>>      extends = versions.cfg
>>>>      versions = versions
>>>>
>>>>      parts =
>>>>          PIL
>>>>          paster
>>>>          zope2
>>>>          productdistros
>>>>          instance
>>>>          zeoserver
>>>>
>>>>      eggs =
>>>>          PIL
>>>>          theme.corner
>>>>
>>>>      develop =
>>>>          src/theme.corner
>>>>
>>>>      [instance]
>>>>      recipe = plone.recipe.zope2instance
>>>>      zope2-location = ${zope2:location}
>>>>      zeo-client = True
>>>>
>>>>      eggs =
>>>>          Plone
>>>>          ${buildout:eggs}
>>>>
>>>>      zcml =
>>>>          theme.corner
>>>>
>>>>      products =
>>>>          ${buildout:directory}/products
>>>>          ${productdistros:location}
>>>>
>>>>
>>>> Get *jquery.corner.js*
>>>> -------------------------
>>>> Get a copy of *jquery.corner.js* and put it in your theme's *skins* folder.
>>>> You can download it from the demo page http://jquery.malsup.com/corner/.
>>>> The plone3_theme paster template does not include a scripts or js folder
>>>> for adding extra javascripts, etc. So in your proof of concept theme you
>>>> can just drop it into your
>>>> `buildout_dir/src/theme.corner/theme/corner/skins/theme_corner_templates/`
>>>> folder.
>>>>
>>>>
>>>> Make a config file: jquery.corner.config.js
>>>> ------------------------------------------------
>>>> Make a *jquery.corner.config.js* file and put it in the
>>>> *./skins/theme_corner_templates/* folder with the *jquery.corner.js*
>>>> file. The config file for this example will contain the following content:
>>>>
>>>>      jq(function(){
>>>>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>>>>      });
>>>>
>>>>
>>>> Add some CSS
>>>> ------------------------------------------------
>>>> To add a border around the site using the #visual-portal-wrapper to help
>>>> prove that the rounded corner code works, add the following lines in
>>>> your theme's CSS (I register a new CSS file in my themes, but if you're
>>>> starting with a default paster plone3_theme, you can put the following
>>>> in *./browser/main.css*):
>>>>
>>>>      body {
>>>>        padding: 40px;
>>>>      }
>>>>
>>>>      #visual-portal-wrapper {
>>>>        border: 4px solid #888888;
>>>>      }
>>>>
>>>>
>>>>
>>>> Add jquery.corner stuff to jsregistry.xml
>>>> ------------------------------------------------
>>>> Add *jquery.corner.js* and *jquery.corner.config.js* to your theme's
>>>> *jsregistry.xml* file. The file may be found (or should be created) in
>>>> *theme.corner/theme/corner/profiles/default/jsregistry.xml* and should
>>>> look something similar to the following:
>>>>
>>>>      <?xml version="1.0"?>
>>>>      <object name="portal_javascripts">
>>>>       <javascript cacheable="True" compression="safe" cookable="True"
>>>>          enabled="True" expression="" id="jquery.corner.js"
>>>>          inline="False"/>
>>>>       <javascript cacheable="True" compression="safe" cookable="True"
>>>>          enabled="True" expression="" id="jquery.corner.config.js"
>>>>          inline="False"/>
>>>>      </object>
>>>>
>>>>
>>>>
>>>> Run buildout
>>>> ------------------------------------------------
>>>> Re-run your buildout to make sure your new theme.corner is available to
>>>> be installed.
>>>>
>>>>
>>>> Install the theme
>>>> ------------------------------------------------
>>>> Install or re-install the ThemeCorner theme or use generic setup to
>>>> import the stuff defined in the *jsregistry.xml* file.
>>>>
>>>> To use generic setup, go to your plonesite -> portal_setup -> Import
>>>> tab, then under *Select Profile or Snapshot* select your ThemeCorner.
>>>> Scroll down a bit, and look for and click on the *Import All Steps* button.
>>>>
>>>>
>>>> Be amazed!
>>>> ------------------------------------------------
>>>> Reload your demo plone site and be amazed at the hot round corner action.
>>>>
>>>>
>>>>
>>>> More rounded corners in Plone
>>>> ------------------------------------------------
>>>> *jquery.round.js* lets you set a corner effect type, which corners to
>>>> curve, and how big a curve to make. should be able to put a curve on
>>>> almost any div or class block you have. Just add another line to your
>>>> *jquery.corner.config.js* file. For example, put curvy corners on the
>>>> .contentViews tabs for logged-in users, simply add another line:
>>>>
>>>>      jq(function(){
>>>>        jq('#visual-portal-wrapper').corner("round tl tr bl br 20px");
>>>>        jq('.contentViews li a').corner("round top 6px");
>>>>      });
>>>>
>>>> Notice on the second line we defined the corner effect type as
>>>> **round**, told it to only manipulate the *top* corners, and do it with
>>>> a *6px* corner.
>>>>
>>>> At a minimum, all you need to get rounded corners is:
>>>>
>>>>      jq('#visual-portal-wrapper').corner();
>>>>
>>>> *jquery.round.js* will round all four corners by default with a 10px
>>>> radius width. Personally, I like to be explicit. But I'd probably be
>>>> okay with defining the portal wrapper this way:
>>>>      *jq('#visual-portal-wrapper').corner("20px");*.
>>>>
>>>> The options for what corners to effect are top, bottom, tr, tl, br, and
>>>> bl. And, the width must be defiled in pixels.
>>>>
>>>>
>>>> Acknowledgments
>>>> ---------------------
>>>> Thanks to Rob Porter at WebLion who got me on the right path, and Mike
>>>> Alsup and Dave Methvin for writing and maintaining the *jquery.round.js*
>>>> code that helped make my life a little easier.
>>>>
>>>> ----------------------------------------------------------------------------
>>>> --
>>>> Come build with us! The BlackBerry® Developer Conference in SF, CA
>>>> is the only developer event you need to attend this year. Jumpstart your
>>>> developing skills, take BlackBerry mobile applications to market and stay
>>>> ahead of the curve. Join us from November 9-12, 2009. Register now!
>>>> http://p.sf.net/sfu/devconf
>>>> _______________________________________________
>>>> Plone-docs mailing list
>>>> [hidden email]
>>>> https://lists.sourceforge.net/lists/listinfo/plone-docs
>>>
>>>
>
>
> ------------------------------------------------------------------------------
> Come build with us! The BlackBerry® Developer Conference in SF, CA
> is the only developer event you need to attend this year. Jumpstart your
> developing skills, take BlackBerry mobile applications to market and stay
> ahead of the curve. Join us from November 9-12, 2009. Register now!
> http://p.sf.net/sfu/devconf


--
Alex Clark · http://aclark.net
Buy Practical Plone 3: http://tinyurl.com/practical-plone


------------------------------------------------------------------------------
Come build with us! The BlackBerry® Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9-12, 2009. Register now!
http://p.sf.net/sfu/devconf
_______________________________________________
Plone-docs mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/plone-docs