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.
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:
Add this to your .thead class:
Add this to your .tfoot class:
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:
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:
Replace with:
Find:
Replace with:
And you're done. Now you have beautiful rounding wherever you go on the forum.
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.
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.
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;
}
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.
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.
This user has been denied support.
