|
|
|
|
Kurt Bendl
()
|
|
||||||||||||
|
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
()
|
|
||||||||||||
|
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
()
|
|
||||||||||||
|
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
()
|
|
||||||||||||
|
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
()
|
|
||||||||||||
|
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
()
|
|
||||||||||||
|
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 |
||||||||||||||
| Free Embeddable Forum Powered by Nabble | Help |