Perfect rounded corners in MyBB
#21
This user has been denied support. This user has been denied support.
I did follow all above steps now i Cant understand from here what to do please explain me in more easy words
(2013-01-10, 04:06 AM)Jordan L. Wrote: 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.
Reply
#22
(2013-05-03, 12:01 PM)Rana Anas Wrote: I did follow all above steps now i Cant understand from here what to do please explain me in more easy words
(2013-01-10, 04:06 AM)Jordan L. Wrote: 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.

1. Login admin control panel
2. Navigate to: Templates & Styles(top navigation) -> Default (Use the drop down menu and select: Options -> Edit Theme) -> Find global.css in the table and select: Options -> Edit Style -> Click on the Edit Stylesheet: Advance Mode
Reply
#23
Don't forget while using this, if you don't notice changes clear your cache. If you use cloudflare, you'll have to purge the cache.
Reply


Forum Jump:


Users browsing this thread: 3 Guest(s)