Alert AdBlock users about adblock extension

May 31, 2014, 5:42 pm

≪ Previous: Block All Tor Traffic From Your Site While Using Cloudflare

Alert to Adblock Users to deactivate extension.
YOu can insert this code on your HEADERINCLUDE --> load every page or on your HEADER / HEADER_GUEST...or INDEX --> Only main page

I'm not a programmer, I just gathered a few pieces around

Code:

<div class="YOUR_CLASS">Alerts!&nbsp;</div> // - You can remove this

<script>

(function() {

    var message = "Your Message to AdBlock Users!";

    var tryMessage = function() {

            setTimeout(function() {

                if(!document.getElementsByClassName) return;

                var ads = document.getElementsByClassName('YOUR_CLASS'),

                    ad  = ads[ads.length - 1];

  if(!ad

                    || ad.innerHTML.length == 0

                    || ad.clientHeight === 0) {

                    alert(message);

                 //window.location.href = 'http://comunidade.bf4brasil.com.br/member.php?action=register'; "//"  Redirect users to where you want - You need to remove "//"

                } else {

                    ad.style.display = 'none';

                }

            }, 1800);

        }

        if(window.addEventListener) {

            window.addEventListener('load', tryMessage, false);

        } else {

            window.attachEvent('onload', tryMessage);

        }

})();

</script>

↧

Imgur Avatar Upload

May 31, 2014, 9:52 pm

≫ Next: [Tutorial] Add an "Highlight text" button

≪ Previous: Alert AdBlock users about adblock extension

1 - Create new stylesheet wit name "avtup.css" and add (repeat this step to all templates that you use)

PHP Code:

.avtup {
display:inline-block;
padding:1.5px 5px;
margin:2px;
font-size:11px;
background:#eee;
border:1px solid #ccc;
color:#555;
border-radius: 6px 6px 6px 6px;
}

.avtup a span {
background-image: none !important;
padding: 0px 3px 0px 6px;
padding-left: 3px !important;
color:rgb(85, 85, 85);
}

.avtup:hover {
border-color: #bbb !important;
}

.avtup a {
background-image: none !important;
padding: 0px 3px 0px 6px;
padding-left: 3px !important;
color:rgb(85, 85, 85) !important;
text-decoration: none !important;
}

p.imgur {display: none}

.uploading p.imgur {display: inline} 

2 - Creater new file using Notepad++ with name avatarup.php and add

PHP Code:

<?php 
// Disallow direct access to this file for security reasons
if(!defined("IN_MYBB"))
{
    die("Direct initialization of this file is not allowed.<br /><br />Please make sure IN_MYBB is defined.");
}

// Plugin info
function avatarup_info ()
{
    return array(
        "name"            => "avatarup",
        "description"    => "avatarup",
        "website"        => "avatarup",
        "author"        => "avatarup",
        "authorsite"    => "avatarup",
        "version"        => "avatarup",
        "guid"             => "avatarup",
        "compatibility" => "16*"
    );
}

$plugins->add_hook("usercp_do_avatar_start", "avatarup_start");
function avatarup_start()
{
    global $mybb;
    
    if($mybb->input['imgurup'])
    {
        $file = "http://i.imgur.com/{$mybb->input['imgur']}";
        $contentLength = strlen(@file_get_contents($file));
        if ($contentLength < 65000) {
            $mybb->input['avatarurl'] = "http://i.imgur.com/{$mybb->input['imgur']}";
        }
        else {
            error("The image size exceeds the allowed limit of 65kb.");
        }
    }
}
?>

2.1 - You can change 65000 with value you want. 65000 limit to 65 KB to upload.
2.2 - Upload avatarup.php to plugin folder and active the plugin

3 - Get imgur api key: https://imgur.com/register/api_anon (if you already has key, skip this step)

4 - Creater new file using Notepad++ with name avatarup.js and add

PHP Code:

window.ondragover = function(e) {e.preventDefault()}
    window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
    function uploadavt(file) {

        /* Is the file an image? */
        if (!file || !file.type.match(/image.*/)) return;

        /* It is! */
        document.body.className = "uploading";

        /* Lets build a FormData object*/
        var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
        fd.append("image", file); // Append the file
        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
        xhr.onload = function() {
            var code = JSON.parse(xhr.responseText).data.link;
                var regExp = "/i.imgur.com/([^_]+)/?";
                var match = code.match(regExp);
                if (match&&match[1]){
                code = match[1];}
            document.getElementById('imgur').value += code;
document.getElementById('imgur2').style.display = "none";
        }
        // Ok, I don't handle the errors. An exercice for the reader.
        xhr.setRequestHeader('Authorization', 'Client-ID yourid');
        /* And now, we send the formdata */
        xhr.send(fd);
    } 

4.1 - Change yourid with key obtained in 3
4.2 - Upload avatarup.js to root/jscripts folder

5 - Open and edit usercp_avatar template
5.1 - Find

PHP Code:

{$headerinclude} 

5.2 - add after

PHP Code:

<script type="text/javascript" src="jscripts/avatarup.js"></script> 

5.3 - Find

PHP Code:

<td class="trow2" width="60%"><input type="text" class="textbox" name="avatarurl" size="45" value="{$avatarurl}" /></td>
</tr> 

5.4 - add after

PHP Code:

<tr>
<td class="trow1" width="40%"><strong>Imgur:</strong></td>
<td class="trow1" width="60%">
<form enctype="multipart/form-data" action="usercp.php" method="post">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
http://i.imgur.com/<input type="text" id="imgur" class="textbox" name="imgur" size="30" value="" /> <span class="avtup"><a href="javascript:void(0)" onclick="document.querySelector('input.imgur').click()"  title="Upload to Imgur"><span>Select file...</span></a></span><input class="imgur" style="visibility: collapse; width: 0px;" type="file" onchange="uploadavt(this.files[0])"> <p id="imgur2" class="imgur"><img src="images/spinner.gif" border="0" /></p>  <input type="checkbox" name="imgurup" value="1" /> Use Imgur.
</td>
</tr> 

http://i.imgur.com/VD5YhHF.png

↧

[Tutorial] Add an "Highlight text" button

June 5, 2014, 6:08 am

≫ Next: "Reply" or "Quote" icon confusion

≪ Previous: Imgur Avatar Upload

