MyBB Community Forums

Pages: 1 2 3 4

Hey all, this is my attempt at answering all the questions people have about CSS buttons and MyBB 1.X by creating a brief tutorial.

The tutorial itself isn't very difficult, but it will run you 10 minutes or so. Therefore, I have compiled an .XML starter skin for those who want to jump right into it with the buttons already working, so if you want to do that just skip to the bottom. Credit to BitzDefender for the original tutorial.

Step 1: Load jQuery
Step 2: Load jQuery Cookies Plugin
Step 3: Add a small script underneath that will basically find the cookie that stores the post ids marked as "quoted", splits the array, finds the posts, highlights the button, etc.

Steps 1-3 are here (add this to the top of the Ungrouped Templates > headerinclude template):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.cookie=function(name,value,options){if(typeof value!="undefined"){options=options||{};if(value===null){value="";options.expires=-1;}var expires="";if(options.expires&&(typeof options.expires=="number"||options.expires.toUTCString)){var date;if(typeof options.expires=="number"){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}expires="; expires="+date.toUTCString();}var path=options.path?"; path="+(options.path):"";var domain=options.domain?"; domain="+(options.domain):"";var secure=options.secure?"; secure":"";document.cookie=[name,"=",encodeURIComponent(value),expires,path,domain,secure].join("");}else{var cookieValue=null;if(document.cookie&&document.cookie!=""){var cookies=document.cookie.split(";");for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+"=")){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}return cookieValue;}};
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {

if( $.cookie('multiquote') !== null ) {
    var quoted = $.cookie("multiquote");
    var quoted_split = quoted.split('|');
    jQuery.each(quoted_split, function() {
        $('#multiquote_link_' + this).addClass('multiquote_on');
    });
}

$('a.button_multiquote').click(function() {
    if($(this).hasClass('multiquote_on')) {
        $(this).removeClass('multiquote_on');
    } else {
        $(this).addClass('multiquote_on');
    }
});

});
</script>

Step 4: Open up all of the following templates and edit them how you see fit, but the key is to give each a class that you can style easily. What I recommend is giving each a generic class (like "postbit_button") and a specific class (like "button_email"). For large buttons I used "large_button" instead of postbit_button so that way I can make those buttons a bit larger.

postbit_delete_pm
postbit_edit
postbit_email
postbit_find
postbit_forward_pm
postbit_multiquote
postbit_pm
postbit_quickdelete
postbit_quote
postbit_rep_button
postbit_reply_pm
postbit_replyall_pm
postbit_report
postbit_warn
postbit_www
forumdisplay_newthread
reputation_addlink
showthread_newreply
showthread_newreply_closed

Here is an example of postbit_pm:

<a href="private.php?action=send&amp;uid={$post['uid']}" class="postbit_button button_pm"  title="{$lang->postbit_pm}">PM</a>

The most important template is postbit_multiquote template, so I've included that here as well, I recommend using this same one. Please note that we need to hide the <img> with CSS (see Step 5) in order for things to work properly.

<a href="javascript:Thread.multiQuote({$post['pid']});" style="display: none;" id="multiquote_link_{$post['pid']}" class="postbit_button button_multiquote" title="{$lang->postbit_multiquote}"><img src="{$theme['imglangdir']}/postbit_multiquote.gif" alt="{$lang->postbit_multiquote}" title="{$lang->postbit_multiquote}" id="multiquote_{$post['pid']}" />Quote</a>
<script type="text/javascript">
//<!--
	$('multiquote_link_{$post['pid']}').style.display = '';
// -->
</script>

Note the use of class="" and title="", as well as the fact that you must enter something in between the <a></a> tags, I neglected to use the lang vars simply because MyBB does not have uniform lang vars for the buttons and I didn't really want to create new ones, if you want to there are tutorials out there on creating your own language phrases and you can do it that way.

Step 5: Add some CSS to give the buttons dimension.

Here is what I used:

