By Anonymous (not verified) on

This small howto explains how to integrate nice Nifty Corners Cube design solution by Alessandro Fulciniti with your Drupal theme. By popular demand.

  • First go and download niftycube.js & niftycorners.css files from the original site. I decided to put them in my theme folder (which in the beggining was just a plain copy of bluemarine theme, but evolved in time, of course).
  • Next, you'll need to include the js file in all your pages. It is easily done by adding the the following line in your page.tpl.php file, right before </head> tag: <script type="text/javascript" src="/themes/linportal/niftycube.js"></script>
  • niftycorners.css is called automatically (nice hack) so you don't need to call it manually (just make sure it's in the same directory as the js file)
  • Go through your style.css file and find the css names of the blocks that you would like to have its corners rounded. In my case I found that I wanted to round div.block & div#mission. That eventually led to the following initialization code (that I decided to put right into niftycube.js, at it's end, to spare me calling yet another js file):
    NiftyLoad = function() {
    Nifty("div.block");
    Nifty("div#mission");
}

If I haven't forgotten something, that should be it. With a very little work and no additional images you can have nice rounded boxes on your page. You can check it in action here.

⋅ Categories: Drupal 4.7.x

Comments

Dollars5’s picture

Dollars5 commented

Hi All,

The direct link for downloading the examples, .css and .js is available from http://www.html.it/articoli/niftycube/NiftyCube.zip

Thanks linportal for usage tips.

Regards,
Dollars 5
Dollars 5 Solution
Mobile Software Developer

drupallinux’s picture

drupallinux commented

you gotta define your background colors first, so first you got to put backgrounds in the blocks you want to round off, dont leave them white and end up scratching your head wondering why it didnt round off :P

normal css
div.node {background or background-color: red; }

http://www.sitelancers.net

Anonymous’s picture

Anonymous (not verified) commented

Uh, oh, you're completely right, of course. Thanks for the important correction.

While I did go through my changes carefully, I still managed to get lost in all style.css changes that I made.

ojkelly’s picture

ojkelly commented

Iv've been playing round with this, thanks heaps you've helped me alot.

Anonymous’s picture

Anonymous (not verified) commented

You're welcome.

I'm glad you've found it useful.

atuline’s picture

atuline commented

I'll preface this by saying I don't know anything about .js files.

1) I downloaded the niftycube.zip file and extracted the files directly to my /drupal/themes/bluemarine folder (which is my theme).

2) I updated page.tpl.php with the javascript include just before the /head tag and made sure the directory was the same as mine.

3) I added the NiftyLoad code above to the end of niftycube.js.

4) I added a NiftyLoad line for div.sticky and made sure my .sticky was coloured. I then created a test sticky at www.tuline.com.

Nothing!

Update:

It now works by adding the full directory for calling niftyCorners.css in the niftycube.js file as follows:

l.setAttribute("href","/drupal/themes/bluemarine/niftyCorners.css");

Many, many hours later . . . . still many issues to resolve. . .

Aargh!!!

atuline’s picture

atuline commented

Although I was able to make .js and .css based nifty corners out of the mission statement or other solid colour

, I was unable to do so successfully with dark coloured h2 tags within a light coloured div (to re-create drupal.org menus). Stories and stickies were even worse. Anything with a border was also not happening, well at least not for me.

As a result, I'll be focusing on image based corners instead.

PS, still not very experienced with CSS.

Annika’s picture

Annika commented

Hi,

just wanted to add that Nifty Corners Cube doesn't do coloured borders, just so you know. Maybe that will save somebody some time and frustration. The previous incarnation, Nifty Corners, makes rounded coloured borders, though but then you have to add it yourself without the module, I guess.

/Ayza

merrickmgt’s picture

merrickmgt commented

Hello All,

Does anyone know if Nifty Corners Cube doesn't function if you also have a script, such as a slideshow script, on the same page? I did this:

http://www.bestofindianashville.com/food.html

Yet the corners are not rounded anymore.

I am rather new to java so I realize I may have erred somewhere :-)

Thanks

Annika’s picture

Annika commented

It sounds like you have a conflict and Drupal doesn't know what to load, or the slideshow script overwrites the Nifty script.

Take a look at this thread: http://drupal.org/node/17533

Hope it helps!

/ Ayza

merrickmgt’s picture

merrickmgt commented

I have to admit, I found this forum by accident. I was searching for help on Nifty Corners Cube. The help seems sparse for Nifty Corners and the developer seems hard to reach. I don't actually use Drupal :-)

Annika’s picture

Annika commented

Hi,