Some users ask me for an highlight button in the editor, so I did it. And now explain it.

MyCode
Title : Simple Highlight
Short Description : Simple Highlight using default
Regular Expression :

Code:

\[hl\](.*?)\[/hl\]

Replacement :

Code:

<span class="highlight">$1</span>

Title : Extended Highlight
Short Description : Highlight with your color
Regular Expression :

Code:

\[hl=\"?\#?([a-f0-9]{6})\"?\](.*?)\[/hl\]

Replacement :

Code:

<span style="background: #$1;padding-top: 3px;padding-bottom: 3px;">$2</span>

jscripts/editor.js
find:

Code:

{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}

Replace with:

Code:

{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors},

                {type: 'button', name: 'highlight', insert: 'highlight', dropdown: true, color_select: true, image: 'highlight.gif', draw_option: this.drawHighlightOption, options: this.colors}

find:

Code:

createToolbarContainer: function(name)

    {

Insert before:

Code:

    drawHighlightOption: function(option)

    {

        var item = document.createElement('li');

        item.extra = option.value;

        item.className = 'editor_dropdown_color_item';

        item.innerHTML = '<a style="background-color: '+option.value+'"></a>';

        return item;

    },

find:

Code:

insertList: function(type)

    {

insert before:

Code:

    insertHighlight: function(color)

    {

        selectedText = this.getSelectedText($(this.textarea));

        if(!selectedText) {

            selectedText = '';

        }

        this.performInsert("[hl="+color+"]"+selectedText+"[/hl]", "", true, false);

    },

find:

Code:

            case "video":

                this.insertVideo(extra);

                break;

insert after:

Code:

            case "highlight":

                this.insertHighlight(extra);

                break;

jscripts/editor_themes/default/stylesheet.css
find:

Code:

.messageEditor .toolbar_button_color .editor_dropdown_menu {

    width: 153px;

    height: 98px;    

    padding: 1px;

    background: #EFEFEF;

    margin-left: -1px;

}

.messageEditor .toolbar_button_color li.editor_dropdown_color_item {

    float: left;

    padding: 3px;

    margin: 1px;

    width: 11px;

    height: 11px;

}

.messageEditor .toolbar_button_color a {

    width: 9px;

    height: 9px;

    display: block;

    border: 1px solid #FFF;

}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_active {

    background: #81A2C4;

}

.messageEditor .toolbar_button_color {

    position: relative;

}

.messageEditor .toolbar_button_video {

    position: relative;

}

.messageEditor .editor_button_color_selected {

    position: absolute;

    z-index: 100;

    width: 16px;

    height: 4px;

    top: 15px;

    left: 3px;

    display: block;

    background: transparent;

}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_over {

    border: 1px solid #5296f7;

    background: transparent;

    margin: 0px;    

}

replace with:

Code:

.messageEditor .toolbar_button_color .editor_dropdown_menu, .messageEditor .toolbar_button_highlight .editor_dropdown_menu {

    width: 153px;

    height: 98px;    

    padding: 1px;

    background: #EFEFEF;

    margin-left: -1px;

}

.messageEditor .toolbar_button_color li.editor_dropdown_color_item , .messageEditor .toolbar_button_highlight li.editor_dropdown_color_item {

    float: left;

    padding: 3px;

    margin: 1px;

    width: 11px;

    height: 11px;

}

.messageEditor .toolbar_button_color a, .messageEditor .toolbar_button_highlight a {

    width: 9px;

    height: 9px;

    display: block;

    border: 1px solid #FFF;

}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_active, .messageEditor .toolbar_button_highlight li.editor_dropdown_menu_item_active {

    background: #81A2C4;

}

.messageEditor .toolbar_button_color , .messageEditor .toolbar_button_highlight {

    position: relative;

}

.messageEditor .toolbar_button_video {

    position: relative;

}

.messageEditor .editor_button_color_selected {

    position: absolute;

    z-index: 100;

    width: 16px;

    height: 4px;

    top: 15px;

    left: 3px;

    display: block;

    background: transparent;

}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_over, .messageEditor .toolbar_button_highlight li.editor_dropdown_menu_item_over {

    border: 1px solid #5296f7;

    background: transparent;

    margin: 0px;    

}

jscripts/editor_themes/default/images/highlight.gif
[Image: jrZeNTf.gif]

Feel free to create a better icon and share it, I'm not an artist Big Grin

↧

"Reply" or "Quote" icon confusion

June 9, 2014, 1:08 pm

≫ Next: Fixing the Logout Error & MYSQL Connection Errors.

≪ Previous: [Tutorial] Add an "Highlight text" button

The small "Reply" icon in the post window bothers me because users tend to think that is how they make a reply - when actually it is a reply with a quote.
So in order to let my users know that they are indeed quoting a post, I've changed the "Reply" button icon to "Quote".
Users not wishing to quote can use the big "New Reply" button.

.gif

postbit_quote.gif (Size: 1.41 KB / Downloads: 33)
Please feel free to download this icon for your own use if you so desire.

↧

Fixing the Logout Error & MYSQL Connection Errors.

June 16, 2014, 7:20 am

≫ Next: "New Thread" or "New Topic" icon replacement

≪ Previous: "Reply" or "Quote" icon confusion

Introduction:

This tutorial is for people who have troubles with logout errors & Errors in Mysql like:
[Image: Socket.png]

Fixing Cookies:

First thing first, we need to get access to our files. So we need to get a ftp client such as: Filezilla.
Once we have filezilla we login with out FTP credentials.

Next we go to the path of
/public_html/inc/settings.php
or
/inc/settings.php //Like my server//

Then we open it up with a client like notepad/notepad++ if your on windows, or if your on Mac/Linux open it up with Gedit or whatever your text editor is. Minimal is Vim(For Mac/Linux).

[Image: owrfuaZ.png]

Next look for this in your code,

Code:

$settings['cookiedomain'] = ".olddomain.com";

$settings['cookiepath'] = "/";

$settings['cookieprefix'] = "";

Now this is where people forget, you need to have the period before the domain in "Cookiedomain."

Heres an example:

Code:

$settings['cookiedomain'] = ".google.com";

$settings['cookiepath'] = "/";

$settings['cookieprefix'] = "";

I replaced mydomainwith google.

Once we have this we need to login to our Admin Panel, and go to:
ACP->Configuration->Settings->General Configuration
Make sure to fix EVERYTHING that has your old domain, in it.

These are the settings to re-update:

Code:

Board URL

Homepage URL

Cookie Domain

Once done save it and you're done with configuring your forum, to work with the new site. Smile

Fixing Connection Error:
This one is quite easy. You must go in inc/config.php
Update the query with:

PHP Code:

$config['database']['type'] = ''; //What you want for database managing. (PDO,mysql,mysqli)

$config['database']['database'] = ''; //Your Database name here
$config['database']['table_prefix'] = 'mybb_'; //A prefix if you choose to add one.

$config['database']['hostname'] = ''; //The host your sql is located at.
$config['database']['username'] = ''; //Username of the SQL database.
$config['database']['password'] = ''; //Password of the SQL user 

Once you have that all setup, you're done!

Conclusion:
In conclusion, you have successfully fixed the cookie errors, and have successfully fixed the Mysql connection error. I apologize for the color scheme I wrote this for my site before and I have a darker theme. So it looks more better on a dark scheme. If you like this tutorial please provide me some feedback and provide me anything you may want me to add/improve Wink

. Thanks!

↧

"New Thread" or "New Topic" icon replacement

June 20, 2014, 4:35 pm

≫ Next: Showgroups.php page

≪ Previous: Fixing the Logout Error & MYSQL Connection Errors.

The word "Thread" is well know to most folks - but it is still a new part of the language that many people are use to.
In fact, some forum software does not use the word "thread" for "topic" as topic is easily understood by all.
Accordingly, I'm offering this icon button for anyone to use.

.gif

newthread.gif (Size: 2.16 KB / Downloads: 46)

↧

Showgroups.php page

June 24, 2014, 9:20 pm

≫ Next: [Video] How To Install MyBB

≪ Previous: "New Thread" or "New Topic" icon replacement

Like you've probably seen on popular forums they may have a custom page to show all the custom groups. Well, here's how it is done.

First make showgroups.php and upload to root. Place the following code in it:

PHP Code:

<?php 

define('IN_MYBB', 1); require "./global.php";

add_breadcrumb("Custom Usergroups", "showgroups.php"); 

eval("\$html = \"".$templates->get("showgroups")."\";"); 

output_page($html);

?>

Once that is done go to ACP > Themes > Templates > Global Templates > New template and make a template called 'showgroups' Place the following code inside making the needed edits for each user group:

PHP Code:

<html>
<head>
<title>Current Usergroups</title>
{$headerinclude}
</head>
<body>
{$header}
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<tr>
<td class="thead"><span class="smalltext"><strong>Current Custom Usergroups</strong></span></td>
</tr>
<tr>
<td class="trow1">

<div style="width: 48%; min-height:120px; border: 1px #0E8104 solid; margin: 4px; padding: 2px; border-radius: 5px; float:left;">
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    <tr class="trow1">
    <td width="75%" border="0">
    <span><b>Usergroup</b></span><br />
    <span class="smalltext"><b>Leaders: </b>
     <a href="profile.php"><span style="color: white;">Add username(s) here</span></a><br /><a href="usercp.php?action=usergroups&amp;joingroup=8&my_post_key={$mybb->post_code}">(Join Group)</a><br /><br />Description.</span>
    </td>
    <td width="25%" align="right" valign="middle">   
    <img src="http://resources.mybb.com/images/badges/oct_13/support.png" /><br />
    </td>
    </tr>
    </table>
    </div>

</td></tr></table>
{$footer}
</body>
</html> 

If you want to add more than one usergroup, then copy and paste the usergroup box, and paste it and add a line break every time you have two usergroups on the same page. Example coding below

PHP Code:

</style>
<html>
<head>
<title>Current Usergroups</title>
{$headerinclude}
</head>
<body>
{$header}
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<tr>
<td class="thead"><span class="smalltext"><strong>Current Custom Usergroups</strong></span></td>
</tr>
<tr>
<td class="trow1">

<div style="width: 48%; min-height:120px; border: 1px #0E8104 solid; margin: 4px; padding: 2px; border-radius: 5px; float:left;">
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    <tr class="trow1">
    <td width="75%" border="0">
    <span><b>Usergroup</b></span><br />
    <span class="smalltext"><b>Leaders: </b>
     <a href="profile.php"><span style="color: white;">Add username(s) here</span></a><br /><a href="usercp.php?action=usergroups&amp;joingroup=8&my_post_key={$mybb->post_code}">(Join Group)</a><br /><br />Description.</span>
    </td>
    <td width="25%" align="right" valign="middle">   
    <img src="http://resources.mybb.com/images/badges/oct_13/support.png" /><br />
    </td>
    </tr>
    </table>
    </div>
<div style="width: 48%; min-height:120px; border: 1px #0E8104 solid; margin: 4px; padding: 2px; border-radius: 5px; float:left;">
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    <tr class="trow1">
    <td width="75%" border="0">
    <span><b>Usergroup</b></span><br />
    <span class="smalltext"><b>Leaders: </b>
     <a href="profile.php"><span style="color: white;">Add username(s) here</span></a><br /><a href="usercp.php?action=usergroups&amp;joingroup=8&my_post_key={$mybb->post_code}">(Join Group)</a><br /><br />Description.</span>
    </td>
    <td width="25%" align="right" valign="middle">   
    <img src="http://resources.mybb.com/images/badges/oct_13/support.png" /><br />
    </td>
    </tr>
    </table>
    </div>
<br>
<div style="width: 48%; min-height:120px; border: 1px #0E8104 solid; margin: 4px; padding: 2px; border-radius: 5px; float:left;">
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    <tr class="trow1">
    <td width="75%" border="0">
    <span><b>Usergroup</b></span><br />
    <span class="smalltext"><b>Leaders: </b>
     <a href="profile.php"><span style="color: white;">Add username(s) here</span></a><br /><a href="usercp.php?action=usergroups&amp;joingroup=8&my_post_key={$mybb->post_code}">(Join Group)</a><br /><br />Description.</span>
    </td>
    <td width="25%" align="right" valign="middle">   
    <img src="http://resources.mybb.com/images/badges/oct_13/support.png" /><br />
    </td>
    </tr>
    </table>
    </div>
<div style="width: 48%; min-height:120px; border: 1px #0E8104 solid; margin: 4px; padding: 2px; border-radius: 5px; float:left;">
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    <tr class="trow1">
    <td width="75%" border="0">
    <span><b>Usergroup</b></span><br />
    <span class="smalltext"><b>Leaders: </b>
     <a href="profile.php"><span style="color: white;">Add username(s) here</span></a><br /><a href="usercp.php?action=usergroups&amp;joingroup=8&my_post_key={$mybb->post_code}">(Join Group)</a><br /><br />Description.</span>
    </td>
    <td width="25%" align="right" valign="middle">   
    <img src="http://resources.mybb.com/images/badges/oct_13/support.png" /><br />
    </td>
    </tr>
    </table>
    </div>
<br>
<div style="width: 48%; min-height:120px; border: 1px #0E8104 solid; margin: 4px; padding: 2px; border-radius: 5px; float:left;">
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    <tr class="trow1">
    <td width="75%" border="0">
    <span><b>Usergroup</b></span><br />
    <span class="smalltext"><b>Leaders: </b>
     <a href="profile.php"><span style="color: white;">Add username(s) here</span></a><br /><a href="usercp.php?action=usergroups&amp;joingroup=8&my_post_key={$mybb->post_code}">(Join Group)</a><br /><br />Description.</span>
    </td>
    <td width="25%" align="right" valign="middle">   
    <img src="http://resources.mybb.com/images/badges/oct_13/support.png" /><br />
    </td>
    </tr>
    </table>
    </div>
<div style="width: 48%; min-height:120px; border: 1px #0E8104 solid; margin: 4px; padding: 2px; border-radius: 5px; float:left;">
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    <tr class="trow1">
    <td width="75%" border="0">
    <span><b>Usergroup</b></span><br />
    <span class="smalltext"><b>Leaders: </b>
     <a href="profile.php"><span style="color: white;">Add username(s) here</span></a><br /><a href="usercp.php?action=usergroups&amp;joingroup=8&my_post_key={$mybb->post_code}">(Join Group)</a><br /><br />Description.</span>
    </td>
    <td width="25%" align="right" valign="middle">   
    <img src="http://resources.mybb.com/images/badges/oct_13/support.png" /><br />
    </td>
    </tr>
    </table>
    </div>
<br>
</td></tr></table>
{$footer}
</body>
</html> 

Make sure you update the join group link.
DEMO: http://www.glitchers.net/showgroupsmybbtut.php

↧

[Video] How To Install MyBB

June 27, 2014, 3:18 am

≫ Next: [Video] How to disable friendly redirects

≪ Previous: Showgroups.php page

[Video] How To Install MyBB

Made this video on installing MyBB. I'd appreciate if you would like the video if you've found it helpful.

↧

[Video] How to disable friendly redirects

June 27, 2014, 9:14 am

≫ Next: [Tutorial] - Pure CSS star rating

≪ Previous: [Video] How To Install MyBB

[Video] How to disable friendly redirects

↧

[Tutorial] - Pure CSS star rating

June 28, 2014, 7:00 am

≫ Next: How to create backups

≪ Previous: [Video] How to disable friendly redirects

Based on Star ratings @ CSS-Tricks (credit to article author).

1. Go to ACP -> templates and styles -> templates -> <your theme template set -> Showthread templates -> showthread_ratethread and replace all content with

Code:

<div class="star_rating_container">

        <script type="text/javascript" src="jscripts/rating.js?ver=1400"></script>

        <div id="success_rating_{$thread['tid']}" style="float: left; padding-top: 2px; padding-right: 10px;">&nbsp;</div>

<strong style="float: left; padding-right: 10px;">{$lang->thread_rating}</strong>

        <div class="inline_rating">

<ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">

<li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>

<li><a class="five_stars" title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}"></a></li>

            </ul>

        </div>

</div>

and save it.

In forumdisplay templates -> forumdisplay_thread_rating replace all content with

Code:

<td align="center" class="{$bgcolor}{$thread_type_class}" id="rating_table_{$thread['tid']}">

<ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">

<li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>

<li><a class="five_stars" title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}"></a></li>

<li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}"></a></li>

            </ul>

    </td>

