CMS Made Simple Forums

Hello everyone 

Has anyone here used niftycorners? to round corner there div boxes?

I have read this articlehttp://www.html.it/articoli/niftycube/index.html and have downloaded the files.

I have never done this thing before...what do I do next? I have uploaded the CSS file and the niftycube.js to my server and have imported the CSS file into CMSMS.

I have then added: into my template header.

This is about as far as I have got. Using the standard Bulletmenu Vert 1col+News template within CMSMS how would I round corner lets say the header div?

Sorry to sound stupid. 

Kind regards, Debra.

www.multiintech.com/  first page you see is using the border call only been using them for a year or more very fun also niftyCubes http://www.multiintech.com/index.php?page=niftycubes even easier but no borders, templates available....

    mark

Wow..they look great Mark, well done   

I'm still in the dark on how to make my DIVs have round corners though.

I have managed to it in Dreamweaver with a static HTML site, but i'm hopelessy lost with CMSMS.

As you know there are several Style sheets linked with each template how do I call lets say the header div to have round corners in the standard bullet menu vert 1 col template?

I have these in the head of the template:



And I have attached the niftycorners.css to the template aswell.

I assume this is correct?

Kind regards, Debra. 

wow! 

Great link people. 

99debra99 wrote: I'm still in the dark on how to make my DIVs have round corners though.

I have managed to it in Dreamweaver with a static HTML site, but i'm hopelessy lost with CMSMS.

As you know there are several Style sheets linked with each template how do I call lets say the header div to have round corners in the standard bullet menu vert 1 col template?

I have these in the head of the template:

After briefly looking over the nifty link you provided, it looks like all you are missing is the js call function.  Which is pointed out as:


window.onload=function(){
Nifty("div#box","big");
}


The Nifty() function is tied in with div#box on the css

div#box{width: 18em;padding: 20px;margin:0 auto;
    background:#E6E6E6;color:#000}

So I would assume you would apply id=box to the div you want shown as rounded corners.  Example html:
===========
This will apply rounded corners to my text
===========

Something to that effect.  Change your div#box border color, width, etc etc to suit your site.  Mark will probably figure this out quicker than me. 

But I will still give it a test run today or tomorrow and give you a follow up.  Happy coding

Sincerely,
David

depends on which one you are using... they both have a JS that call out the corners to round
in my header..

this will be cube or corner depending on if you use one or the other, change nothing inside that file..
you can name this "whatever.js"
inside this you find....

niftyCorners uses.....

window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#header","bottom","#D6DEEC","#84B7FF","smooth");
Rounded("div#header h1","bottom","#84B7FF","#657DA6","smooth");
Rounded("div#content","tl bottom","#D6DEEC","#FFF","smooth");
Rounded("div#nav","tr bottom","#D6DEEC","#95B3DE","smooth");
Rounded("div#sidenotes","all","#D6DEEC","#B1C0D5","smooth");
Rounded("blockquote","tr bl","#FFF","#CDFFAA","border #88D84F");
Rounded("div#relax","all","#FFF","transparent");
Rounded("div#footer","all","#D6DEEC","#CCCCCC","small border #fff");
}

in niftyCorners you get five calls first is, which div, second is the corners to round, tl - tr - br - bl - top - bottom - all, third is color outside the div, fourth is color inside the div, last is small (small round on corners) smooth (bigger and smoothed to take out jagged edges, not required/default) border w/ color # (can take the 'small' call to make small corners w/ border)

niftyCubes uses...

window.onload=function(){
Nifty("div#menu a","small transparent top");
Nifty("ul#intro li","same-height");
Nifty("div.date");
Nifty("div#content,div#side","same-height");
Nifty("div.comments div");
Nifty("div#footer");
Nifty("div#container","bottom");
}

no need to call colors it finds them in the CSS, just what to round and what size... this page can explain in more detail, and this version has the "same-height" call which is nice for making two boxes same height no matter how much is in them...
when changing anything in the layout.js of either pay notice to the "," miss one and the whole thing stops working, nice thing is if the viewer has JS disabled they still get layout, just with square corners. they both have a CSS that goes with them with a bunch of strange things in them (change nothing inside this file) like this...


