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]]()
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]]()
So we will change all the default buttons to css buttons.
All you need to do is go to http://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!![Heart]( "Heart")
CSS3 POSTBIT BUTTONS :
Now You have changed the default buttons , you can also change ur postbit buttons also to CSS3 Style :
![[Image: 40521Untitled.jpg]]()
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 :
![[Image: 28770Untitled.jpg]](http://www.fotoshack.us/fotos/28770Untitled.jpg)
Go to
ADMINCP>TEMPLATES/STYLE>THEMES>YOUR THEMES > GLOBAL.CSS
Now ctrl+f and find "trow1" and "trow2"
Code:
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:
![[Image: 98603Untitled.jpg]](http://www.fotoshack.us/fotos/98603Untitled.jpg)
So we will change all the default buttons to css buttons.
All you need to do is go to http://www.css3buttongenerator.com , Here is the code we are using our website
Code:
.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 :
![[Image: 40521Untitled.jpg]](http://www.fotoshack.us/fotos/40521Untitled.jpg)
What you do is :
Code:
ADMINCP/TEMPLATES/STYLE/TEMPLATES/YOUR TEMPLATES/FORUMDISPLAY/FORUMDISPLAY_NEWTHREADNow remove this code <img src=........../>
and replace it with
Code:
<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 !