2. Go to ACP -> templates and styles -> templates -> <your current theme> -> star_rating.css -> edit -> advanced edit and replace all content with following one:

Code:

.star_rating_container {

   display:inline-block;

   vertical-align:middle;

   margin-right:6px;

   float:right;

   margin-top:6px;

 }

.star_rating {

     unicode-bidi: bidi-override;

     direction: rtl;

     list-style:none outside none;

     margin:0;

     padding:0;

}

.star_rating,

.star_rating li a:hover,

.star_rating .current_rating {

  vertical-align: middle;       

 }

td .star_rating {

  margin-left: 0 auto;

  width:120px;

  position:relative;

  left:-13px;

}

.star_rating li {

  margin-left:5px;

  float:right;

  unicode-bidi: bidi-override;

 }

.star_rating li a {

  color:#b9b9b9;

  text-decoration:none;

}

.star_rating li a {

  font-size:0px;

}

.star_rating li a:before {

  content: "\2605";

  font-size:14px;

} 

/*Firefox hack*/

@-moz-document url-prefix() {

.star_rating li a:before {

  font-size:18px;

  position:relative;

  top:-5px;

} 

}

.star_rating_notrated li:hover a,

.star_rating_notrated li:hover ~ li a {

  color:blue !important;

  cursor:pointer;

 }

