Re: 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]> |
Well, if you want to include my ramblings anywhere I have a tweak or two that I've made. Just lemme know and I'll send it to you. :-) -kb Kurt -- http://tool.net (Thumbed madly on my phone, just for you!) On Nov 25, 2009, at 2:57 PM, "Veda Williams" <[email protected]> wrote: > Ha, my memory is so short. > > > On 9/18/09 3:04 PM, "Kurt Bendl" <[email protected]> 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 <veda-PRw/[email protected]> >> 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" <[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® 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 >>>> [email protected] >>>> https://lists.sourceforge.net/lists/listinfo/plone-docs >>> >>> > > > -- > Veda Williams > Web Developer > Groundwire > 206.286.1235x23 > [email protected] > http://groundwire.org > > ONE/Northwest is now Groundwire! ------------------------------------------------------------------------------ Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day trial. Simplify your report design, integration and deployment - and focus on what you do best, core application coding. Discover what's new with Crystal Reports now. http://p.sf.net/sfu/bobj-july