[TUTORIAL] Give Your MyBB Forum a CSS3 Look

[Stupid Ghost]

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"

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:

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 :



What you do is :

Code:

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

Now 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 !

[XtremeCoder]

Any live demo please?

[Spangle]

I'd actually find it quicker to create new buttons in photoshop than use that editor, then you can just upload them with the existing names, no need for all that recoding, plus with photoshop you get a lot more fonts and better effects than with the button editor you linked to.

[Leefish]

I agree that photoshop can give you nicer buttons, but as MyBB does not use sprites for the buttons each postbit button image is a http request. This is why I tend to use CSS buttons (or my own sprited images) in my themes.

[Spangle]

(01-09-2013 10:34 AM)Leefish Wrote:  I agree that photoshop can give you nicer buttons, but as MyBB does not use sprites for the buttons each postbit button image is a http request. This is why I tend to use CSS buttons (or my own sprited images) in my themes.

Good point, I was just remarking that the particular editor he linked to was very basic, there may be better ones around

[Leefish]

Yes, that is a rather basic editor. I think that it is a better idea for people who want to make their own themes and buttons and what have you to try looking at some of the many tutorials on the web.

Some of these older CSS button generators are still adding browser specific prefixes to CSS that is now part of the spec (border-radius is a good example of this).

[mrtahir]

check out this maybe this will help you
http://blog.artingenious.com/2013/03/18/...echniques/