li.current_rating[style*="20"] ~ li a.one_star,

li.current_rating[style*="40"] ~ li:nth-child(n+5) a,

li.current_rating[style*="60"] ~ li:nth-child(n+4) a,

li.current_rating[style*="80"] ~ li:nth-child(n+3) a,

li[style*="100"]~ li:nth-child(n+2) a  {

  color:#eab71f;

}

.star_rating .current_rating {

  unicode-bidi: bidi-override;

  direction: ltr;

  display:none;

  float:left;

  text-align:right;

  position:relative;

  top:1px;

  right:3px;

}

.inline_rating {

  float: left;

  vertical-align: middle;

  padding-right: 5px;

}

 .star_rating_success, .success_message {

  color: #00b200;

  font-weight: bold;

  font-size: 10px;

  margin-bottom: 10px;

 }

 td[id*="rating_table"] {

 text-align:center;

 margin:0 auto;

}

Result:

Before (default star rating image) - [Image: BQyUsQL.png]

After -

Instead of star you can use other symbols ( more info http://ikreator.com/special-characters/ ). If you are using FontAwesome remove Firefox fix from star_rating.css (FF has some font size issues with special HTML symbols)).

↧

How to create backups

June 29, 2014, 3:43 pm

≫ Next: [1.8] How add spoiler tag button with description supoort

≪ Previous: [Tutorial] - Pure CSS star rating

Little guide I made on creating backups and what each part of the backup interface does, enjoy.

↧

[1.8] How add spoiler tag button with description supoort

July 5, 2014, 11:36 pm

≫ Next: [1.8] How add imgur upload button

≪ Previous: How to create backups

Ps. This only work with latest version of mybb 1.8 Beta 2 of Github
https://github.com/mybb/mybb/archive/feature.zip

Ps2. If need modification in final version of mybb 1.8 to this work, i will update this tutorial, don´t worry.
Ps3. Plz, not request to me or send PM asking how to add buttons in the editor. I'll just ignore it. Please do not insist. Yes, i will made tutorial of imgur button.

Mybb 1.8 use SCEditor http://www.sceditor.com/
This one is WYSIWYG editor. So add new button is not easy, because WYSIWYG editor has WYSIWYG mode and Source mode, and mybb 1.6 editor has only source mode. That means you need to add code for both ways.

To add new button you have to edit the following files:

root/jscripts/bbcodes_sceditor.js
root/jscripts/sceditor/jquery.sceditor.mybb.css
root/jscripts/sceditor/editor_themes/extrabuttons.css
codebuttons (template)

1 - Edit root/jscripts/sceditor/jquery.sceditor.mybb.css (this used to style spoiler tag in WYSIWYG mode)

1.1 - Find

PHP Code:

blockquote cite {
    font-weight: bold;
    font-style: normal;
    display: block;
    font-size: 1em;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding-bottom: 3px;
} 

1.2 - Add after

PHP Code:

blockquote.spoiler:before {
    position: absolute;
    content: 'SPOILER:';
    top: -1.35em;
    left: 0;
    font-size: 0.8em;
    display: block;
    text-align: left;
    font-weight: bold;
}
blockquote.spoiler {
    margin-top: 1.5em;
    background-color: #F5F5F5;    
} 

2 - Edit root/jscripts/sceditor/editor_themes/extrabuttons.css (this is used to specify the path to the image used on the button)

2.1 - Add after all

PHP Code:

.sceditor-button-spoiler div {

  background-image:url(s.png);

}

3 - Copy s.png
.png

s.png (Size: 1.28 KB / Downloads: 102) in root/jscripts/sceditor/editor_themes/ (you can use any image in 16x16 or use attached file)

4 - Edit root/jscripts/bbcodes_sceditor.js (this used to add new command in sceditor)

4.1 - Find

PHP Code:

    /********************************************
     * Update quote to support pid and dateline *
     ********************************************/
    $.sceditor.plugins.bbcode.bbcode.set('quote', {
        format: function(element, content) {
            var    author = '',
                $elm  = $(element),
                $cite = $elm.children('cite').first(); 

4.2 - Add after

PHP Code:

            if ($(element[0]).hasClass('spoiler')) {
                var desc = '';
                if($cite.length === 1 || $elm.data('desc')) {
                    desc = $elm.data('desc') || $cite.text() ;

                    $elm.data('desc', desc);
                    $cite.remove();

                    content = this.elementToBbcode($(element));
                    desc  = '=' + desc;

                    $elm.prepend($cite);
                }

                return '[spoiler' + desc + ']' + content + '[/spoiler]';
            } 

4.3 - Find

PHP Code:

        tooltip: 'Insert a video'
    }); 

4.4 - Add after

PHP Code:

    /***********************
     * Add Spoiler command *
     ***********************/
    $.sceditor.plugins.bbcode.bbcode.set("spoiler", {
        allowsEmpty: true,
        isInline: false,    
        format: function(element, content) {
            var    desc = '',
                $elm = $(element),
                $cite = $elm.children('cite').first();

            if($cite.length === 1 || $elm.data('desc')) {
                desc = $elm.data('desc') || $cite.text() ;

                $elm.data('desc', desc);
                $cite.remove();

                content = this.elementToBbcode($(element));
                desc = '=' + desc;

                $elm.prepend($cite);
            }

            return '[spoiler' + desc + ']' + content + '[/spoiler]';
        },
        html: function (token, attrs, content) {
            var data = '';
            
            if (attrs.defaultattr) {
                content = '<cite>' + attrs.defaultattr + '</cite>' + content;
                data += ' data-desc="' + attrs.defaultattr + '"';
            }
                
            return '<blockquote' + data + ' class="spoiler">' + content + '</blockquote>';
        },
        breakStart: true,
        breakEnd: true
    });
    
    $.sceditor.command.set("spoiler", {
        _dropDown: function (editor, caller, html) {
            var $content;

            $content = $(
                '<div>' +
                    '<label for="des">' + editor._('Description (optional):') + '</label> ' +
                    '<input type="text" id="des" />' +
                '</div>' +
                '<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>'
            );

            $content.find('.button').click(function (e) {
                var    description = $content.find('#des').val(),
                    descriptionAttr = '',
                    before = '[spoiler]',
                    end = '[/spoiler]';
                
                if (description) {
                   descriptionAttr = '=' + description + '';
                   before = '[spoiler'+ descriptionAttr +']';
                }
                
                if (html) {
                    before = before + html + end;
                    end    = null;
                }
                
                editor.insert(before, end);
                editor.closeDropDown(true);
                e.preventDefault();
            });

            editor.createDropDown(caller, 'insertspoiler', $content);
        },        
        exec: function (caller) {
            $.sceditor.command.get('spoiler')._dropDown(this, caller);
        },
        txtExec: function (caller) {
            $.sceditor.command.get('spoiler')._dropDown(this, caller);
        },
    tooltip: 'Insert a spoiler'
}); 

4.5 - Find

PHP Code:

$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img'); 

4.6 - Replace

PHP Code:

$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img').remove('spoiler'); 

5 - Go to codebuttons template in ACP

5.1 - Find

PHP Code:

toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source", 

5.2 - Replace

PHP Code:

toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote,spoiler|maximize,source", 

6 - Now you need add spoiler mycode or plugin of spoiler with description support. I recommend that use plugin because plugin is nestable and mycode is not. I recommend this one http://mods.mybb.com/view/spoiler-advance . Of course you need edit plugin to work with 1.8

Find:

Code:

"compatibility" => "16*"

Replace:

Code:

"compatibility" => "1*"

If you use tapatalk and has problem with spoiler-advance so read this https://support.tapatalk.com/threads/adv...ost-133893

Preview:
http://i.imgur.com/FXSo1mv.png

↧

[1.8] How add imgur upload button

July 8, 2014, 4:00 am

≫ Next: [1.8] How add sceditor in quick reply and quick edit

≪ Previous: [1.8] How add spoiler tag button with description supoort

Ps. This only work with latest version of mybb 1.8 Beta 2 of Github
https://github.com/mybb/mybb/archive/feature.zip

Ps2. If need modification in final version of mybb 1.8 to this work, i will update this tutorial, don´t worry.
Ps3. Plz, not request to me or send PM asking how to add buttons in the editor. I'll just ignore it. Please do not insist.

1 - Get imgur api key: https://imgur.com/register/api_anon (if you already has key, skip this step)

2 - Edit root/jscripts/sceditor/editor_themes/extrabuttons.css (this is used to specify the path to the image used on the button)

2.1 - Add after all

PHP Code:

.sceditor-button-imgur div {

  background-image:url(imgur.png);

}
.sceditor-button-imgur div.imgurup {

  background-image:url(spinner.gif) !important;

}

3 - Copy imgur.png
.png

imgur.png (Size: 1.12 KB / Downloads: 19) and spinner.gif
.gif

spinner.gif (Size: 1.51 KB / Downloads: 19) in root/jscripts/sceditor/editor_themes/

4 - Edit root/jscripts/bbcodes_sceditor.js (this used to add new command in sceditor)

4.1 - Find

PHP Code:

        tooltip: 'Insert a video'
    }); 

