MyBB Community Forums

(2014-03-27, 01:23 AM)thexshadow Wrote: [ -> ]

(2014-03-27, 12:33 AM)Billie Joe Armstrong Wrote: [ -> ]Thank you

---

I just tryed that thing and it only added text

You have to make sure you add the css to your global style sheet.

yup i did

Post your css button code and the template you edited here.

(2014-03-27, 01:30 AM)thexshadow Wrote: [ -> ]Post your css button code and the template you edited here.

Template: email

<a href="member.php?action=emailuser&amp;uid={$post['uid']}" class="postbit">email</a>

Css:

.cssbuttons {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    font-family: Arial;
    color: #ffffff !important;
    font-size: 11px;
    background: #1B511B;
    padding: 2px 6px 2px 6px;
    text-decoration: none;
}

.cssbuttons:hover {
    background: #0F7B00;
    text-decoration: none;
}



<style type="text/css">
.postbit {
	-moz-box-shadow:inset -3px 1px 0px -8px #000000;
	-webkit-box-shadow:inset -3px 1px 0px -8px #000000;
	box-shadow:inset -3px 1px 0px -8px #000000;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5834bb), color-stop(1, #341685) );
	background:-moz-linear-gradient( center top, #5834bb 5%, #341685 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5834bb', endColorstr='#341685');
	background-color:#5834bb;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0px;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:bold;
	font-style:italic;
	height:40px;
	line-height:40px;
	width:116px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px -3px 28px #000000;
}
.postbit:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #341685), color-stop(1, #5834bb) );
	background:-moz-linear-gradient( center top, #341685 5%, #5834bb 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#341685', endColorstr='#5834bb');
	background-color:#341685;
}.postbit:active {
	position:relative;
	top:1px;
}</style>
/* This button was generated using CSSButtonGenerator.com */

outcome :

<a href="member.php?action=emailuser&amp;uid={$post['uid']}" class="postbit">email</a>

The above code looks good.

.cssbuttons {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    font-family: Arial;
    color: #ffffff !important;
    font-size: 11px;
    background: #1B511B;
    padding: 2px 6px 2px 6px;
    text-decoration: none;
}

.cssbuttons:hover {
    background: #0F7B00;
    text-decoration: none;
}

Remove the above and replace with the below.

.postbit {
	-moz-box-shadow:inset -3px 1px 0px -8px #000000;
	-webkit-box-shadow:inset -3px 1px 0px -8px #000000;
	box-shadow:inset -3px 1px 0px -8px #000000;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5834bb), color-stop(1, #341685) );
	background:-moz-linear-gradient( center top, #5834bb 5%, #341685 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5834bb', endColorstr='#341685');
	background-color:#5834bb;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0px;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:bold;
	font-style:italic;
	height:40px;
	line-height:40px;
	width:116px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px -3px 28px #000000;
}

.postbit:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #341685), color-stop(1, #5834bb) );
	background:-moz-linear-gradient( center top, #341685 5%, #5834bb 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#341685', endColorstr='#5834bb');
	background-color:#341685;
}

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

that worked thank you also how do i add all the buttons?

Ok, so say you want to change "postbit_quote" (which is the reply button in posts).

You would change this:

<a href="newreply.php?tid={$tid}&amp;replyto={$post['pid']}"><img src="{$theme['imglangdir']}/postbit_quote.gif" alt="{$lang->postbit_quote}" title="{$lang->postbit_quote}" /></a>

To this:

<a href="newreply.php?tid={$tid}&amp;replyto={$post['pid']}" class="postbit">Quote</a>

So, the only thing you have to do is remove everything in the <img> tag and add class="postbit" to the <a> tag.

ahh Thank you