Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all 685 articles
Browse latest View live
↧

Smooth Scroll to local anchors - No JQuery needed

January 12, 2014, 3:00 am
$
0
0
You can find many solutions for "Scroll on top" using JQuery. I will show you a way to smoothly scroll to local anchors like #top, #bottom etc.

I`ve found a lttle script that exactly do this for you. Have a look to a demo site: Smooth scrolling demo

The script can be found here: smoothscroll.js

But how can i implement and use this script?

It`s pretty simple to implement and use this script in your mybb forum. Just save the smoothscroll.js to your jscripts folder on your server.

Open your template Ungrouped Templates-->headerinclude and serach for this line:
PHP Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script> 

After add:
PHP Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/smoothscroll.js"></script> 
Save the template and go to your forum index. Now your site is scrolling up very smoothly when you click on "Return to Top" in the bottommenu.

You can add several local anchors if you want. The syntax for creating another local anchor is:
PHP Code:
<a name="anchorname" id="anchorname"></a> 

For example a local anchor to scroll to the bottom of your forum:
PHP Code:
<a name="bottom" id="bottom"></a> 

Place a hyperlink wherever you want to scroll to the bottom. The syntax for a link must be like this:
PHP Code:
<a href="#bottom">Scroll to bottom</a> 

That`s all. Now you have a smooth scrolling effect to all local anchors you create without using JQuery. Smile
↧
Search

Toggle Threaded - Linear

January 16, 2014, 10:51 am
$
0
0
We have seen that every thread has an option at the bottom-left: "Subscribe to this thread" that automatically gets changed after thread subscription and displays as "Unsubscribe from this thread".

[Image: 39tQeAM.png]

Well its a nice feature. It displays the required option only as well as the subscription state of the thread with the user's account. But what about this:

[Image: Fy9y8g0.png]

It shows both the options every time viewing a thread no matter the thread view is 'Linear' or 'Threaded'.

Okay let's play with the codes a little to give the same functionality as the thread subscription option toggle to thread view also. Lets toggle it.

So, open the following template:

ACP > Templates & Styles > Templates > {theme_name} Templates > Show Thread Templates > showthread

and find this code line:

Code:
<script type="text/javascript" src="jscripts/thread.js?ver=1603"></script>

add just after that:

Code:
<style type="text/css">#mode_{$mybb->input['mode']} { display: none; }</style>

Now in the same template find this code chunk:

Code:
<a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->threaded}</a> | <a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->linear}</a>

Replace with:

Code:
<a id="mode_threaded" href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->threaded}</a><a id="mode_linear" href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->linear}</a>

Save the template. You are done.
Now you can toggle you thread view links just like your thread subscription links.

[Image: 5pHd0YV.png]

Happy coding Big Grin
↧
↧

Change doctypehtml MyBB HTML4 Being HTML5

January 24, 2014, 12:52 pm
$
0
0
Before you understand first what is HTML5 and other functions can be understood in Semantics - Dive Into HTML5
http://diveintohtml5.info/semantics.html http://diveinto.html5doctor.com/

I will explain in part
HTML5 was written with this type of document such as
Code:
<!DOCTYPE html>

While HTML 4
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

We can see a way to open our website by pressing CTRL + U
Code:
view-source:http://community.mybb.com/
http://community.mybb.com/ you can replace with your MyBB

For its part the HTML tags that are usually like this
HTML5
Code:
<html lang="en" xml:lang="en">

HTML4
Code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

read more here http://diveintohtml5.info/semantics.html http://diveinto.html5doctor.com/

Points of Tutorial

Open ./inc/functions.php
Find
PHP Code:
$contents = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n".$contents; 

Replace
PHP Code:
$contents = "<!DOCTYPE html>\n".$contents; 

Then
Find
PHP Code:
$contents = str_replace("<html", "<html xmlns=\"http://www.w3.org/1999/xhtml\"", $contents); 

Replace
PHP Code:
$contents = str_replace("<html", "<html", $contents); 

For
PHP Code:
xmlns="http://www.w3.org/1999/xhtml" 
it is not necessary in HTML5

Open
ACP > Templates & Style > Templates > Templates (using) > Ungrouped Templates > htmldoctype

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Replace
Code:
<!DOCTYPE html>

It can use or not is all up to you, This is the element type javascript

replace all
Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/name_javascript.js"></script>

be
Code:
<script src="{$mybb->settings['bburl']}/jscripts/name_javascript.js"></script>

change
Code:
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />

be
Code:
<meta charset="{$charset}">

if you are going to make a pretty write javascript like this
Code:
<script> ... </script>
if you are going to make a pretty write CSS like this
Code:
<style> ... </style>

please if there is an error please to be justified Big Grin
sorry if my english is not good Wink
↧

[Tutorial] Make your own Forum's Status Image

January 26, 2014, 6:18 am
$
0
0
Hi there,
I have seen many mybb user in search of a Forum Status Image which can be embed on other website too as a image type.
So, in the following link you could find the full tutorial with source -
Click here
Thank you,
Regards,
The Fire
↧

Making "Ajax Poll Voting" plugin working with 1.6.12

January 28, 2014, 10:11 pm
$
0
0
Link to plugin: http://mods.mybb.com/view/ajax-poll-voting





1 - Download plugin
2 - Open inc/plugins/ajaxpoll/jscripts/ajaxpoll.js with Notepad++ or replace with attached file
3 - Find:
Code:
method: 'get',
4 - Replace:
Code:
method: 'post',
5 - You need repeat 3 and 4 thrice, because has three "method: 'get',"
6 - Find:
Code:
'#ajaxpoll a[href^=polls.php?action=showresults]'
7 - Replace:
Code:
'#ajaxpoll a[href*="polls.php?action=showresults"]'
8 - Find:
Code:
'#ajaxpoll a[href^=polls.php?action=do_undovote]'
9 - Replace:
Code:
'#ajaxpoll a[href*="polls.php?action=do_undovote"]'
10 - Upload and activate plugin. It's all.

.js  ajaxpoll.js (Size: 4.07 KB / Downloads: 4)
↧
↧

Imageshack Upload

January 29, 2014, 11:03 am
$
0
0
1 - Get imageshack api key: http://imageshack.us/api_request/

2 - Create imageshack.php in root

PHP Code:
<html>
<head>
<title>Upload to Imageshack</title>
</head>
</html>
<style>
    body {text-align: center; background-color: #f7f7f7; overflow-x:hidden; overflow-y:auto;}
</style>
    <img src="images/ims.png" border="0" />
    <br /><br />
    <button onclick="document.querySelector('input.file').click()">Select file...</button>
    <form style="display:none" enctype="multipart/form-data" action="./api.php" method="POST">
    <input id="fileupl" class="file" type="file" name="img" onchange="this.form.submit();" />
    </form> 

3 - Create api.php

PHP Code:
<?php
  $formatcheck = '0';
  $imagem = getimagesize($_FILES['img']['tmp_name']);
  if ($imagem){
        rename($_FILES['img']['tmp_name'], "/tmp/" . $_FILES['img']['name']);

     $postData = array();
     $postData['fileupload'] = "@/tmp/" . $_FILES['img']['name'];
     $postData['submit']      = "Submit";
     $postData['key']                = "your_api_key";
     $postData['rembar']      = "no";
     $postData['xml']                = "yes";

    $timeout = 30;
    $curl    = curl_init();

    curl_setopt($curl, CURLOPT_URL, 'http://www.imageshack.us/upload_api.php');
    curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $postData);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $xml_raw = curl_exec($curl);
    curl_close ($curl);

    $xml = new SimpleXMLElement($xml_raw);

    if ($xml->error != '') {
        $imgur_error_code = $xml->error;

        settype($imgur_error_code, "string");

        echo "<h1>Error #" . $imgur_error_code . "</h1>";
    }
    else {
        imagedestroy($image);
        $imgur_original = $xml->links[0]->image_link;

        settype($imgur_original, "string");}
  }
  else {
        echo "Invalid format";
        $formatcheck = '1';
  }

?>

<script>
    var editor = eval('opener.' + 'clickableEditor');
    if (<?php echo $formatcheck; ?> == '0') {        
            var code = '[img]<?php echo $imgur_original; ?>[/img]';
            editor.performInsert(code);
            javascript:window.close();}
    else {
            var code = 'Invalid format';
            editor.performInsert(code);
            javascript:window.close();}
    
</script> 

3.1 - Change your_api_key in api.php with key obtained in 1

4 - Copy ims.png in images folder of your mybb installation.

5 - Copy imageshack.png in jscripts/editor_themes/default/images/ and jscripts/editor_themes/office2007/images/

6 - Open jscripts/editor.js

6.1 - Find

Code:
{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},

6.2 - Add after

Code:
{type: 'button', name: 'imageshack', insert: 'imageshack', image: 'imageshack.png', title: 'Upload to Imageshack'},

6.3 - Find

Code:
insertIMG: function()
    {
        image = prompt(this.options.lang.enter_image, "http://");

        if(image)
        {
            this.performInsert("[img]"+image+"[/img]", "", true);
        }
    },

6.4 - Add after

Code:
insertImageshack: function()
    {
        MyBB.popupWindow('imageshack.php', 'imageshack', 210, 120);
    },

6.5 - Find

Code:
case "image":
                this.insertIMG();
                break;

6.6 - Add after

Code:
case "imageshack":
                this.insertImageshack();
                break;


.png  imageshack.png (Size: 1.32 KB / Downloads: 25)

.png  ims.png (Size: 2.61 KB / Downloads: 1)
↧

MyBB Installation

January 31, 2014, 9:35 am
↧

Create two different ways of register (one requiring custom profile field, other not)

January 31, 2014, 10:42 am
$
0
0
I asked this in general support forum but I solved by myself, so I think here would be more useful. So, here, the tuto.

Example of use:
You have your forum configured with several additional profile data in register (name, surname, telephone, address, etc) and additional profile data is required in new registers. Let us say that the people that fill these fields go to a group called VIP.

Also, you need to have another simple register form, without no profile data required, just like traditional registers with only username, email and password, so the people that use this form go to another group called Register and not VIP

The solution that I found maybe it's not the best option because involves modifying, or better said, adding some stuff to the core.

1) First of all, we need to have 2 member.php.
So, we copy one and rename it to member_users.php, this is the one that we are going to modify, not the other!

2) After that, we go in member_users.php to the following line (112):

require_once MYBB_ROOT."inc/datahandlers/user.php";
rename to
require_once MYBB_ROOT."inc/datahandlers/user_withoutprofile.php";

3) Then, we must copy the inc/datahandlers/user.php and paste it in:
inc/datahandlers/user_withoutprofile.php

No modify or delete inc/datahandlers/user.php!!

4) Now go to this line (675) in member_users.php

if($profilefield['required'] == 1) { ....}

Comment or delete the whole if.

5) Go to inc/datahandlers/user_withoutprofile.php , search for

function verify_profile_fields()

Comment all the code except return true; Like so:

function verify_profile_fields(){

return true;

}

5) Ok, now we have 2 ways of register. One asking for several custom fields that are required and other way of register that doesn't ask for anything excepto nickname, password.


6) In order to give to the user the choice to register in one way or other, lets modify template member_register_agreement and add another form.

The end of the template should be similar to this:
PHP Code:
<div align="center">

<input type="hidden" name="step" value="agreement" />
<input type="hidden" name="action" value="register" />
<input type="submit" class="button" name="agree" value=" I agree. Register as VIP " />
</form>



<form action="member_users.php" method="post">
<input type="hidden" name="step" value="agreement" />
<input type="hidden" name="action" value="register" />
<input type="submit" class="button" name="agree" value="I agree. Register as user." />
</form>

</div>
{$footer}
</body>
</html> 


[Image: 1YH5STE.jpg]

Note that in the second form we have modify from members.php to member_users.php (the one that doest not ask for additional profile data).

7) We must go to member_register template , rename it to member_register_user (rename will create one new) and modify only when appears member.php for member_users.php

8) Finally, in member_users.php, line 17 and 781 change member_register for member_register_user (carefull with replace all, only the complete words not replace member_register_XXXX!!!)


These would be the result

[Image: 4dQhnzHl.jpg]
[Image: 7rjSqmal.jpg]

As I said, this process implies modifying some stuff in core functionality (but you can revert it easily). I am not responsible for what may happen. It works well for me.
Hope it helps for someone!
Regards
↧
Search

Uploads.im upload

January 31, 2014, 11:24 pm
$
0
0
1 - Create im.php in root

PHP Code:
<html>
<head>
<title>Upload to Uploads.im</title>
</head>
</html>
<div><img src="images/imlogo.png" border="0" /></div>
<br /><br />
<button onclick="document.querySelector('input').click()">Select file...</button>
<input style="visibility:hidden;position:absolute;top:0;" type="file" onchange="uploadim(this.files[0])">

<script>
    function uploadim(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("upload", file); // Append the file
        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        xhr.open("POST", "http://uploads.im/api"); // Boooom!
        xhr.onload = function() {
            var code = '[img]' + JSON.parse(xhr.responseText).data.img_url + '[/img]';
            var editor = eval('opener.' + 'clickableEditor');
            editor.performInsert(code);
            javascript:window.close()
        }
        // Ok, I don't handle the errors. An exercice for the reader.
        /* And now, we send the formdata */
        xhr.send(fd);
    }
</script>

<style>
    body {text-align: center; overflow-x:hidden; overflow-y:auto;}
    div { border-bottom: 4px solid rgb(68, 68, 66); margin: -8px;}
    p {display: none}
    .uploading p {display: inline}
</style>
<br /><br />
<p><img src="images/preload.gif" border="0" /></p> 

2 - Copy preload.gif
.gif  preload.gif (Size: 6.55 KB / Downloads: 35) and imlogo.png
.png  imlogo.png (Size: 5.97 KB / Downloads: 35) in images folder of your mybb installation.

3 - Copy im.png
.png  im.png (Size: 1.67 KB / Downloads: 35) in jscripts/editor_themes/default/images/ and jscripts/editor_themes/office2007/images/

4 - Open jscripts/editor.js

4.1 - Find

Code:
{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},

4.2 - Add after

Code:
{type: 'button', name: 'im', insert: 'im', image: 'im.png', title: 'Upload to Uploads.im'},

4.3 - Find

Code:
insertIMG: function()
    {
        image = prompt(this.options.lang.enter_image, "http://");

        if(image)
        {
            this.performInsert("[img]"+image+"[/img]", "", true);
        }
    },

4.4 - Add after

Code:
insertIm: function()
    {
        MyBB.popupWindow('im.php', 'im', 240, 200);
    },

4.5 - Find

Code:
case "image":
                this.insertIMG();
                break;

4.6 - Add after

Code:
case "im":
                this.insertIm();
                break;
↧
↧

[Core Edit] Option to Make Reputation Comments Mandatory

February 6, 2014, 12:10 am
$
0
0
Driven by this thread:
http://community.mybb.com/thread-150751.html

When we give reputation to a user from user reputation page it asks for the comment (with atleast 10 characters), but it is not necessary to place a comment while we give the reputation to a user for a post through postbit reputation button.

This modification will add an option to make the commenting mandatory, means if you set yes from ACP settings it will force user to make a comment every time while giving reputation to a user : no matter from where it is ...

Creating Settings:

Method 1 (General Users):

Go to
ACP > Configuration > Settings > Add New Setting (2nd Tab)
and place the values:

Title:
Reputation Comment Mandatory

Description:
Set it yes if you want users to force placing a comment on every given reputation.

Group:
Reputation

Display Order:
9

Identifier:
mandrepcomment

Type:
Yes / No Choice

Value:
0
(Change the 'value' to '1' if you want it to be 'yes' by default)

Now hit the button "Insert New Setting" from below.

[Image: IBGUYlA.png]

Method 2 (Advanced Users):

Advanced users can simply run this following SQL query through database to create the setting:

PHP Code:
INSERT INTO `mybb_settings` 
(`sid`, `name`, `title`, `description`, `optionscode`, `value`, `disporder`, `gid`, `isdefault`) 
VALUES ('', 'mandrepcomment', 'Reputation Comment Mandatory', 
'Set it yes if you want users to  force placing a comment on every given reputation.', 
'yesno', '0', 9, 15, 0); 

Note:
1. Change the table prefix if it is not default mybb_
2. Change the 'value' to '1' if you want it to be 'yes' by default.

Now we have an additional setting for the reputation:

[Image: s9VZ223.png]

Editing Core:

Now the core edit part.
Open reputations.php in an editor, go to line no 232 and find:

PHP Code:
if($mybb->input['pid'] == 0) 

Change it to:

PHP Code:
if($mybb->settings['mandrepcomment'] || $mybb->input['pid'] == 0) 

Save the file and re-upload : replace.

All done. Now if the setting is set to 'yes' its mandatory to provide a comment while giving reputation from anywhere, else it will show the error message:

[Image: DnlG2b1.png]

Happy coding ... Big Grin
↧

How To: Undo sending a PM

February 7, 2014, 7:40 am
$
0
0
This is something I came across today which I was unaware of, so I thought I'd share it with the rest of the community. If you're in a user group which allows you to track your private messages (User CP > Tracking), you can cancel a message which has not yet been read by the recipient by checking the message and clicking on "Cancel the selected messages".

[Image: ppIUbfj.png]

I had always assumed the two buttons did the same thing, until I checked the code:

PHP Code:
$db->delete_query("privatemessages", "pmid IN ($pmids) AND receipt='1' AND status='0' AND fromid='".$mybb->user['uid']."'"); 

Happy messaging. Smile
↧

Better CSS Pollbar

February 11, 2014, 8:40 am
$
0
0
I have no idea why developers have done all the brainstorms placing 3 pieces of images and stretching the middle one with an additional variable. Here is the most simple way to do that:

Lets style the thread view poll area first.

First go to template:
showthread_poll_resultbit

and replace entire content with the following:

PHP Code:
<tr>
<td class="{$optionbg}" align="right" width="400">{$option}{$votestar}</td>
<td class="{$optionbg}" width="300">
<div class="progress_bar" title="{$percent}%">
<div class="progress" style="width: {$percent}%;"></div>
</div>
</td>
<td class="{$optionbg}" width="70" align="center">{$votes}</td>
<td class="{$optionbg}" width="30" align="center">{$percent}%</td>
</tr> 

Place the same content in 'polls_showresults_resultbit' template also for styling poll page.

Now add this little CSS code to your global.css

Code:
.progress_bar {
    border: 1px solid #0f5c8e;
    padding: 1px;
}

.progress {
    padding: 5px 0;
    box-sizing: border-box;
    background: #026CB1 url(images/thead_bg.gif) center repeat-x;
}

Thats it. Result:

[Image: Q7RXFca.png]

Remember that this is the most basic approach. It can be done with the same trick using HTML Progress Tag also which will; without any additional CSS; be displayed with the default OS style:

Code:
<progress value="{$percent}" max="100"></progress>

[Image: 2aejyUg.png]

... and can be as much advanced as the modern CSS3 animated one like this:

[Image: F7aXjej.png]

Happy coding Big Grin
↧

Usergroup not allow to view profiles (except for himself)

February 11, 2014, 9:38 am
$
0
0
By default in Mybb, if you disable for a group the option to view profiles, the user can't view his own profile!!
I don't know if this is logical or not, but for allowing a user who belongs to a 'user group' which can't view profiles to be able to view his own profile, in member.php around line 1435

change

if($mybb->usergroup['canviewprofiles'] == 0 )
{
error_no_permission();
}

For

if($mybb->usergroup['canviewprofiles'] == 0 && $mybb->user['uid'] != $mybb->input['uid'])
{
error_no_permission();
}
↧
↧

How to set admin permissions for custom plug-ins?

February 13, 2014, 5:14 am
$
0
0
Dear all;

As you know there is a feature in MYBB ACP that you can set permissions for administrators (permissions for ACP sections),
some custom plug-ins do not have any option here to set,
for example I do not want some administrators have access to "MySubscriptions" plug-ins and its preferences in ACP.
how can I exclude it for some administrators?

Huh
Any Guide???
↧

[How to ?]: create a button to raise the wire discution

February 13, 2014, 11:50 am
$
0
0
I would like to create a button to raise the wire discution.
I want to add this function to avoid the "thank you" and other sympatiques but sometimes a little unnecessary words, which often have to reposition the post in order to highlight
↧
Search

Simple jQuery Drop Down Login Form tutorial for MyBB

February 13, 2014, 10:00 pm
$
0
0
Original Tutorial Here : MySkins Studio

[Image: tHGpMFF.jpg]

Hello friends,
Here is a simple tutorial from our studio, for creating a simple drop down login menu/form for MyBB.
The tutorial needs some basic understanding in editing the templates and the css files.

So first its the basic HTML that you need to know.
To make things simple i am providing the whole code so you can copy and paste in respective templates.

1. Building the Basic form with HTML :
Go to your theme templates > header templates > header_welcomeblock_guest template

Now copy the entire code from below and replace the entire code in the template.

Code:
<div id="logincontainer">
<span>Hello there Guest Please </span><a href="#" class="logbut show_hide">Login</a> | <a href="{$mybb->settings['bburl']}/member.php?action=register" class="regbut">{$lang->welcome_register}</a>
</div>
<div class="logbar">
<div class="arrow" style="border-bottom-color: #272727;"></div>
<form action="member.php" class="loginform" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$url}" />
<label>Username: </label>
<input type="text" name="username" value="" class="textbox"/>
<label>Password: </label>
<input type="password" style="margin-left: 6px;" name="password" value="" class="textbox"/>
</span>
<br/>
<input type="submit" class="button" value="Login" tabindex="3" />
<a href="{$mybb->settings['bburl']}/member.php?action=lostpw"> <input type="submit" value="{$lang->lost_password}" name="submit" class="button" /></a><br />
<label class="smalltext" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser."><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox"> Remember?</label>
</form>
</div>

2. Styling the form with Css and Css3:

The login dropdown needs to be styled with Css attributes to make it look beautiful.
You can use your own color choices and here is my choice.

Copy the entire code below.

Now navigate to your theme > global.css > advanced mode > paste it at the bottom of the CSS file and save it.

Code:
#logincontainer {
font-size: 14px;
font-weight: normal;
text-shadow: rgba(35, 172, 16, 0.84) 0px -1px 10px;
color: #FFF;
cursor: pointer;
box-shadow: inset rgba(0, 0, 0, 0.29) 0px 1px 3px, rgba(219, 219, 219, 0.05) 0px 0px 0px 1px, rgba(77, 75, 75, 0.1) 0px 1px 0px;
padding: 15px 20px;
background: #0E0E0E;
border-radius: 3px;
margin-top: 25px;
}

.show_hide {
    display:none;
}
.plus:after {
    content:" +";
}
.minus:after {
    content:" -";
}

.logbar  {
z-index: 500;
position: absolute;
background-color: #111;
padding: 20px;
margin-top: 10px;
    color: #fff;
float: left;
width: 250px;
border: 2px solid #272727;
border-radius: 3px;
box-shadow: -1px 0px 12px rgba(34, 116, 23, 0.19);
}

.regbut {
padding: 7px 9px;
background: #1B5F0A;
border-radius: 3px;
border: 1px solid #2E6B16;
}

.logbutton {
    background: #242424;
    color: #ffffff;    
    text-shadow: 0 0 2px #000;
    border: 1px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 6px 10px;    
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    text-shadow: 0 0 2px #000;
    font: 11px;
    text-decoration: none;
        cursor: pointer;
}

.logbutton:hover {
    background: #287F12;
}

.logbox {
    background: #1A1A1A;
        padding: 5px;
    border: 1px solid #2C2C2C;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    color: #f7f7f7;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}

.logbox:focus {
        border: 1px solid #4CAD2D;
        outline: none;
        color: #fff;
}

#logincontainer a:link, #logincontainer a:visited {
    color: #f7f7f7;
    text-decoration: none;
}

.arrow {
position: absolute;
top: -9px;
margin-left: 50%;
width: 0;
height: 0;
border-left: 12px solid rgba(0, 0, 0, 0);
border-right: 12px solid rgba(0, 0, 0, 0);
border-bottom: 12px solid #000;
}

3. Adding jQuery
The form needs jQuery code to function and here is the code.

Code:
<script type="text/javascript">
jQuery(document).ready(function($){
  $(".logbar").hide();
  $(".logbut").addClass("plus").show();
  $('.logbut').toggle(
      function(){
          $(".logbar").slideDown().slideToggle("fast");
          $(this).addClass("plus");
          $(this).removeClass("minus");
      },
      function(){
          $(".logbar").slideUp().slideToggle("fast");
          $(this).addClass("minus");
          $(this).removeClass("plus");
      }
  );
});
</script>

Navigate to Templates > your theme templates > ungrouped templates > headerinclude templates

Copy the above code and paste it at the bottom of the template.
Make sure you are running jQuery in your template and it can be found out in the same template.
If you are not running jQuery then you need to add this code before the above jQuery code for the dropdown.

Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

MyBB in general conflicts with the jQuery and hence you need to add the no-conflict code as shown below.

Code:
jQuery.noConflict();

So if you are not running the jQuery in your templates, use the code below :

Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery.noConflict();
  $(".logbar").hide();
  $(".logbut").addClass("plus").show();
  $('.logbut').toggle(
      function(){
          $(".logbar").slideDown().slideToggle("fast");
          $(this).addClass("plus");
          $(this).removeClass("minus");
      },
      function(){
          $(".logbar").slideUp().slideToggle("fast");
          $(this).addClass("minus");
          $(this).removeClass("plus");
      }
  );
});
</script>
Save the templates and you are done.

Demo:
Here is a demo of the dropdown login: Demo Link

This completes our tutorial and i hope it helps you.
If you like it please do share the tutorial and retain the original credits to our Studio.
Thank you
regards
↧

Better PM Used

February 14, 2014, 8:32 pm
$
0
0
Go to:
Private Messaging Templates > private_pmspace

Replace the entire content with:

Code:
<span class="smalltext float_right">&nbsp;<strong>{$overhalf}{$belowhalf}</strong></span>
<div id="pm_usage" title="{$overhalf}{$belowhalf} {$lang->pmspaceused}">
<div id="pm_usage_bar" style="width: {$overhalf}{$belowhalf}"></div>
</div>

<style type="text/css">
#pm_usage {
    float: right;
    width: 150px;
    border: 1px solid #0F5C8E;
    padding: 1px;
    height: 12px;
}
#pm_usage_bar {
    background: red;
    padding: 6px 0;
}
</style>

Result:

[Image: TWX9Pw5.png]

Restyle it as you like changing the CSS properties ...

Happy coding Big Grin
↧
↧

Multiquote button fix (without jQuery)

February 15, 2014, 2:49 am
$
0
0
For sibling selector fix open postbit_multiquote template and replace all content with

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

and in your showthread.css (that is used by your theme) add:

Code:
img[src*="postbit_multiquote.gif"] ~ span:before {
  
}

img[src*="postbit_multiquote_on.gif"] ~ span:before {
   content:"+";
}

and save it.

When you quote someone in a post (using multiquote) you'll get "+" before "Quote" text that is indicating that that post is quoted.


Result:

[Image: 18R7mp1.png]

[Image: tF53n4y.png]

Remember to upload two transparent (1px x 1px, from postbit.zip) gif files into your theme image folder.

.zip  postbit.zip (Size: 418 bytes / Downloads: 9)
↧

[jQ] User Link Quick Options Dropdown

February 21, 2014, 9:39 am
$
0
0
Description
This jQuery mod will convert all of the links in your site page pointing to any member profile to an option dropdown with the actions you can perform with another user account.

Background:
As per request of the user AwesomePol over PM at community I've coded this script.

Dependency:
jQuery library is required to implement this as the script is written in jQuery. So if you have already not included jQuery library include now first. [How]

Method:
A[1]. First, include the following script to your 'headerinclude' template, at the end.

PHP Code:
/*  
 /  "User Link Quick Options Dropdown"
 /  - a jQuery script for MyBB to convert all user profile links in page to quick option dropdown list
 /  Author: effone
 /  Website: http://demonate.com
 /  Licence: Demonate standard licence for free products applied
 /  © 2014, Demonate
*/


jQuery.noConflict();
jQuery(document).ready(function(jQ){
    jQ("a[href*='member.php?action=profile&uid=']").addClass("user_link");

    jQ(".user_link").click(function(){
        
        var name = jQ(this).text();
        var uid = jQ(this).attr('href').substr(jQ(this).attr('href').lastIndexOf("=") + 1);
        jQ( this ).before( "<ul class='user_opt'><li><a href='member.php?action=profile&uid="+uid+"'>Profile</a></li><li><a href='member.php?action=emailuser&uid="+uid+"'>E-Mail</a></li><li><a href='private.php?action=send&uid="+uid+"'>Message</a></li><li><a href='search.php?action=finduser&uid="+uid+"'>Posts</a></li><li><a href='search.php?action=finduserthreads&uid="+uid+"'>Threads</a></li><li><a href='javascript:MyBB.reputation("+uid+");'>Rep User</a></li><li><a href='usercp.php?action=do_editlists&add_username="+name+"&my_post_key="+my_post_key+"'>Make Buddy</a></li><li><a href='usercp.php?action=do_editlists&manage=ignored&add_username="+name+"&my_post_key="+my_post_key+"'>Ignore User</a></li></ul>" );
        
        var pos = jQ(this).position();
        var top = jQ(this).outerHeight();
        var setleft = jQ(this).outerWidth()/2 - jQ(".user_opt").outerWidth()/2;
        
        jQ(".user_opt").css({
        position: absolute,
        top: (pos.top + top) + "px",
        left: (pos.left + setleft) + "px"
        }).show();
        
        return false;
    });
        
    jQ(document).mouseup(function (e){       
        var container = jQ('.user_opt');
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.remove();
        }
    });
}); 

A[2]. You can optionally keep the script external as well. For that, skip the previous step and start from here:

1. Upload the attached file 'user_options.js' in your 'jscripts' folder.
2. Open your 'headerinclude' template and find this:

Code:
{$stylesheets}

... and add the following line just before this:

Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/user_options.js"></script>

I've also uploaded to the script to Demoante CDN. you can even call that from there if you have trust on Demonate.

Code:
<script type="text/javascript" src="http://demonate.com/jscripts/cdn/user_options.js"></script>

or.

Code:
<script type="text/javascript" src="http://goo.gl/5rBwtZ"></script>

B. Now designing the option dropdown list. Its is required to make the unordered list to a menu. So, open your global.css and add at the end:

PHP Code:
.user_opt {
    position: absolute;
    padding: 0;
    margin: 0;
    background: #FFF;
    border: 1px solid #0F5C8E;
    z-index: 999;
    text-align: left;
    font-weight: 300;
}
.user_opt li {
    list-style: none;
}
.user_opt li a {
    color: #0F5C8E;
    font-weight: 700;
    font-size: 11px!important;
    text-decoration: none;
    padding: 3px 15px;
    display: block;
    border-top: 1px solid #0F5C8E;
}

.user_opt li:first-child a { border-top: none; }
.user_opt li a:hover {
    color: #000;
    background: #ADCBE7;
} 

You are done. Result (applied to my premium theme Sytrax):

[Image: IkJju86.png]

Change the CSS properties to suit your requirement further.

Happy coding. Big Grin

.js  user_options.js (Size: 1.89 KB / Downloads: 4)
↧

Rebuilding polls votings

February 25, 2014, 9:16 pm
$
0
0
If you're like me who gets bombed by low end countries who gets paid to vote, welp deleting em isn't that simple if you like it clean.

So made this a quickly, yay for sql...

Code:
update mybb_polls set votes = (select group_concat(e separator '||~|~||') e FROM (SELECT COALESCE(count(vid),0) as e FROM `mybb_pollvotes` where pid = [Enter PID] group by voteoption, pid) q) where pid = [Enter PID]

Posting it here because it might get useful for someone in the upcoming years if not mybb stop doing it this way.
↧
Viewing all 685 articles
Browse latest View live
Search