4.2 - Add after

PHP Code:

    /*********************
     * Add imgur command *
     *********************/
    $.sceditor.command.set("imgur", {
        _imgur: function () {
            document.querySelector('textarea').insertAdjacentHTML( 'afterEnd', '<input class="imgur" style="visibility:hidden;position:absolute;top:0;" type="file" onchange="upload(this.files[0])" accept="image/*">' );
            document.querySelector('input.imgur').click();
        },
        exec: function () 
        {
            $.sceditor.command.get('imgur')._imgur();
        },
        txtExec: function() 
        {
            $.sceditor.command.get('imgur')._imgur();
        },
        tooltip: 'Upload to Imgur'
    }); 

4.3 - Add after all

PHP Code:

    /*****************************
     * Add imgur upload function *
     *****************************/
    function upload(file) {

        /* Is the file an image? */
        if (!file || !file.type.match(/image.*/)) return;
    
        /* It is! */
        document.body.className = "uploading";
        var d = document.querySelector(".sceditor-button-imgur div");
        d.className = d.className + " imgurup";
    
        /* Lets build a FormData object*/
        var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
        fd.append("image", file); // Append the file
        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
        xhr.onload = function() {
            var code = '[img]' + JSON.parse(xhr.responseText).data.link + '[/img]';
            $('#message, #signature, textarea[name*="value"]').data('sceditor').insert(code);
            var d = document.querySelector(".sceditor-button-imgur div.imgurup");
            d.className = d.className - " imgurup";
            document.querySelector('input.imgur').remove();
        }
        // Ok, I don't handle the errors. An exercice for the reader.
        xhr.setRequestHeader('Authorization', 'Client-ID your-key');
        /* And now, we send the formdata */
        xhr.send(fd);
    }; 

