Perfect rounded corners in MyBB

Perfect rounded corners in MyBB - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Perfect rounded corners in MyBB (/thread-132513.html)

Pages: 1 2 3

Perfect rounded corners in MyBB - Jordan L. - 2013-01-10

This thread was originally published on Animaus.com.

Here's the complete tutorial on rounding corners on MyBB. This will result in perfect corners across all the aspects of MyBB - including the User CP, Mod CP, index, showthread and User Profiles. I hope you enjoy it. Smile

Note: There is only one template edit required for this tutorial - anyone can do it!

Previews:

Process:
First off you're going to need to go in to your Admin CP. Click on the top links to Templates and Style and click on your theme. For this tutorial I'll be using the MyBB default theme. From there, head in to global.css and follow the next few steps.

Add this to your .tborder class:

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

Add this to your .thead class:

	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;

Add this to your .tfoot class:

	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;

Great! Now you've completed half of the tutorial. By now you should see some significant changes in your theme. But there's still a few bugs float around - for example if you go to your User CP / Mod CP / Profile - or even looking at a thread it doesn't look too good. That's what these handy CSS hacks are for. 8)

Click on Edit Stylesheet: Advanced Mode on your global.css file and add the follow:

/* Selects the bottom lefthand corner of your tables. */
tr:last-child > .trow1:first-child, tr:last-child > .trow2:first-child,  tbody:last-child tr:last-child > .tcat:first-child {
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
}

/* Selects the bottom righthand corner of your tables. */
tr:last-child > .trow1:last-child, tr:last-child > .trow2:last-child{
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
}

/* Selects any table with the ID containing 'post' and gets rid of the rounding - this is for the showthread template. */
table[id*="post_"], td.post_buttons, tborder.posthead, tbody[id*="usercpp"] > tr:last-child > td, tbody[id*="modcpforums"] > tr:last-child > td{
	-webkit-border-radius: !important;
	-moz-border-radius: 0!important;
	border-radius: 0!important;
}

/* The custom template ID we added in to get rid of the ugly rounding on the showthread .thead */
table[id="notop"]{
	-webkit-border-bottom-right-radius: 0!important;
	-webkit-border-bottom-left-radius: 0!important;
	-moz-border-radius-bottomright: 0!important;
	-moz-border-radius-bottomleft: 0!important;
	border-bottom-right-radius: 0!important;
	border-bottom-left-radius: 0!important;
}

/* The custom template ID we added in to get rid of the ugly rounding on the showthread .tfoot */
table[id="nobottom"]{
	-webkit-border-top-left-radius: 0!important;
	-webkit-border-top-right-radius: 0!important;
	-moz-border-radius-topleft: 0!important;
	-moz-border-radius-topright: 0!important;
	border-top-left-radius: 0!important;
	border-top-right-radius: 0!important;
}

Scroll down in that box! I've added comments to explain what each segment does.
Edit: Added code to round the .tcat used in the Calendar. Thanks to Ryuuseiken for pointing it out.

By now everything should be looking pretty awesome. There's just one more step left! Open your Templates and go on to your themes' template set. Scroll down and find the Showthread Templates and click on it. From there, click on the showthread template set.

Find:

	{$ratethread}
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;">

Replace with:

	{$ratethread}
	<table border="0" id="notop" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;">

Find:

	<div id="posts">
		{$posts}
	</div>
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top-width: 0;">

Replace with:

	<div id="posts">
		{$posts}
	</div>
	<table border="0" id="nobottom" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top-width: 0;">

And you're done. Now you have beautiful rounding wherever you go on the forum. Toungue

If there's a problem or you need help with something just let me know. If I helped you, don't be afraid to +Rep. Smile

RE: Perfect rounded corners in MyBB - Jordan L. - 2013-01-10

Oh wow, even though I was the second post in the thread I didn't even realise that. Toungue

Sorry for the double post. I guess the main differences between my thread and Damion's is the experience level - Damion's seems to have far more complicated and advanced CSS whereas mine seems to be a bit more simple and does the job. Toungue

It's up to the users which one to use, though. Also, mine does not have any issues (at the time of writing this post) with other pages etc.

RE: Perfect rounded corners in MyBB - Adobe - 2013-01-10

(2013-01-10, 05:40 AM)Jordan L. Wrote: Oh wow, even though I was the second post in the thread I didn't even realise that. Sorry for the double post. I guess the main differences between my thread and Damion's is the experience level - Damion's seems to have far more complicated and advanced CSS whereas mine seems to be a bit more simple and does the job. It's up to the users which one to use, though. Also, mine does not have any issues (at the time of writing this post) with other pages etc.

No the difference is the previews. He didn't add any but you did. Thanks to your tutorial, my forum now has a sexy look.

Screenshots
http://puu.sh/1LTSa
http://puu.sh/1LTSt
http://puu.sh/1LTTa

RE: Perfect rounded corners in MyBB - Jordan L. - 2013-01-10

Ah, well I'm glad I helped then! Smile

RE: Perfect rounded corners in MyBB - Spangle - 2013-01-10

This looks great on my forum now,

How do you make the buttons on the navbar have rounded corners

I guess I have to alter the CSS but I have no idea where to start

RE: Perfect rounded corners in MyBB - Jordan L. - 2013-01-10

Could we have the URL to your site? It's easier to see what to edit if we can have a look at it. Toungue

RE: Perfect rounded corners in MyBB - Jason L. - 2013-01-10

You dont need browser prefixes anymore :p

RE: Perfect rounded corners in MyBB - Jordan L. - 2013-01-10

Depends on who the user is, someone may not have updated their browser. Wink

Edit: Original post has been updated to compensate for the .tcat rounding in the Calendar. Smile

RE: Perfect rounded corners in MyBB - faviouz - 2013-01-10

(2013-01-10, 11:32 AM)Jason L. Wrote: You dont need browser prefixes anymore :p

http://css3please.com/ still recommends using the webkit prefix. Unless you're not targeting Safari 3-4, iOS 1-3.2 or Android ≤1.6 at all.

Regardless, border-radius is such an insignificant detail in a design that I would just go ahead and get rid of all the vendor prefixes. Browsers which don't support it will just gracefully degrade to pointy edges.

RE: Perfect rounded corners in MyBB - Jordan L. - 2013-01-10

I wouldn't say it's insignificant at all. I think it can really polish off a design. Smile