[TUTORIAL] Give Your MyBB Forum a CSS3 Look

[Stupid Ghost]

This user has been denied support.

Every Forum Admin wants to make their forum Look Advanced and Modern.I've been modifying my forum to CSS3 Standards and thought it would be really nice to share here :

So What we start ? Well , I want to talk about how to give your forum rows an excellent CSS3 look with box-shadows :



So , we see that a cool shadow behind the forum row and also a block like rows. To get this ,


CSS3 FORUM ROWS :



Go to

ADMINCP>TEMPLATES/STYLE>THEMES>YOUR THEMES > GLOBAL.CSS

Now ctrl+f and find "trow1" and "trow2"

background: #ffffff;
	background: rgb(252,252,252); /* Old browsers */  background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */  
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */  
	background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */  background: -ms-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */  background: linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(247,247,247,1) 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */;	
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ddd;
    padding: 15px;
color: #000;
    vertical-align: middLe;

[b]So That is current CSS3 Standard look . Paste the above code replacing in trow1 and trow2 to get a look like in the picture.

Done?

Ok Now we gonna see how to change this :

CSS3 DEFAULT BUTTONS:

So we will change all the default buttons to css buttons.

All you need to do is go to www.css3buttongenerator.com , Here is the code we are using our website

.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #7d7d7d;
	-webkit-box-shadow:inset 0px 1px 0px 0px #7d7d7d;
	box-shadow:inset 0px 1px 0px 0px #7d7d7d;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1E90FF), color-stop(1, #1E90FF) );
	background:-moz-linear-gradient( center top,#1E90FF 5%, #1E90FF 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E90FF', endColorstr='#1E90FF');
	background-color:#00b3ee;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #00b3ee;
	display:inline-block;
	color:#f5e9f5;
	font-family:Georgia;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00b3ee), color-stop(1, #00b3ee) );
	background:-moz-linear-gradient( center top, #00b3ee 5%, #00b3ee 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b3ee', endColorstr='#00b3ee');
	background-color:#00b3ee;

}.button:active {
	position:relative;
	top:1px;
		

But this code gives BLUE CSS3 buttons , just change the background color to your forum color , Done!

CSS3 POSTBIT BUTTONS :
Now You have changed the default buttons , you can also change ur postbit buttons also to CSS3 Style :



What you do is :

ADMINCP/TEMPLATES/STYLE/TEMPLATES/YOUR TEMPLATES/FORUMDISPLAY/FORUMDISPLAY_NEWTHREAD

Now remove this code <img src=........../>
and replace it with

<input type="button" class="button" value="+Post a New Thread">

Done ! You do this same to all postbit templates liked edit,find etc.
Checkout the outcome.

---

Enough of views , start replying now !