4.4 - Replace your-key in 4.3 with key obtained in 1

5 - Go to codebuttons template in ACP

5.1 - Find

PHP Code:

toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source", 

5.2 - Replace

PHP Code:

toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,imgur,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source", 

Preview:

http://www.dailymotion.com/video/x212n03_tut-demo_tech

↧

[1.8] How add sceditor in quick reply and quick edit

July 8, 2014, 4:55 am

≫ Next: [1.8] How limit dimension of the images in WYSIWYG mode in Sceditor

≪ Previous: [1.8] How add imgur upload button

Ps. This only work with latest version of mybb 1.8 Beta 2 of Github
https://github.com/mybb/mybb/archive/feature.zip

PHP Code:

<?php 
// Disallow direct access to this file for security reasons
if(!defined("IN_MYBB"))
{
    die("Direct initialization of this file is not allowed.<br /><br />Please make sure IN_MYBB is defined.");
}

// Plugin info
function quickadveditor_info ()
{
    return array(
        "name"            => "Quick Advanced Editor",
        "description"    => "Advanced editor in quick reply",
        "website"        => "",
        "author"        => "martec",
        "authorsite"    => "",
        "version"        => "1.0",
        "guid"             => "1.0",
        "compatibility" => "1*"
    );
}

function quickadveditor_activate()
{
    include_once MYBB_ROOT."inc/adminfunctions_templates.php";

    find_replace_templatesets(
        'showthread_quickreply',
        '#' . preg_quote('</textarea>') . '#i',
        '</textarea>{$codebuttons}'
    );

    find_replace_templatesets(
        'showthread_quickreply',
        '#' . preg_quote('<span class="smalltext">{$lang->message_note}<br />') . '#i',
        '<span class="smalltext">{$lang->message_note}<br />{$smilieinserter}'
    );
}

function quickadveditor_deactivate()
{
    include_once MYBB_ROOT."inc/adminfunctions_templates.php";

    find_replace_templatesets(
        'showthread_quickreply',
        '#' . preg_quote('</textarea>{$codebuttons}') . '#i',
        '</textarea>'
    );

    find_replace_templatesets(
        'showthread_quickreply',
        '#' . preg_quote('<span class="smalltext">{$lang->message_note}<br />{$smilieinserter}') . '#i',
        '<span class="smalltext">{$lang->message_note}<br />'
    );
}

$plugins->add_hook("showthread_start", "codebuttons");     

function codebuttons () {

    global $smilieinserter, $codebuttons;

    $codebuttons = build_mycode_inserter();
    $smilieinserter = build_clickable_smilies();

}    

?>

