How do you round navigation and mudule borders?

Views: 271

Reply to This

Replies to This Discussion

border-radoius: 50px etc

but you should include  other browser compatability codes

-moz-border-radius

-webkit-border-radius

etc

 if you use 1 number 50px it applies to all corners

u can use diferent numbers for each corner for non symwtrical shapes

ex border-radius: 5px 12px 20px 60px;

that would be top left ti[op right bottom right bottom left it goes clockwise around

1.You can do it using CSS

2.Get the element id/class of the element you want to have rounded border corners

3.Use this generator to help you generate cross-browser rounded border corners code:

http://border-radius.com/

For example:

#xg_navigation{

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

}

Please note Ineternet Explorer dosent supports rounded border corners.

That's right Elson.. and for module  just replace this .xg_theme .xg_module instead of  this #xg_navigation

Thanks, this is great.  It seems to generally work, but there are a few places I have questions... how do you round the top left and right corner?  On a few modules, the rounded bottom left and right corners look broken after I enter the css

The top left of the canvas corner curve exposes a transparent layer?

replace this..

.xg_module_body

ok question:  I used this and it works fine in old editor but not in Design Studio.   Why?  Firebug shows the same element ".xg_module_head"

.xg_module_head{

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

}

BTW a huge THANK YOU guys for all of the assistance.  Very, very much appreciated.

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next!

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums.

APIsThe ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

soaringeagle replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"they do have 24 hour on call engineers so its not like we have to wait  till they are back in…"
1 hour ago
Anam replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"Error now on my site.. Latest Activity only shows my activity and no one elses. Every day at the…"
1 hour ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"im seeing them more and more and the design studio only opens like 1 out of every 50 times wich is…"
2 hours ago
ceri shaw replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"Cant speak for anyone else but I'm not seeing any 500 errors at the moment."
2 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"i also cant get the design studio to open while on on an article..im not sure if its consistent as…"
4 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"because they are 2 diferent things the comment wall is just a single page comment wall thats how it…"
4 hours ago
ceri shaw replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"RE: "the comment walls designed for a single page" Yes I see that now but WHY? On my…"
5 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"the comment walls designed for a single page..custom pages not for features ut cant be used the way…"
5 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service