a.postbit_button, a.large_button {
	display: inline-block;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	background: #2989d8;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #2989d8 0%, #1e5799 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(100%,#1e5799));
	background: -webkit-linear-gradient(top,  #2989d8 0%,#1e5799 100%);
	background: -o-linear-gradient(top,  #2989d8 0%,#1e5799 100%);
	background: -ms-linear-gradient(top,  #2989d8 0%,#1e5799 100%);
	background: linear-gradient(top,  #2989d8 0%,#1e5799 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#1e5799',GradientType=0 );
	padding: 2px 6px;
	text-align: center;
	color: #FFF !important;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	font-weight: bold;
	font-size: 10px;
	margin: 1px;
}

a.large_button {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 5px 10px;
	text-align: center;
	font-size: 13px;
}

a:hover.postbit_button {
	background: #6db3f2;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
	background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	background: linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
	text-decoration: none;
}

a.multiquote_on {
	background: #bfd255;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZDI1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhlYjkyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzcyYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZWNiMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d));
	background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
	background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
	background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
	background: linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
}

a:hover.multiquote_on, a.button_newreply_closed {
	background: #ff3019;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZjA0MDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
	background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
	background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
	background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
	background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

.button_multiquote img {
	display: none;
}

Please note that I have used a CSS3 gradient here that is browser compatible for all major browsers. You can create your own gradients easily here. Also recognize that I have given my multiquote button (in the postbit_multiquote template) the class of "button_multiquote". This is very important as you need to hide the image (as mentioned earlier), and you can see the code for that in the bottom 3 lines of CSS. I've also named my closed button "button_newreply_closed", so it will turn red when a thread is closed. You can get as creative with you want, you can even add icons for each button so long as you gave each button a unique identifying class name (I've done this in the .XML file, just not added any icons).

I have NOT thoroughly tested the .XML file, I did it rather quickly, so if you find a bug let me know and Ill recompile. Should all work fine though, just in case Wink

Enjoy!
Mike

Thank You

Nice tut, though I'd rather not load jQuery purely for CSS buttons. I simply retain the multiquote images (as plus and minus icons with a minuscule file size) rather than load a whole new JS library, plugin and file. That's purely a matter of personal preference though.

Thank you, would test out in later run.

Thanks for the tut,but css buttons without jquery can also be done.
I use it for most of my themes,and multiquote also works.
i wish i will add the tut Smile

,
anyways grt job Smile

(2012-03-12, 05:53 PM)envira Wrote: [ -> ]Thanks for the tut,but css buttons without jquery can also be done.
I use it for most of my themes,and multiquote also works.
i wish i will add the tut ,
anyways grt job

can you tell us how?!

Yes, please tell me how. That is to say, I know I can do it with regular Javascript, but you won't get the nice "multiquote_on" class (you need to edit raw JS style information, and I find people prefer CSS over that as CSS is a much simpler language of course). I'm sure I can do it with prototype, but I hate prototype and refuse to work with it Toungue

(2012-03-12, 10:55 PM)Audentio Wrote: [ -> ]Yes, please tell me how. That is to say, I know I can do it with regular Javascript, but you won't get the nice "multiquote_on" class (you need to edit raw JS style information, and I find people prefer CSS over that as CSS is a much simpler language of course). I'm sure I can do it with prototype, but I hate prototype and refuse to work with it

ohh sure......its just a matter of few minutes.
Actually the thing is that you need only 2 images,which i mean icons.
you can see it in here.
anyways i am making a quick tutorial on that.

thanks
regards,
envira

I understand the icon part, I'm talking about having the multiquote work without using the default way they have it setup. That is to say, text based, not using icons. As that is what this tutorial is about. Sure you can make the image look like it would in text, but that is cheating Wink

(2012-03-13, 02:28 AM)Audentio Wrote: [ -> ]I understand the icon part, I'm talking about having the multiquote work without using the default way they have it setup. That is to say, text based, not using icons. As that is what this tutorial is about. Sure you can make the image look like it would in text, but that is cheating

Hmm,my bad,but the tut i made doesnt require jquery,its all css3 and even it has hover effects by transitions Smile

.
I dont think its cheating lol, Wink

,its just an alternate method Smile

Pages: 1 2 3 4

Audentio

Yaldaram

Euan T

crazy4cs

envira

andrewjs18

Audentio

envira

Audentio

envira