Replies to This Discussion

Permalink Reply by JenSocial on July 3, 2011 at 3:46pm

Ceddy,

Most of their "roundness" is accomplished with special images, like this one:

This is done to ensure the round corners will show in all browsers. You can add rounded corners to most any element, but it will only show in FireFox, Chrome (new versions), Safari - - but per usual, not in IE.

 

Just add these attributes to your CSS element. I will add to entire navigation bar, and main body content containers as an example:

#xg_navigation {  -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}
#xg_body {  -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

 

You can try this, but I find it unreliable on Ning - - and too tough to install:

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

 

Otherwise, you have to create custom corner images.

Hope that helps,

Jen

• ▶ Reply

Permalink Reply by The Dusk Spot on July 3, 2011 at 7:29pm

Yes ma'am it did!

 

I have memorized the html skeleton, just still learning some the tweaking properties! I want to be able to give out tips to you guys as well the way you have. I will get there someday :)

• ▶ Reply

Permalink Reply by Sozi on July 3, 2011 at 8:28pm

I think I got some code for that do you mean
rounding off the edges?

• ▶ Reply

Permalink Reply by soʀa on July 4, 2011 at 4:22am

http://www.border-radius.com/

here's is a good gen :)

• ▶ Reply

Permalink Reply by The Dusk Spot on July 4, 2011 at 12:40pm

It's been done to my site now!!!

 

Here's what I did; I took the foundation of Jen told me and applied it to the rest of the html skeleton.

 

#xg_navigation {  -moz-border-radius: 20px;    -webkit-border-radius: 20px;    -khtml-border-radius: 20px;    border-radius: 20px;}

#xg_body {  -moz-border-radius: 20px;    -webkit-border-radius: 20px;    -khtml-border-radius: 20px;    border-radius: 20px;}

.xg_module {  -moz-border-radius: 20px;    -webkit-border-radius: 20px;    -khtml-border-radius: 20px;    border-radius: 20px;}

#xg_foot {  -moz-border-radius: 20px;    -webkit-border-radius: 20px;    -khtml-border-radius: 20px;    border-radius: 20px;}

#xg_masthead {  -moz-border-radius: 20px;    -webkit-border-radius: 20px;    -khtml-border-radius: 20px;    border-radius: 20px;}

.xg_theme {  -moz-border-radius: 20px;    -webkit-border-radius: 20px;    -khtml-border-radius: 20px;    border-radius: 20px;}

#xg {  -moz-border-radius: 20px;    -webkit-border-radius: 20px;    -khtml-border-radius: 20px;    border-radius: 20px;}

 

• ▶ Reply