Fwd: Rounded CSS corners in Plone with *jquery.corner.js*
Kurt Bendl <[email protected]>
| Newsgroups | gmane.comp.web.zope.plone.documentation |
|---|---|
| Message-ID | <[email protected]> |
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