Use of Materialize buttons in MyBB ?

[James_]

Hi, 

TL : DR - How are buttons created in MyBB themes ? And how can I override them to use a button from MaterializeCSS ?

Im interested in integrating Materializecss with a theme I would like to create for MyBB.

(Disclaimer: Not done this before, and new to php, css and html)

I was making reasonable progress and am able to place some Materialize elements where I want them, with the style I want.

However, I have hit a brick-wall, try as I might, I cannot figure this out.

For context, I am editing , and am concentrating on the buttons Edit, Delete, Reply for posts, the main block of code is

Postbit Templates > postbit

<div class="post_controls_default">

<div class="postbit_buttons author_buttons float_left">
    {$post['button_www']}{$post['button_pm']}{$post['button_rep']}
</div>
    <a class="waves-effect waves-teal ban-flat">Material Button</a>
    <a class="btn-flat"><i class="material-icons left">edit</i>Edit Post</a>
<p>
  <input type="checkbox" class="filled-in" id="test5" />
  <label for="test5">Material Checkbox</label>
</p>
<div class="postbit_buttons post_management_buttons float_right">
    {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}

</div>

And the styling appears to be handled by

global.css

.postbit_buttons > a:active {
    display: inline-block;
    color: #2c82c9;
    padding: 7px 16px 7px 14px;
    margin: 5px 2px 2px;
    font-size: 12px;
    border: 1px solid #bed3e4;
}

Now the line of code that causing me to get confused

{$post['button_edit']}

Whats confusing me is, with my limited experience, I believe in order to create a button there needs to be a statement something like

<button type="button">Click Me!</button>

However there is no such declaration here. If I remove the {$post['button_edit']} code, then the button is removed. If I put in another {$post['button_edit']} then I get another edit button, leading me to believe the declaration is being built somewhere and I think $post has something to do with it.

After searching for everything I can think of, I have come up pretty dry. Found cross reference's to language translations and such like. So $post appears to be creating the button, and also supplying the text in the right language.

I found one block of code that looked hopeful in 'jquery.plugins' and 'jquery.plugins_e', at line 1030.

            // iterate over each button and create them
        for(i=0, l=buttons.length; i<l; i++){
            v = buttons[i],
            defbtn = stateobj.focus === i || (isNaN(stateobj.focus) && stateobj.defaultButton === i) ? (opts.prefix + 'defaultbutton ' + opts.classes.defaultButton) : '';

            state += '<button class="'+ opts.classes.button +' '+ opts.prefix + 'button '+ defbtn;

            if(typeof v.classes !== "undefined"){
                state += ' '+ ($.isArray(v.classes)? v.classes.join(' ') : v.classes) + ' ';
            }

            state += '" name="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" value="' + v.value + '">' + v.title + '</button>';
        }

This appears to be building a html declaration, but I can't find any relation to my actual problem (maybe through inexperience?) I tried changing some lines in ,js code to see what effect it had, but no effect was had on what I wanted.

I want to use material buttons throughout, and not the standard buttons and don't know the best way to approach this. Is there a way of over-riding the default buttons in someway. So standard buttons get replaced by Materialisze buttons.

I could just remove the {$post['button_edit']} and put my materialise code there, but I'm not sure how I would get the text / translation this way.

I don't have any problem going through and editing lots of templates and inserting all the materialize buttons where they need to be, if that is the way it needs to be done, but it just doesn't seem very efficient.

Any advice greatly appreciated.

[Ashley1]

You only need to make CSS adjustments. However there are various places you need to edit in CSS3.css + global.css. Alternatively you can define a new button class

<input type="submit" class="button" name="submitbutton" value="{$lang->update_post}" tabindex="3" accesskey="s" />

[James_]

Thanks, Ashley.

I hope you can appreciate that I am new to this, so learning, and just trying to get an understanding of how the application stack works, in order to have an understanding of how to make good decisions.

I am answering some of my own questions here, at it is useful for reference, and others may find it useful. Also please point out if I am making any wrong assumptions.

