Adding Smooth Corners

This board has been archived and is no longer accepting new questions. If you have a support question for your ZetaBoard, please visit us at the new support board. Registration is free and easy.

Visit the NEW ZetaBoards Support forum!

Pages:
1
2
3

Adding Smooth Corners
Topic Started: Dec 10 2007, 04:22 PM (6,214 Views)
Nicola	Dec 10 2007, 04:22 PM Post #1
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	Adding Smooth Corners Firstly, this isn't my script, it's Seth's. This jQuery takes advantage of the script he created to give the smooth corners to areas on the blog. Please note that adding this to the #logo, #submenu or #nav will obscure the drop-down lists depending on the placement of the <!-- TOP MENU --> See the full extent of this in play here. Select 'Smooth Corners via jQuery' from the Theme selector. You'll immediately see the possibilities that are available when using this script. The jQuery Required All you need to do is add this to the end of your theme layout (or 'Above the Copyright' in the Board Template ) The jQuery Required <script type="text/javascript"> //<![CDATA[ $("#submenu").corner("15px"); //]]> </script> #submenu: You'll insert the class or ID you wish to add the effect to. On the test board you'll see that I've added it to #logo, #submenu, #submenu_bar, #wrap and .category. 15px: Input the radius of the corners. Alternatively you can set the radius per corner using this method: Example 1 $("#submenu").corner("15px 20px 25px 30px"); Top - Right - Bottom - Left respectively. Or: Example 2 $("#submenu").corner("15px 20px"); Top/bottom - Right/Left respectively. Adding more corners If you want to do it in several places, just simply add them onto a new line. Code used on test board <script type="text/javascript"> //<![CDATA[ $("#wrap").corner("15px"); $("#logo").corner("15px 40px 15px 40px"); $("#submenu").corner("15px"); $("#submenu_bar").corner("15px"); $(".category").corner("15px"); //]]> </script> Obviously this is pretty nifty, if used well you could eradicate the need for image borders. It works in every commonly used browser. It even works in IE (if you've over-gasped, I apologise) Now there is no excuse for not doing something quite pretty with your themes :P. Enjoy!



Syyrax	Dec 10 2007, 05:56 PM Post #2
Hmm.. Posts: 122 Group: Members Member #284 Joined: Dec 1, 2007 What Browser are you using? Firefox 3	Very nice Nicola, keep up the good work.



Chuck	Dec 11 2007, 03:39 AM Post #3
ThaDon Posts: 51 Group: Members Member #438 Joined: Dec 4, 2007 What Browser are you using? Firefox 1.5	Thanks Nicola



Tim	Dec 11 2007, 04:30 AM Post #4
Timmeh Posts: 506 Group: Members Member #38 Joined: Nov 27, 2007 What Browser are you using? Firefox 3	You can apply styling on the corners as well. Heres a list of them: http://methvin.com/jquery/jq-corner-demo.html



badtzmaru	Dec 11 2007, 01:10 PM Post #5
Member Posts: 447 Group: Members Member #130 Joined: Nov 28, 2007 What Browser are you using? Firefox 2	Cooool... _ I can't wait to see future themes implement this!! The different kinds of borders are so cool! tracks topic in case she ever tries to skin =_=



DynamicIP	Dec 11 2007, 01:35 PM Post #6
I'm known as Nor Posts: 194 Group: Banned Member #398 Joined: Dec 3, 2007 What Browser are you using? Firefox 1.5	Preview?



Nicola	Dec 11 2007, 02:42 PM Post #7
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	Tim Dec 11 2007, 04:30 AM You can apply styling on the corners as well. Heres a list of them: http://methvin.com/jquery/jq-corner-demo.html ! I remember Seth showing me that list months ago, hehe Quote: Preview? You know it wouldn't hurt to actually read my post. I linked to my test board which has an extremely apparent preview all over it.



Mephiles	Dec 11 2007, 04:29 PM Post #8
Member Posts: 261 Group: Members Member #79 Joined: Nov 27, 2007 What Browser are you using? Firefox 3	Nicola. I found a bug: I did it on the logo and it makes the logo cover the dropdown menus. You can see it on my board: http://s1.zetaboards.com/Omega_Studios/index/



Nicola	Dec 11 2007, 04:31 PM Post #9
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	I have to firstly say, it's not a bug :P, because I already mentioned it doesn't work in some areas. Secondly, I can't see the problem because I am not a logged in user. Perhaps you could screenshot it?



Nicola	Dec 12 2007, 07:33 AM Post #10
Darth Vader's Sewing Instructor Posts: 6,553 Group: Support Team Member #11 Joined: Nov 27, 2007 What Browser are you using? Firefox 3 ZB Board URL http://s1.zetaboards.com/Testing/index/	Mephiles Dec 11 2007, 04:29 PM Nicola. I found a bug: I did it on the logo and it makes the logo cover the dropdown menus. You can see it on my board: http://s1.zetaboards.com/Omega_Studios/index/ I now see what you mean, I was testing this last night. Unfortunately I don't see any way around it.



1 user reading this topic (1 Guest and 0 Anonymous)


Go to Next Page
« Previous Topic · User Created Codes · Next Topic »

Pages:
1
2
3