Perfect rounded corners in MyBB
#1
Heart 
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
Reply
#2
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.
Reply
#3
This user has been denied support. This user has been denied support.
(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. 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.

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
Reply
#4
Ah, well I'm glad I helped then! Smile
Reply
#5
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
[Image: userbar_zpsfd84f02d.png]

I'm English, I use an "s" not a "z", the spell checker is wrong not me !!
Reply
#6
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
Reply
#7
You dont need browser prefixes anymore :p
Reply
#8
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
Reply
#9
(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.
Reply
#10
I wouldn't say it's insignificant at all. I think it can really polish off a design. Smile
Reply


Forum Jump:


Users browsing this thread: 7 Guest(s)