WordPress.org

1. arctork
   Member
   Posted 5 years ago #

   Hi,

   I have found this project by Alessandro Fulciniti called Nifty Corners(http://www.html.it/articoli/nifty/index.html - first version) or Nifty Cube Corners (http://www.html.it/articoli/niftycube/index.html - third version) I am trying to add its ability to create rounded corners without using images to my wordpress blog though obviously its not working - otherwise I probably wouldn't be here.

   I think I have identified the problem to be with these lines of code in the niftycube.js file which is included by doing

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

   [code]
   function AddCss(){
   niftyCss=true;
   var l=CreateEl("link");
   l.setAttribute("type","text/css");
   l.setAttribute("rel","stylesheet");
   l.setAttribute("href","/niftyCorners.css");
   l.setAttribute("media","screen");
   document.getElementsByTagName("head")[0].appendChild(l);
   }
   [/code]

   the niftycorners.css file contains the following

   [code]
   b.niftycorners,b.niftyfill{display:block}
   b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
   overflow:hidden;border-style:solid;border-width: 0 1px}
   /*normal*/
   b.r1{margin: 0 3px;border-width: 0 2px}
   b.r2{margin: 0 2px}
   b.r3{margin: 0 1px}
   b.r4{height: 2px}
   b.rb1{margin: 0 8px;border-width:0 2px}
   b.rb2{margin: 0 6px;border-width:0 2px}
   b.rb3{margin: 0 5px}
   b.rb4{margin: 0 4px}
   b.rb5{margin: 0 3px}
   b.rb6{margin: 0 2px}
   b.rb7{margin: 0 1px;height:2px}
   b.rb8{margin: 0;height:2px}
   b.rs1{margin: 0 1px}
   /*transparent inside*/
   b.t1{border-width: 0 5px}
   b.t2{border-width: 0 3px}
   b.t3{border-width: 0 2px}
   b.t4{height: 2px}
   b.tb1{border-width: 0 10px}
   b.tb2{border-width: 0 8px}
   b.tb3{border-width: 0 6px}
   b.tb4{border-width: 0 5px}
   b.tb5{border-width: 0 4px}
   b.tb6{border-width: 0 3px}
   b.tb7{border-width: 0 2px;height:2px}
   b.tb8{border-width: 0 1px;height:2px}
   b.ts1{border-width: 0 2px}
   [/code]

   and is initiated with a javascript function like so ...

   [code]
   <script type="text/javascript">
   window.onload=function(){
   Nifty("div#content,div#nav", "same-height");
   }
   </script>
   [/code]

   When using firefox and trying to view the niftycorners.css file firefox / wordpress can't find it ... though it can when I'm not integrating it into worpress. Is there a way to fix this so that wordpress can find this file?

   Thank you.

2. Chris_K
   Member
   Posted 5 years ago #

   Try putting the .js file in with your theme and load it with:
   <script type="text/javascript" src="niftycube.js"></script> maybe?

   Or, put it at the top level of your blog and load it as:
   <script type="text/javascript" src="/blogDirectory/niftycube.js"></script> (change blogDirectory to be whatever the top level web directory is).

3. arctork
   Member
   Posted 5 years ago #

   I'll give it a try but I don't think it'll work because the file that has the problems is the file that is loaded by niftycube.js sort of on the fly ... by the following function ... - niftycorners.css

   function AddCss(){
   niftyCss=true;
   var l=CreateEl("link");
   l.setAttribute("type","text/css");
   l.setAttribute("rel","stylesheet");
   l.setAttribute("href","niftyCorners.css");
   l.setAttribute("media","screen");
   document.getElementsByTagName("head")[0].appendChild(l);
   }

   firefox can find and I can view the niftycube.js file fine. but when I go and try and view the niftycorners.css file it just tells me that it can't be found. Though when I try it outside of wordpress everything works fine. So I think I have to adjust the setAttribute("href","niftyCorners.css") line somehow ... though I'm not quite sure ...

4. arctork
   Member
   Posted 5 years ago #

   As it turns out ... what you suggested helped me ... instead of adjusting the function I adjusted the placement of the file ... and I guess it was looking in the base blog directory.

   Thanks

5. AnnBaxter
   Member
   Posted 5 years ago #

   The previous post answered a question I had to get the nifty corners work in my wordpress template.

   The corners appear on the sidebar in my blog (index.php), but are not appearing on the same sidebar in the Pages created from page.php and single.php.

   I used the /blogDirectory/niftycube.js pathway in my case. The script is in the header.php which is used in all these php files.

   How do I get the script to work (the corners to appear) in the Pages and Single Post pages?

   Thanks.
   Ann

6. eleni2
   Member
   Posted 5 years ago #

   the easiest way is to take this line:
   l.setAttribute("href","/niftyCorners.css");

   and stick in "http://blah blah.com/blha blah/niftycorners.css"

   instead of just '/niftycorners.css'

   that solved my problem.

7. 4evrblu
   Member
   Posted 5 years ago #

   So, in the final analysis, where does this script and all of the corresponding files get uploaded to? Does it go to the WordPress directory, or does it go into the themes you want it to work on? Seems to me it should go into your themes folders.

   Also, if it goes into the theme folders, then shouldnt the paths in the js file pointing to the style sheet be adjusted to reflect the path to that theme?

   Is my question confusing? I hope not.

   Also, I would love to see some blogs using this. Can anyone post some URLs please.

   Merry Christmas

8. maybefrench
   Member
   Posted 5 years ago #

   3 months later I don't have any hope but maybe a generous soul will feel pity for me :

   I don't know how it can happen but I can't make it work. I tried every single combination to make the script work but nothing. Now, is there something with WordPress that block everything ?

   If I put the files in the root it doesn't work, in the theme folder either. If I give the full path ( http://... ) or a short of ( /folder/nifty.js ) it doesn't make it.

   I'm lost :/ Help ?

9. jackosh
   Member
   Posted 5 years ago #

   instead of going nuts over this, why don't you just use images to round corners...

   the images that you'll need to use will end up being smaller in size than all of the js/css anyways...

10. nomi
    Member
    Posted 5 years ago #

    Here's what you have to do. I put the niftycube.js and niftyCorners.css files in the theme directory.

    First, you have to make sure you are calling the niftycube.js file with the absolute path. To do this, you would post this in your header.
    

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/niftycube.js"></script>

    Then, you have to make sure the whole absolute url is posted in the niftycube.js file.

    This would be for the line that starts like this:
    l.setAttribute("href","

    So, that line would finally look something like this:

    l.setAttribute("href","http://www.yoursite.com/wp-content/themes/yourthemedirectory/niftyCorners.css");

11. bochgoch
    Member
    Posted 4 years ago #

    Thanks nomi -- saved me some head scratching on that one!

12. gashbaugh
    Member
    Posted 4 years ago #

    I can't for the life of me get this to work in WP. I tried setting all the directories as recommended above.

    I can get it to work in my websites root directory fine, outside of WP.

    Not sure what the problem is...

Topic Closed

This topic has been closed to new replies.