Current time: 07-30-2014, 09:15 PM Hello There, Guest! (LoginRegister)


Post Reply 
 
Thread Rating:
  • 2 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[TUTORIAL] Give Your MyBB Forum a CSS3 Look
01-06-2013, 04:17 AM (This post was last modified: 01-06-2013 12:48 PM by Stupid Ghost.)
Post: #1
Heart [TUTORIAL] Give Your MyBB Forum a CSS3 Look
This user has been denied support. 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 :



[Image: 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]
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! 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 :
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 !
Find all posts by this user
Quote this message in a reply
01-08-2013, 10:27 AM
Post: #2
RE: [TUTORIAL] Give Your MyBB Forum a CSS3 Look
Any live demo please?
Find all posts by this user
Quote this message in a reply
01-09-2013, 10:24 AM
Post: #3
RE: [TUTORIAL] Give Your MyBB Forum a CSS3 Look
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.

[Image: userbar_zpsfd84f02d.png]

I'm English, I use an "s" not a "z", the spell checker is wrong not me !!
Find all posts by this user
Quote this message in a reply
01-09-2013, 10:34 AM
Post: #4
RE: [TUTORIAL] Give Your MyBB Forum a CSS3 Look
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.

Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved
Visit this user's website Find all posts by this user
Quote this message in a reply
01-09-2013, 10:37 AM
Post: #5
RE: [TUTORIAL] Give Your MyBB Forum a CSS3 Look
(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

[Image: userbar_zpsfd84f02d.png]

I'm English, I use an "s" not a "z", the spell checker is wrong not me !!
Find all posts by this user
Quote this message in a reply
01-09-2013, 10:43 AM
Post: #6
RE: [TUTORIAL] Give Your MyBB Forum a CSS3 Look
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).

Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved
Visit this user's website Find all posts by this user
Quote this message in a reply
03-19-2013, 01:20 AM
Post: #7
RE: [TUTORIAL] Give Your MyBB Forum a CSS3 Look
check out this maybe this will help you Smile
http://blog.artingenious.com/2013/03/18/...echniques/
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)

Contact Us | MyBB | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication