Tags: view all tags

How-to: Rounded corners to QuickMenuSkin

This is a comprehensive guide for adding rounded corners to almost any css-element in QuickMenuSkin, using Nifty Corners Cube. Quote from the website: "Basically, Nifty Corners are a solution based on CSS and Javascript to get rounded corners without images." Rounded corners will be created by the help of javascript, and will not slow down the actual page loading because we will delay the rounding of elements until the page is loaded, using the TWiki addLoadEvent.

Installation

Follow the link to the Nifty Corners Cube website, and download the NCC package. Extract the files to a temporary folder and edit the file "niftycube.js" using a text editor. Remove the line that includes the URL to the css file (l.setAttribute("href","http://.../niftyCorners.css"); and save it.

Create a page called "RoundedCorners" in to any web, lets use "Main" for example. Attach all of the extracted files to this topic normally.
Edit your twiki.quickmenuskin.tmpl (in twiki/templates folder)
1. Add the following definition inside TMPL:DEF{"templatescript"} (using your attachment web/topic names):
```
<script type="text/javascript" src="%PUBURLPATH%/%MAINWEB%/RoundedCorners/niftycube.js"></script>
```
  Add also the location of the css file inside TMPL:DEF{"twikistyle"}, after the other definitions beginning with @import url(.... Again, dont forget to change the web/topic name. The line to insert is @import url('%PUBURLPATH%/%MAINWEB%/RoundedCorners/niftyCorners.css');
2. Add the following definition inside TMPL:DEF{"standardheader"} tags, after the line "addLoadEvent(QuickMenuInit, false);"
```
function NiftyCubeInit() {
Nifty("H2");
Nifty("div.twikiAttachments");
}
addLoadEvent(NiftyCubeInit);
```
  (You can add your preferred to-be-rounded element here later, lets go with these first to ensure we have a working setup)
3. Save your template, load a page with attachments, and see if the page has a rounded attachments element and rounded 2. level headings
Open the style.css file from twiki/pub/TWiki/QuickMenuSkin folder
1. Decide what elements you want to see rounded from this file, it is easier if you use Firefox with Firebug-addon. With Firebug, click "inspect" twice and hover your mouse over any element in your page, it will find the name of that particular element.
2. In twiki.quickmenuskin.tmpl, add the elements to the list (after function NiftyCubeInit() {) as displayed in the example above
3. For extra options (round top, round bottom, transparency, etc) see Nifty Corners Cube website

Troubleshooting

Nifty Corners Cube does not support IE 5.0 and earlier, the users will see simply squared corners
If you get "leftover borders", try increasing element font size to 100% and add some padding (0.5em for example)

Examples

Try these:

function NiftyCubeInit() {
Nifty("div.MenuBar","small transparent bottom");
Nifty("div.TopicAction");
Nifty("div.twikiAttachments","big");
}

Feedback/ ideas

-- MikkoLaakso - 11 Mar 2007

Having the styles applied at onload will cause these element to stay unstyled for quite some time during loading of the page. And long TWiki pages will take long to load, 10 seconds is not unusual.

-- ArthurClemens - 12 Mar 2007

Its true if the page has lots of images. For smaller pages with only a few images, I think it is not a problem to wait ½ seconds for styling.

-- MikkoLaakso - 12 Mar 2007

The problem was significant for TwistyPlugin when twisties were opened/closed at onload time.

-- ArthurClemens - 12 Mar 2007

Profiling results for Nifty Corners Cube

Here we have a moderately large page (document with 7 chapters) with large images. Rounded elements amount to seven 1-level headings, menu, attachments and action element. Even a single image takes longer to load. Total page loading time is 3.28 seconds Actually, the profiling above doesnt show the script "niftycube.js", but I checked and it took 118ms to load, so its fast. The css-file takes longer. UPDATE: The css-file load time will reduce to ~31ms if including the css file with @import in TMPL:DEF{"twikistyle"}. Updated the docs.

Of course, if there is any better solutions, great :). That´s one of the reasons I´m posting here.

-- MikkoLaakso - 13 Mar 2007

I am talking about seeing the effect applied on the page as the page loads. Because onload will be called after all elements have been loaded, you will see unstyled elements first before they are rounded.

-- ArthurClemens - 13 Mar 2007

Excuse me, I was too concerned with the performance :). It would be good to provide both alternatives. But it seems that niftycube.js needs to wait until the page is loaded, to correctly round corners. So I guess the only thing left to do is to delay the display of the page. I´ll do some research...

-- MikkoLaakso - 14 Mar 2007

This could be achieved with a script that sets all the css-elements invisible at the start, and then visible at the end. But is this really a good solution, if you think about a page that loads 8 seconds, you could normally start seeing the text contents in ~4s, now you would need to wait for the (possible) large images to load etc. Normally the rounding operation is so fast that with small pages like this one here, nobody would even notice the operation.

-- MikkoLaakso - 15 Mar 2007

The rounding does not work properly with elements that have inline style and class element (applies to all browsers other than Firefox). Examples are div.topicAction and div.topicAttachments.

-- MikkoLaakso - 04 Apr 2007

oh, bugger. Sorry, I keep forgetting to add SnazzyRoundedCornersContrib - a CSS only rounded corner mini-TWikiApp

%!INCLUDE{
"Plugins.SnazzyRoundedCornersContrib" 
TOPICTOSHOW="WebTopicList" 
BORDERCOLOR="%WEBBGCOLOR%" 
BGCOLOR="lightblue"
FLOAT="center" 
WIDTH="300px" 
HEIGHT="300px"
IDSHOW="unique"
}%

comes out like (bottom cut off because the INCLUDEe topic is larger than the 300px allowed)

WebForm
TopicClassification	SkinDevelopment
TopicSummary
InterestedParties
RelatedTopics	QuickMenuSkin

How-to: Rounded corners to QuickMenuSkin

Installation

Troubleshooting

Examples

Feedback/ ideas

All topics in Plugins web