I've used Nifty on non-Drupal sites too. Try the following:
* Double and triple check all paths to the .js and .css files. (most common why it won't work)
* Start out with zeroing margins and paddings.
* You MUST have a background color or image!
* Try wrapping what you want in a new pair of divs with an ID. Target that ID with Nifty. Sometimes it doesn't want to round what you want rounded.
* Try moving the Nifty script before the slideshow script (or the reverse).

Good luck!

Ayza

Anonymous’s picture

Anonymous (not verified) commented

Other javascript on the same page shouldn't be a problem, but often you have some problems if the scripts clash somehow. While debugging that Tools -> JavaScript Console (in Firefox) is great help. For example on your page I'm getting this error:

Error: document.getElementById(div) has no properties
Source File: http://www.bestofindianashville.com/food.html 
Line: 392

Looks like you've made a small mistake and that's why it's not working.
--
http://linux.inet.hr/

toma’s picture

toma commented

how about the new nifty corners

check out

http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/

TheWhippinpost’s picture

TheWhippinpost commented

I don't mean to downplay this solution - it's an interesting scripting exercise - but relying on scripting seems to be both overkill and, at best, a sticky plaster solution when, according to a stat I read recently, ~10% of users have scripting purposely disabled.

Far more reliable is to use mark-up, gif/jpg/png (whatever) image corners and CSS to achieve rounded corners IMHO.

Mike

toma’s picture

toma commented

If you say so, drupal is alse have a lot of scripting, ajax etc, thanks for the solution you mention, i will give it a try

TheWhippinpost’s picture

TheWhippinpost commented

Yes, Drupal has scripting for various functions, but what we're talking about here is using scripting for aesthetically "dressing" a website.

It's always best to limit scripting rather than bloat-up code for non-essential tasks... particularly when there is a more native solution to-hand.

Mike

j.barratt’s picture

j.barratt commented

1) The script tag you're told to add to your page.tpl.php (for phptemplate users) has a broken leading '/' in the src attribute value, and should read (tag-opening less-than character removed so the line doesn't get filtered out when I post this):

script type="text/javascript" src="themes/linportal/niftycube.js">

(again, where linportal=name of your theme, e.g. "themes/bluemarine/niftycube.js")

2) As pointed out in another comment, this niftycube.js line (#37) needs modification:

l.setAttribute("href","niftyCorners.css");

Since we put the niftycube files into our theme directory they are not in the document root as niftycube expects, so replace that line with either with the full path mentioned by the previous commenter or an easier-maintainance relative path such as:

l.setAttribute("href","themes/bluemarine/niftyCorners.css");

3) My browser compatiblity testing shows that in IE 6.0 em-padding on the div interfered with display of the corners, but a value in hard px worked. This may just have been that IE rendered the .5em value I was using too small for corners to work, though it was a value of only 5px that did end up working.

4) This is obivous, but someone just reading the page without having tried out niftycube might misunderstand the "no white corners" limitation mentioned here repeatedly. All that's required is a contrast with the background, so white corners are quite possible on a background other than white.

Thanks for the link to niftycornerscube linportal!

mtk’s picture

mtk commented

Hi,
I've been able to make Nifty work, but any other JS stopped working:

  • JSTools (calendar, collapsible...)
  • collapsible fieldsets in the settings area

any ideas how to fix this?

Anonymous’s picture

Anonymous (not verified) commented

To make records straight, after about half year, linux.inet.hr is not running nifty anymore. Why? Well, it seems I finally got tired of screen jumping when nifty was loading. Nifty is really nifty, but has it's drawbacks...

At the moment, the corners are rounded with simple -moz-border-radius: 8px 8px, meaning that Firefox/Iceweasel users will see them rounded, but IE users won't. If anybody has an idea how to overcome that, I'm all ears.

--
http://www.linuxinsight.com/

TheWhippinpost’s picture

TheWhippinpost commented

http://drupal.org/node/79169

Mike
------------------------------------------------------------------------------------------
A simple thanks to those that help, a price worth paying for future wealth.

TheWhippinpost’s picture

TheWhippinpost commented

http://drupal.org/node/79169

Mike
------------------------------------------------------------------------------------------
A simple thanks to those that help, a price worth paying for future wealth.

scaifea’s picture

scaifea commented

Any ideas why my NiftyCube doesn' work?

http://blackwhite.uk.com/index2.html

It seems to need a third column and I do not want it to have one!

Any help appreciated.

relaxalien’s picture

relaxalien commented

it works for me with full paths.

in niftycube.js:
l.setAttribute("href","http://EXAMPLE.TLD/themes/YOURTHEME/niftyCorners.css");

and template.php:
drupal_set_html_head('<script type="text/javascript" src="http://EXAMPLE.TLD/themes/YOURTHEME/niftycube.js"></script>');
mofarik’s picture

mofarik commented

Has anyone tried applying the nifty corners on primary links menu? I wasn't successful on it. Any tips guys?