Hi
I've got nifty cube, which I think is the latest version of nifty corners, working on one of my client sites Vindon Healthcare. It was really straightforward to implement and all the examples and code you need are on the nifty cube website.
HTH
Dave
Softened Cell and Sunset themes released
I've also used the script from Nifty Corners Cube. After deleting the "-moz-border"s inside ".serendipity_title {}" in the style.css, I've implemented it into the Ladybug theme's index.tpl with
With no success. Please, put it on your list. I'm patient. 
Code: Select all
<script type="text/javascript" src="{serendipity_getFile file="niftycube.js"}"></script>
<script type="text/javascript">
window.onload=function(){ldelim}
Nifty("h3.serendipity_title","big");
{rdelim}
</script>
</head>I checked the selector at the Nifty Corners Cube website, and it should be OK. The call to Nifty() looks good. It sounds like you put all that in the index.tpl before the </head>, which is the right location for it.
Next step is to check the source and make sure it actually got in there. Load up the webpage and select "View Source" in your browser (if you provide a link, I'll visit it myself). You should see both the niftycube.js include line, complete with an actual file name, and the call to Nifty(), complete with {} instead of {*delim}.
If you don't see the include line or other script lines at all, you've edited the wrong file. Either you picked the version in templates_c/ (bad! Very bad!), or you've chosen the wrong template, or you put the lines in the wrong part of the index.tpl (for instance, where it decides not to output a <head> section because it's embedded).
If you see src="" in the include line, Serendipity couldn't find your niftycube.js file. You need to move it into the template directory, the default/ directory, or the Serendipity base directory (defaults to serendipity/, but can be renamed to anything, even the web root).
If you have some other anomaly, report back and we'll see what we can figure out.
We can lick this. It's not even going to be especially difficult.
Next step is to check the source and make sure it actually got in there. Load up the webpage and select "View Source" in your browser (if you provide a link, I'll visit it myself). You should see both the niftycube.js include line, complete with an actual file name, and the call to Nifty(), complete with {} instead of {*delim}.
If you don't see the include line or other script lines at all, you've edited the wrong file. Either you picked the version in templates_c/ (bad! Very bad!), or you've chosen the wrong template, or you put the lines in the wrong part of the index.tpl (for instance, where it decides not to output a <head> section because it's embedded).
If you see src="" in the include line, Serendipity couldn't find your niftycube.js file. You need to move it into the template directory, the default/ directory, or the Serendipity base directory (defaults to serendipity/, but can be renamed to anything, even the web root).
If you have some other anomaly, report back and we'll see what we can figure out.
We can lick this. It's not even going to be especially difficult.
Hi
hope you don't mind me jumping in here Judebert
When i used nifty corners I uploaded niftyCorners.css and niftycube.js to my Serendipity root folder and then placed the script call in the head section of my index.tpl with a full url - which worked!
cheers
Dave
hope you don't mind me jumping in here Judebert
When i used nifty corners I uploaded niftyCorners.css and niftycube.js to my Serendipity root folder and then placed the script call in the head section of my index.tpl with a full url - which worked!
Code: Select all
<script type="text/javascript" src="http://www.mydomain.com/serendipity/niftycube.js">Dave
That's my bet, actually: the niftycube.js probably isn't being found.
Personally, I like the idea of keeping it in the template, so using {serendipity_getFile file="niftycube.js"} can find it there, regardless of how the template or root directory has been renamed.
But, to verify stuff is working, hard-coding it like Dave mentioned will definitely work.
Personally, I like the idea of keeping it in the template, so using {serendipity_getFile file="niftycube.js"} can find it there, regardless of how the template or root directory has been renamed.
But, to verify stuff is working, hard-coding it like Dave mentioned will definitely work.
But it seems to be very difficult ... I checked everything you said and everything is in place. I even tried to "hardcode" it now. - No success. Here is my blog: http://cetp.ce.funpic.de/blog/
Hi
you've got the nifty cube script set up correctly but you've got no styling set for the h3 element that you're trting to apply it to.
You should take another look at the 'big' example http://www.html.it/articoli/niftycube/nifty1.html and see what kind of styling you need to apply to your h3 element for the script to work.
HTH
Dave
you've got the nifty cube script set up correctly but you've got no styling set for the h3 element that you're trting to apply it to.
You should take another look at the 'big' example http://www.html.it/articoli/niftycube/nifty1.html and see what kind of styling you need to apply to your h3 element for the script to work.
HTH
Dave
Well there is some styling:
I deleted that and tried alot of the css stuff from the nifty big example on my h3 element. But that doesn't do it. I also deactivated all the css in the nifty big example with Firebug and it doesn't seem to be that important. It's out of place but the corners are still there. I'm really stuck here. 
Could you try it yourself with the Ladybug theme?
Code: Select all
.serendipity_title {
background-color: #FF8080;
padding: 5px;
position: relative;
top: -1em;
margin: -5px 20%;
text-align: center;No problem. La, la, la...
Time passes.
Download complete.
Boy, there are a bunch of files here. Wonder which ones we need. I'll just look into the code.
La, la, la...
Time passes.
Ah hah!
Nifty automatically adds its own CSS to the page. The way it's coded means that niftyCorners.css MUST be either manually included (in your template) or located in the current directory.
I'm going to experiment with it right now anyway, but I'll bet that's the problem. Thanks, d_cee, for pointing out the lack of any Nifty styles.
Time passes.
Download complete.
Boy, there are a bunch of files here. Wonder which ones we need. I'll just look into the code.
La, la, la...
Time passes.
Ah hah!
Nifty automatically adds its own CSS to the page. The way it's coded means that niftyCorners.css MUST be either manually included (in your template) or located in the current directory.
I'm going to experiment with it right now anyway, but I'll bet that's the problem. Thanks, d_cee, for pointing out the lack of any Nifty styles.
Ok, the serendipity_getFile thing didn't work for me when the script was in the s9y directory. Don't know why. Hmm.
So I just changed it in the index.tpl to include "/serendipity/niftycube.js" instead. With the niftyCorners.css and niftycube.js in the serendipity directory, and the index.tpl otherwise as provided above, it rounded the corners of the titles in IE and FF.
Poorly. The wrong background color was used, proabably because the div containing the titles is offset relative to its container; the container is pink, so NiftyCube used that as the new background color. And the title text was clipped. Of course, FireFox looks even worse, with its working borders overwritten by the Nifty ones, and the text clipped to nothing. (The text in FF is smaller than the text in IE, for some reason.)
The option "big transparent" restored the clipped text in both browsers. But the top of the rounded titles still used the incorrect background. I don't think there's any way around it, although moving the bubble-titles back inside the entry boxes will make it appear correct, just like the bottom edges.
To get rounded edges in all browsers will require compliance with advanced CSS, or images (possibly placed in tables).
But, putting niftycube.js and niftyCorners.css in the Serendipity directory will allow you to round corners in any template.
Just not on the archives pages (arrrgh!). In the end, I wound up using this code in index.tpl:
That worked on all pages, with the background color caveat.
So I just changed it in the index.tpl to include "/serendipity/niftycube.js" instead. With the niftyCorners.css and niftycube.js in the serendipity directory, and the index.tpl otherwise as provided above, it rounded the corners of the titles in IE and FF.
Poorly. The wrong background color was used, proabably because the div containing the titles is offset relative to its container; the container is pink, so NiftyCube used that as the new background color. And the title text was clipped. Of course, FireFox looks even worse, with its working borders overwritten by the Nifty ones, and the text clipped to nothing. (The text in FF is smaller than the text in IE, for some reason.)
The option "big transparent" restored the clipped text in both browsers. But the top of the rounded titles still used the incorrect background. I don't think there's any way around it, although moving the bubble-titles back inside the entry boxes will make it appear correct, just like the bottom edges.
To get rounded edges in all browsers will require compliance with advanced CSS, or images (possibly placed in tables).
But, putting niftycube.js and niftyCorners.css in the Serendipity directory will allow you to round corners in any template.
Just not on the archives pages (arrrgh!). In the end, I wound up using this code in index.tpl:
Code: Select all
<link rel="stylesheet" type="text/css" href="/serendipity/niftyCorners.css" />
<script type="text/javascript" src="/serendipity/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){ldelim}
Nifty("h3.serendipity_title", "big transparent");
{rdelim}
</script>
{serendipity_hookPlugin hook="frontend_header"}
</head>
Thanks alot for your support, judebert!
There is a way around it. Nifty Corners with outer background-images:
I modified my niftycube.js. This gets the horizontal corner lines out of the text:
line 95-103:
same for the other side, line 123-131:
line 244, this let's the outer background image come through:
and line 251, this gives the inner corner lines the right color while the whole background stays transparent, so we'll still see the outer background image:
index.tpl:
entries.tpl: I added a <div id="niftyouter"></div> around the h3
style.css: replaced .serendipity_title by:
So there is a very inner background color.
Some issues:
1. The corners have still borders I can't get rid off.
2. Only the first entry gets corners.
3. I have to admit, Mozilla's -moz-borders are far superior. These Nifty Corners have either a way too straight border where the text is, which is crappy for little boxes like in this case, or the text is overlayed by the corner lines.
It would be better to make those corner lines vertical instead of horizontal. The text next to never reaches the left or right border if centered.
Any clue howto modify the .js for that?
There is a way around it. Nifty Corners with outer background-images:
I modified my niftycube.js. This gets the horizontal corner lines out of the text:
line 95-103:
Code: Select all
if(options.find("small")){
d.style.marginBottom=(p-0)+"px"; /*was -2*/
btype+="s"; lim=2;
}
else if(options.find("big")){
d.style.marginBottom=(p-0)+"px"; /*was -10*/
btype+="b"; lim=8;
}
else d.style.marginBottom=(p-0)+"px";/*was -5*/Code: Select all
if(options.find("small")){
d.style.marginTop=(p-0)+"px"; /*was -2*/
btype+="s"; lim=2;
}
else if(options.find("big")){
d.style.marginTop=(p-0)+"px"; /*was -10*/
btype+="b"; lim=8;
}
else d.style.marginTop=(p-0)+"px"; /*was -5*/Code: Select all
/*if(c=="transparent")*/ c="transparent"; /*c was "#FFFFFF" */ Code: Select all
return("#FF8080"); /* was "transparent" */Code: Select all
<link rel="stylesheet" type="text/css" href="/blog/niftyCorners.css" />
<script type="text/javascript" src="/blog/niftycube.js"></script>
<script type="text/javascript">
NiftyLoad=function(){ldelim}
Nifty("div#niftyouter", "normal");
{rdelim}
</script>style.css: replaced .serendipity_title by:
Code: Select all
div#niftyouter {
position: relative;
top: -0.1em;
margin: -21px 20% 0px;
text-align: center;
background-color: transparent;
}
.serendipity_title {
background-color: #FF8080;
margin: 0px;
}Some issues:
1. The corners have still borders I can't get rid off.
2. Only the first entry gets corners.
3. I have to admit, Mozilla's -moz-borders are far superior. These Nifty Corners have either a way too straight border where the text is, which is crappy for little boxes like in this case, or the text is overlayed by the corner lines.
It would be better to make those corner lines vertical instead of horizontal. The text next to never reaches the left or right border if centered.
Any clue howto modify the .js for that?
Holy cow. You've done a lot better than I could in the same time period.
1) I see it in FF, but in IE there's no rounding at all. That's IE6/WinXP.
2) Why in the world would only the first entry get corners? That's crazy. Hmm, let's check the blog... ah. Sure enough. That's because you're using div#niftyouter, which specifies all divs whose ID is niftyouter. Only one element is allowed to have any particular ID. You'll want to switch to <div class="niftyouter"> and div.niftyouter.
3) I tried that, once, with a NiftyCorners that calculated corner size dynamically. It added extra lines, which increased the size of boxes. If you specified *really* big corners, you got this gigantic box with a splash of text in the center. I tried to use vertical lines so that the corners wouldn't take up so much space. I failed. Sorry.
1) I see it in FF, but in IE there's no rounding at all. That's IE6/WinXP.
2) Why in the world would only the first entry get corners? That's crazy. Hmm, let's check the blog... ah. Sure enough. That's because you're using div#niftyouter, which specifies all divs whose ID is niftyouter. Only one element is allowed to have any particular ID. You'll want to switch to <div class="niftyouter"> and div.niftyouter.
3) I tried that, once, with a NiftyCorners that calculated corner size dynamically. It added extra lines, which increased the size of boxes. If you specified *really* big corners, you got this gigantic box with a splash of text in the center. I tried to use vertical lines so that the corners wouldn't take up so much space. I failed. Sorry.
Thanks for the compliment.
1) I got that too. Strange.
2) Oh, I forgot about that.
3) Maybe I'll try that myself someday.
I've got another problem with the Ladybug theme. The blog's headline is too big. I adjusted it in #serendipity_banner. Now it's fine in FF and Opera, but it won't change in IE (at least in IE6), no matter what I do. Any clue?
1) I got that too. Strange.
2) Oh, I forgot about that.
3) Maybe I'll try that myself someday.
I've got another problem with the Ladybug theme. The blog's headline is too big. I adjusted it in #serendipity_banner. Now it's fine in FF and Opera, but it won't change in IE (at least in IE6), no matter what I do. Any clue?