Rounded Corners With Niftycube documentation

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
1/9/2012 9:17:53 PM
Gravatar
Total Posts 199

Rounded Corners With Niftycube documentation

does MOJO support rounded corners with Niftycube?  Is there any specific example?

I was thinking I might have to turn off the rounded corners in them.skin then add the correct Niftycube css and js if possible??

my ultimate goal would be to apply rounded corners on demand for specific features using a class not all at once.

any help is appreciated

 

1/10/2012 9:19:36 AM
Gravatar
Total Posts 18439

Re: Rounded Corners With Niftycube documentation

Hi,

The cornerrounders in theme.skin if DoRounding is true just renders the extra markup needed for nifty corners though it uses divs rather than <b>

Then css is applied, you can find it is used in most of the dcarter-* skins in our extra-skins.zip

for example this is the css in dcarter-businessone:

/* Corner Rounding with Nifty Corners */
.rtop,.rbottom { display:block; background:#F5F6F0; }
.rtop .r1,.rtop .r2,.rtop .r3,.rtop .r4,.rbottom .r1,.rbottom .r2,.rbottom .r3,.rbottom .r4 {
background:#E1E5D5;
display:block;
height:1px;
overflow:hidden; }
.r1 { margin:0 5px; }
.r2 { margin:0 3px; }
.r3 { margin:0 2px; }
.rtop .r4,.rbottom .r4 { height:2px; margin:0 1px; }
.rbottom { margin-bottom:10px; }

.center-leftmargin .rtop,.center-leftmargin .rbottom,.center-rightmargin .rtop,.center-rightmargin .rbottom,.center-nomargins .rtop,.center-nomargins .rbottom,.center-rightandleftmargins .rtop,.center-rightandleftmargins .rbottom,.logolist,.pageicons,.skiplink {
display:none;
}

However the newer niftycube stuff looks like it creates the extra merkup from javascript. I don't see any reason why you couldn't use it in mojoPortal though I have no specific advice for you and don't have time to experiment with it myself. If you study the existing markup you should be able to figure out selectors to use with it.

It isn't something I plan to ever include in mojoPortal because NiftyCube javascript is licensed under GPL which is not a compatible license, so I cannot ship it with mojoPortal, though there is no reason you can't use it on your own site if it works for you.

Really I don't see a huge benefit vs the older NiftyCorners since they are adding the extra markup one way or another in order to do the rounding with css. I'd just enable it to be rendered using our theme.skin file and use css with no need to load extra javascript. The only advantage of the javascript approach is to be able to leave it out of the raw markup but we can do that by turning it off in theme.skin anyway. So how that extra markup gets in there is not important, it will be faster just rendering it rather than using dom manipulation from javascript.

Also all of this approach is old school and can be done with newer CSS 3 things without extra markup or javascript.

Best,

Joe

1/10/2012 9:49:41 AM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Rounded Corners With Niftycube documentation

Since rounded corners are really a "nice to have" feature and don't directly affect the user experience, I'd also recommend you go the CSS3 route. Using a single border-radius CSS 3 directive, you'll get rounded corners in all up-to-date and future browsers. It will be really easy to add it just to select features by using the custom CSS class box in the feature settings.

Jamie

1/10/2012 10:17:53 AM
Gravatar
Total Posts 199

Re: Rounded Corners With Niftycube documentation

thank you for the info, this is extremely helpful for me.  I actually started out with the CS3 border-radius, but thought that older browsers might be a problem.

would you recommend turning off rounded corners in theme.skin and just use custom classes with the CS3 border-radius and just specify the class for the feature needing the round effect?  would I lose much of the older audience of older browser in your opinion?

I am currently using:

border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;

Thanks as always

 

1/10/2012 10:25:09 AM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Rounded Corners With Niftycube documentation

Well, it's really up to you to decide how important the corner rounding is, and whether you want all of your visitors to experience it. If it were up to me, I wouldn't worry about the older browsers too much, for what that's worth. Designers have already had to spend way too many years figuring out and coding workarounds for legacy browsers. Designing for the present and future is much more rewarding than designing for the past. Smile

Jamie

You must sign in to post in the forums. This thread is closed to new posts.