.r4,.rl4,.rs2,.rsl2,.re4,.rel4,.ra3,.ral3,.ras1,.rasl1,.res2,.resl2{margin-left:1px}
.r4,.rr4,.rs2,.rsr2,.re4,.rer4,.ra3,.rar3,.ras1,.rasr1,.res2,.resr2{margin-right:1px}
.rx1,.rxl1{border-left-width:5px}
.rx1,.rxr1{border-right-width:5px}
.rx2,.rxl2{border-left-width:3px}
.rx2,.rxr2{border-right-width:3px}
.re2,.rel2,.ra1,.ral1,.rx3,.rxl3,.rxs1,.rxsl1{border-left-width:2px}
.re2,.rer2,.ra1,.rar1,.rx3,.rxr3,.rxs1,.rxsr1{border-right-width:2px}
.rxl1,.rxl2,.rxl3,.rxl4,.rxsl1,.rxsl2,.ral1,.ral2,.ral3,.ral4,.rasl1,.rasl2{border-right-width:0}
.rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
.r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
.rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}

  HTH
    mark
any other ?'s feel free to ask, i love the rounds  as you maybe can tell by my site.

Mark you beat me to the punch.  Actually I was hoping you would. 

Your detailed explanation is much easier to follow than what is provided by the script providers.  I can see why you love this stuff.  It's highly addictive.  Seeing that I did most of my rounded corners in ps and optimized the heck out of the images just to keep the download times to being bareable.  This is what I needed and didn't even know I needed until this post.  Looks like its gonna be another long day.  Thanks for the tip!.  And 99debra99 thanks for posting your question. 

By the way, "love your site!" 

Sincerely,
David

i just love to make templates, designs, and porting to CMSMS is da bomb  easier than anything else i've looked at or tried.
just need more clients and ideas to port to CMSMS, if you see any nice templates let me know.

    mark

Thanks very much Mark and Kwansan for your help! 

I love your round-cornered template Mark (and your other templates too!) and Kwansan I agree with you about the "old fashioned " way of re-creating round corners with heavy code is both tedious and archaic!

I think I'll have a play tomorrow with my test server with some round cornering!

Don't you dare go out tomorrow the pair of you, I'm bound to have some more questions! 

Kind regards, Debra.

Thanks for your kind words, but I have to give credit where it is due.  I only helped to prove we were both confused.  I was in the same boat as you until Mark so kindly took the time to provide further details.  I am having too much fun with this.  So many different combinations of colors and styles.  Someone stop me before I go crazy with these rounded corners.  And I can't believe how easy it is. 

I'll be here until everything in my site has been rounded.

mark wrote: i just love to make templates, designs, and porting to CMSMS is da bomb  easier than anything else i've looked at or tried.

I agree with you Mark, every other cms falls short from a designers perspective.  With cmsms, its so easy to port from dw, copy your header, copy your footer, add a few {contents} here and there, attach your stylesheet and your done.

mark wrote: just need more clients and ideas to port to CMSMS, if you see any nice templates let me know.

Once I finish porting my site to cmsms, I will be making a page for "featured designers".  If you are interested let me know I'll give you the details.

Thanks you two!

never used dw tried FP and saw the puke they call code, finally got off the floor from LMAO and uninstalled it, tried about 60 other free WYSIWYG editors and just ended up using PSPad editor and hand coding, found the Web Developers extention for Firefox, which is a dream to use, CSS editing with real time results that you can copy/paste back into your CSS...

    mark

Ok..i'm still a little confused...   

If i wanted to round corner my footer DIV I would need to call this:  Nifty("div#footer"); This would style the footer to whatever the javascript told what Nifty("div#footer") should be right?

Where would I place this Nifty("div#footer"); I tried in the head of my template but I just had smarty errors.

I think maybe I need a step by step guide. You guys make it sound so simple and I feel incredibly dumb.

Kind regards, Debra. 

using Cubes or Corners?

Cubes Mark.

Kind regards, Debra.

do you have something like this in your header?


your paths may vary

do you have a CSS like this associated with your template

niftyCorners

with some kinda stuff like this...

/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dinamically by javascript,
and their use should be avoided in the markup */

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}  etc. etc.

?

  mark

LOL 

Yes i have those I think 

see here, might be easier for you.

http://www.excal-test.co.uk/cms/index.php