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

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" <[email protected]> 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&reg; 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&#45;12, 2009. Register now&#33;
> http://p.sf.net/sfu/devconf
> _______________________________________________
> Plone-docs mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/plone-docs


------------------------------------------------------------------------------
Come build with us! The BlackBerry&reg; 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&#45;12, 2009. Register now&#33;
http://p.sf.net/sfu/devconf