I Suppose my question can broke down into three parts. 

1. What does $post do ?
Im assuming this is a parser of sorts (defined in inc\functions_post.php, by the look of it). It appears this will give me a translated string for the passed parameter. It may also consider user privileges when determining if the requested content is available to the user requesting it. Still looking at that.

When a "button_xxx" is passed, it appears this will also pass us on to the appropriate page to build the button, as defined in line 560 of functions_post.php

eval("\$post['button_edit'] = \"".$templates->get("postbit_edit")."\";");

^ This is what I was missing at first, now I see when calling $post['button_edit'] we are getting passed onto postbit_edit, and this is where the button code resides.


2. Where are the buttons defined ?
In this case postbit_edit, as outlined above.


3. How can I override default buttons ?
My question is, is there a way to override default buttons, so they automatically inherit the MaterializeCSS buttons. Or am I going to have to go through all code finding instances of buttons being defined, and replace them with the appropriate code to use MaterializeCSS, such as

<a class="waves-effect waves-teal ban-flat">Material Button</a>
<a class="btn-flat"><i class="material-icons left">edit</i>Edit Post</a>

You gave the code 

<input type="submit" class="button" name="submitbutton" value="{$lang->update_post}" tabindex="3" accesskey="s" />

but I'm not sure where your implying that code should be placed, and if that would act as an override of sorts, for default buttons.

Thanks in advance again for any help

[Ashley1]

Anything $ is generally a variable. The nice thing about MyBB is that the code is fairly well separated from the HTML. The HTML is contained in the template structure almost completely. So you don't need to concern yourself with the code you refer to for now.

Here is an exercise you can follow on a test forum to create buttons with Materialize.

1) In CSS3.css

Find:

button,
input.button,

and delete it.

2) In global.css

Find:

button,
input.button {
	padding: 3px 8px;
	cursor: pointer;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	background: #eee url(images/buttons_bg.png) repeat-x;
	border: 1px solid #bbb;
	color: #333;
	outline: 0;
}

button:hover,
input.button:hover {
	border-color: #aaa;
}

and delete it:

3) Contact template under ungrouped templates:

Find:

<input type="submit" class="button" name="submit" value="{$lang->contact_send}" />

and replace it with:

  <button class="btn waves-effect waves-light" type="submit" name="submit" value="{$lang->contact_send}">{$lang->contact_send}
    <i class="material-icons right">send</i>
  </button>

4.) Make sure that you have included the CSS and JS files that materialize require:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

goes in headerinclude template under ungrouped templates

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

goes in the footer.

Now press CTRL+F5, and view the change to the button on the contact page.

[James_]

Hi Ashley,

Thanks again for your reply, greatly appreciated.

I understand that generally speaking, I should not need to concern myself with the .php code, this was just a method I used to try and get an understanding of what was actually happening, and how $post['button_edit'] resulted in me getting a button.

It seems pretty obvious now that postbit_edit is where this lives, but it's all a learning process

With regards to your points, I would just like to clarify the reasoning behind the decisions you made.

Points 1 & 2

I assume this is as I don't want to use standard buttons, theres no need for the css that defines them. If it remained, would this interfere with my use of Materialise buttons, or is this just for code tidiness ?

Point 3

Replacing the standard button definition with the Materialize definition.

I suppose this answers question 3 in my previous post. I will need to go through and replace all instances of button definitions, with Materialize definitions. There is no way to do a system wide override of sorts, i.e. all buttons automatically use the Materialize buttons (inheritance of sorts).

Point 4

Already done this


Thanks again for your help, I feel like I have a better understanding of how to tackle this now.

Any other advice is welcome

[Ashley1]

You have to delete the standard definitions for button otherwise it will clash with the materialize button. You can't have both MyBB buttons and materialize buttons in the same project.

There is no easy way to replace the buttons, because there are different types of buttons. When you get to the postbit buttons you will see there is still more of the stock CSS to delete. And then there are still other types of buttons.

[James_]

Awesome.

Thanks so much, I can now push forward with this.