2013-01-06, 04:17 AM
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 :
![[Image: 28770Untitled.jpg]](https://camo.mybb.com/8e0225942e794374dab486003eb6680f2bc9f9b8/687474703a2f2f7777772e666f746f736861636b2e75732f666f746f732f3238373730556e7469746c65642e6a7067)
Go to
ADMINCP>TEMPLATES/STYLE>THEMES>YOUR THEMES > GLOBAL.CSS
Now ctrl+f and find "trow1" and "trow2"
[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:
![[Image: 98603Untitled.jpg]](https://camo.mybb.com/1ea8f1c8043b0559c56d2d3fae608b855dd30330/687474703a2f2f7777772e666f746f736861636b2e75732f666f746f732f3938363033556e7469746c65642e6a7067)
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
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 :
![[Image: 40521Untitled.jpg]](https://camo.mybb.com/9c2a5465cf8abc6db0b4a414427c4aeb7e7fe8eb/687474703a2f2f7777772e666f746f736861636b2e75732f666f746f732f3430353231556e7469746c65642e6a7067)
What you do is :
Now remove this code <img src=........../>
and replace it with
Done ! You do this same to all postbit templates liked edit,find etc.
Checkout the outcome.
Enough of views , start replying now !
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_NEWTHREADNow 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 !