2 - upload quickadveditor.php to root/inc/plugins and activate.

3 - Go to codebuttons template in ACP

3.1 - Find

PHP Code:

plugins: "bbcode", 

3.2 - Add after

PHP Code:

height: 250, 

3.3 - Find

PHP Code:

    {$sourcemode}
}); 

3.4 - Add after

PHP Code:

/**********************************
 * Thread compatibility functions *
 **********************************/
if(typeof Thread !== 'undefined')
{
    var quickReplyFunc = Thread.quickReply;
    // update the textarea to the editors value before the Thread class
    // uses it for quickReply, ect.
    Thread.quickReply = function(e) {
        var editor = jQuery('#message, #signature').data('sceditor');

        if(editor)
            editor.updateOriginal();

        return quickReplyFunc.call(this, e);
}; 

Without Smilies box:

1 - Create quickadveditor.php in notepad++

PHP Code:

<?php 
// Disallow direct access to this file for security reasons
if(!defined("IN_MYBB"))
{
    die("Direct initialization of this file is not allowed.<br /><br />Please make sure IN_MYBB is defined.");
}

// Plugin info
function quickadveditor_info ()
{
    return array(
        "name"            => "Quick Advanced Editor",
        "description"    => "Advanced editor in quick reply",
        "website"        => "",
        "author"        => "martec",
        "authorsite"    => "",
        "version"        => "1.0",
        "guid"             => "1.0",
        "compatibility" => "1*"
    );
}

function quickadveditor_activate()
{
    include_once MYBB_ROOT."inc/adminfunctions_templates.php";

    find_replace_templatesets(
        'showthread_quickreply',
        '#' . preg_quote('</textarea>') . '#i',
        '</textarea>{$codebuttons}'
    );
}

function quickadveditor_deactivate()
{
    include_once MYBB_ROOT."inc/adminfunctions_templates.php";

    find_replace_templatesets(
        'showthread_quickreply',
        '#' . preg_quote('</textarea>{$codebuttons}') . '#i',
        '</textarea>'
    );
}

$plugins->add_hook("showthread_start", "codebuttons");     

function codebuttons () {

    global $codebuttons;

    $codebuttons = build_mycode_inserter();

}    

?>

2 - upload quickadveditor.php to root/inc/plugins and activate.

3.1 - Find

PHP Code:

plugins: "bbcode", 

3.2 - Add after

PHP Code:

height: 250, 

3.3 - Find

PHP Code:

    {$sourcemode}
}); 

3.4 - Add after

PHP Code:

/**********************************
 * Thread compatibility functions *
 **********************************/
if(typeof Thread !== 'undefined')
{
    var quickReplyFunc = Thread.quickReply;
    // update the textarea to the editors value before the Thread class
    // uses it for quickReply, ect.
    Thread.quickReply = function(e) {
        var editor = jQuery('#message, #signature').data('sceditor');

        if(editor)
            editor.updateOriginal();

        return quickReplyFunc.call(this, e);
}; 

Bonus: Add sceditor in quick edit

Dependence: Plugin quickadveditor.php activated.

Ps. If you will use this with tutorial imgur upload button and/or spoiler button made by me plz, performing the procedure below before other tutorials.

1 - Go to codebuttons template in ACP

Replace all:

PHP Code:

<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/editor_themes/{$theme['editortheme']}" type="text/css" media="all" />
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/editor_themes/extrabuttons.css" type="text/css" media="all" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/jquery.sceditor.bbcode.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/bbcodes_sceditor.js"></script>
<script type="text/javascript">
var partialmode = {$mybb->settings['partialmode']},
opt_editor = {
        plugins: "bbcode",
        height: 250,
        style: "{$mybb->asset_url}/jscripts/sceditor/jquery.sceditor.mybb.css?v=3.0",
        rtl: {$lang->settings['rtl']},
        locale: "mybblang",
        emoticonsEnabled: {$emoticons_enabled},
        emoticons: {
            // Emoticons to be included in the dropdown
            dropdown: {
                {$dropdownsmilies}
            },
            // Emoticons to be included in the more section
            more: {
                {$moresmilies}
            }
        },
        emoticonsCompat: true,
        toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,imgur,{$ema​il}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",
};
{$editor_language}
$(function() {
    $("#{$bind}").sceditor(opt_editor);

    MyBBEditor = $("#{$bind}").sceditor("instance");
    {$sourcemode}
});

($.fn.on || $.fn.live).call($(document), 'focus', 'textarea[name*="value"]', function () {
    $(this).sceditor(opt_editor);

    MyBBEditor = $('textarea[name*="value"]').sceditor("instance");
    {$sourcemode}
});
  
/**********************************
 * Thread compatibility functions *
 **********************************/
if(typeof Thread !== 'undefined')
{
    var quickReplyFunc = Thread.quickReply;
    // update the textarea to the editors value before the Thread class
    // uses it for quickReply, ect.
    Thread.quickReply = function(e) {
        var editor = jQuery('#message, #signature').data('sceditor');

        if(editor)
            editor.updateOriginal();

        return quickReplyFunc.call(this, e);
};
</script> 

↧

[1.8] How limit dimension of the images in WYSIWYG mode in Sceditor

July 8, 2014, 5:25 am

≫ Next: [1.8] AutoSave Draft (sisyphus)

≪ Previous: [1.8] How add sceditor in quick reply and quick edit

Ps. This only work with latest version of mybb 1.8 Beta 2 of Github
https://github.com/mybb/mybb/archive/feature.zip

Ps2. If need modification in final version of mybb 1.8 to this work, i will update this tutorial, don´t worry.
Ps3. Plz, not request to me or send PM asking how to add buttons in the editor. I'll just ignore it. Please do not insist.

Image occupies space in the editor. If large image will occupy almost the whole area of the editor and complicating the visualization of that is writing.

To avoid this we can use CSS trick in the WYSIWYG mode.

1 - Edit root/jscripts/sceditor/jquery.sceditor.mybb.css

1.1 - Find

PHP Code:

body {
    /* Needed for iOS scrolling bug fix */
    position: relative;
    overflow: auto;

    /* Needed so the cursor will be placed at the end of the content
       when the there isn't enought content to fill the full viewport */
    min-height: 100%;

    word-wrap: break-word;

} 

1.2 - Add after

PHP Code:

img {
    max-height: 400px;
    max-width: 400px;
} 

You can put another size instead of 400px.

↧

[1.8] AutoSave Draft (sisyphus)

July 18, 2014, 8:27 am

≫ Next: How to Add custom in menu bar

≪ Previous: [1.8] How limit dimension of the images in WYSIWYG mode in Sceditor

Ps. Not work with quick reply (only will work with quick reply if you use sceditor in quick reply http://community.mybb.com/thread-155797.html )

1 - Download sisyphus http://github.com/simsalabim/sisyphus/zipball/master (http://sisyphus-js.herokuapp.com/ )

2 - Extract and upload sisyphus.min.js in root/jscripts

3 - In codebuttons template

3.1 - Find:

Code:

<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/editor_themes/{$theme['editortheme']}" type="text/css" media="all" />

3.1.1 - Add below:

Code:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sisyphus.min.js"></script>

3.2 - Find:

Code:

});

</script>

3.2.1 - Replace:

Code:

});

