MyBB Community Forums

Full Version: CSS Buttons for 1.X
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4
The whole reason I am loading jQuery is for pure text-based buttons, that is the whole point I'm getting at. Luckily we won't have to deal with issues such as these in 2.0.
Amazing tutorial, very informative. I'll be sure to use this in the future!
Hi Audentio
Thanks for this helpful tutorial, but there is a bit problem in multi-quote button. I copied the code in headerinclude template, CSS in global.css and the code for multi-quote you gave in the postbit_multiquote template.

The multi-quote button is working fine, but when I click/select the multi-quote button, it is not changing its color as desired. Its color remains same whether its selected or deselected. Where am I wrong??

now it is working with some tweaks
Put the following code at top of "header" template
<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>

And put this code in "headerinclude" template above {$stylesheets}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>

@Audentio : also add a:hover.large_button besides a:hover.postbit_button in the CSS stylesheet
Rather than changing the colour of the button how could I just change the text so with multiquote the text changes from 'Quote' to 'Quoted'
(2012-04-13, 04:10 PM)JimR Wrote: [ -> ]Rather than changing the colour of the button how could I just change the text so with multiquote the text changes from 'Quote' to 'Quoted'

I believe something like this would work:

<script type="text/javascript">
jQuery(document).ready(function($) {
var quoted = "Quoted";
var quote = "Quote";
if( $.cookie('multiquote') !== null ) {
    var quoted = $.cookie("multiquote");
    var quoted_split = quoted.split('|');
    jQuery.each(quoted_split, function() {
        $('#multiquote_link_' + this).addClass('multiquote_on').text(quoted);
    });
}
$('a.button_multiquote').click(function() {
    if($(this).hasClass('multiquote_on')) {
        $(this).removeClass('multiquote_on').text(quote);
    } else {
        $(this).addClass('multiquote_on').text(quoted);
    }
});
});
</script>

Change the vars at the top to whatever you want it to say.
(2012-04-13, 09:23 PM)Audentio Wrote: [ -> ]
(2012-04-13, 04:10 PM)JimR Wrote: [ -> ]Rather than changing the colour of the button how could I just change the text so with multiquote the text changes from 'Quote' to 'Quoted'

I believe something like this would work:

<script type="text/javascript">
jQuery(document).ready(function($) {
var quoted = "Quoted";
var quote = "Quote";
if( $.cookie('multiquote') !== null ) {
    var quoted = $.cookie("multiquote");
    var quoted_split = quoted.split('|');
    jQuery.each(quoted_split, function() {
        $('#multiquote_link_' + this).addClass('multiquote_on').text(quoted);
    });
}
$('a.button_multiquote').click(function() {
    if($(this).hasClass('multiquote_on')) {
        $(this).removeClass('multiquote_on').text(quote);
    } else {
        $(this).addClass('multiquote_on').text(quoted);
    }
});
});
</script>

Change the vars at the top to whatever you want it to say.

thank you
Very nice tutorial thank you for sharing.
Audentio,

Thank you for your tutorial, it was very helpful! Smile

However there is an important bug to be solved. The multi-quote system is not working 100%.

Using the editor:

You have selected one or more posts to quote. Quote these posts now or deselect them.

— When you try to "deselect them", they become functionally deselected, but graphically the buttons don't obey and everything becomes a mess. I've tried in clean installations and there is no way around. It's a bug indeed.

Thank you in advance.
Ah, I think I know a fix for that.
(2012-05-26, 04:14 PM)Audentio Wrote: [ -> ]Ah, I think I know a fix for that.

Hello! Have you found a solution?

By the way, you need to add two more templates to the list:

(2012-03-12, 02:21 PM)Audentio Wrote: [ -> ]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

These also need to be edited among the Ungrouped Templates:
  • announcement_edit
  • announcement_quickdelete

Lest they appear as images.

Regards!
Pages: 1 2 3 4