$('form[name*="input"]').sisyphus({

    timeout: 1,

    locationBased: true,

    onSave: function() {

        MyBBEditor.updateOriginal();

    },

    onRelase: function() {

        $("#{$bind}").val('');

    }

});

</script>

If you use Sceditor in quick reply (http://community.mybb.com/thread-155797.html )

In step 3.2:

Find:

Code:

};

</script>

Replace:

Code:

};

$('form[name*="quick_reply_form"], form[name*="input"]').sisyphus({

    timeout: 1,

    locationBased: true,

    onSave: function() {

        MyBBEditor.updateOriginal();

    },

    onRelase: function() {

        $("#{$bind}").val('');

    }

});

</script>

↧

How to Add custom in menu bar

July 21, 2014, 5:02 am

≫ Next: [Tutorial] Edit Stylesheet in Advanced Mode by Default

≪ Previous: [1.8] AutoSave Draft (sisyphus)

I need to add item in menu bar. mybb default give
Home
Search
Memberlist

i need to add extra to my site : http://www.rhforums.com

Example :
http://filetoon.com/i/upload/big/2014/07...c30196.PNG
http://filetoon.com/i/upload/big/2014/07...97e500.PNG

example site
hackforums.net and viphackforums.com

↧

[Tutorial] Edit Stylesheet in Advanced Mode by Default

July 23, 2014, 5:33 am

≫ Next: [TUTORIAL] Customizing Error Pages [C-Panel Hosts]

≪ Previous: How to Add custom in menu bar

Edit Stylesheet in Advanced Mode by Default
This tutorial is meant for administrators who have a solid understanding of CSS and would prefer to edit their stylesheets in the advanced mode. This saves you a click by opening up the editor in advanced mode instead of simple mode. This tutorial requires core file edits, so please make a backup.

This works for both 1.6 & 1.8.

Open up /admin/modules/style/themes.php

Find:

Code:

$table->construct_cell("<strong><a href=\"index.php?module=style-themes&amp;action=edit_stylesheet&amp;file=".htmlspecialchars_uni($filename)."&amp;tid={$theme['tid']}\">{$filename}</a></strong>{$inherited}<br />{$attached_to}");

Replace with:

Code:

$table->construct_cell("<strong><a href=\"index.php?module=style-themes&amp;action=edit_stylesheet&amp;file=".htmlspecialchars_uni($filename)."&amp;tid={$theme['tid']}&amp;mode=advanced\">{$filename}</a></strong>{$inherited}<br />{$attached_to}");

Find:

Code:

$popup->add_item($lang->edit_style, "index.php?module=style-themes&amp;action=edit_stylesheet&amp;file=".htmlspecialchars_uni($filename)."&amp;tid={$theme['tid']}");

Replace With:

Code:

$popup->add_item($lang->edit_style, "index.php?module=style-themes&amp;action=edit_stylesheet&amp;file=".htmlspecialchars_uni($filename)."&amp;tid={$theme['tid']}&amp;mode=advanced");

Save and upload your file. Your stylesheets should now open in advanced mode by default.

↧

[TUTORIAL] Customizing Error Pages [C-Panel Hosts]

July 26, 2014, 10:56 am

≫ Next: [TUTORIAL] Changing Postbit Layout

≪ Previous: [Tutorial] Edit Stylesheet in Advanced Mode by Default

Hello , in this tutorial im going to show you how to design / code your own error page
Note: This tutorial for the hosts that use CPanel only

Ok Lets Begin!

1. Go to FTP ==> Your Server ==> enter httadocs or public html whatever you have in there , to create a new page

2. Right Click ==> New File
We are going to make 5 files:
File 1: 400(.php or html whatever you want to code it as)
File 2: 401(.php or html whatever you want to code it as)
File 3: 403(.php or html whatever you want to code it as)
File 4: 404(.php or html whatever you want to code it as)
File 5: 503(.php or html whatever you want to code it as)
So Lemme Explain what are those Numbers
400 Stands for Bad Request
401 Stands for Unauthorized
403 Stands for Forbidden
404 Stands for Unfound Page
503 Stands for an Unavaible Service

3. Once you created the files , edit them with whatever code you want you can Google ==> Best Error Pages and take them as an example

4.Go to Your Host CPANEL ==> Error Pages ==> Your Host and now fill them with the links for example you've created all of the files .php it wold be the following:
http://yourdomain.com/errornumber.php or .html

5.Once your done go to your website and test it!

Hope that it was useful,
Have a wonderful day

↧

[TUTORIAL] Changing Postbit Layout

July 27, 2014, 2:29 pm

≫ Next: Ajax + jGrowl to notify if has new alert (myalert)

≪ Previous: [TUTORIAL] Customizing Error Pages [C-Panel Hosts]

So i thought that this can be helpful , due to the fact that few people had problem with this , there might be another tutorial , but this is the easiest way , how can you download the plugin and change the layout

1. Go to http://mods.mybb.com/view/force-postbit-layout ==> Download

2. Go to FTP ==> Your Site ==> httadocs / public_html ==> inc ==> plugins ==> paste forcepostbit.php in it

3. Go to ACP ==> Configuration ==> Plugins ==> Activate it.

4. Go To ACP ==> Configuration ==> Show Thread Options ==> Change "Display posts using the horizontal post layout" to "Display posts using the classic layout"

5. Go to your site and test it Smile

↧