Showing posts with label xenForo Tutorials. Show all posts
Showing posts with label xenForo Tutorials. Show all posts

Monday, September 30, 2013

How To Create Your Own Helpers On xenForo

How To Create Your Own Helpers On xenForo. Helpers provide extra functions that you can use inside the XenForo templates.

Currently there are many Helpers, following some them:

  1. avatar -> Helper to fetch the URL of a user's avatar.
  2. username -> Produces a <a href="members/username.123" class="username">Username</a> snippet.
  3. usertitle -> Helper to get the user title for the specified user.
  4. richusername -> Outputs the necessary HTML for a rich username (includes the display style markup class).
  5. ismemberof -> Check if the user is member of a group.
  6. wordtrim -> Word trims and HTML escapes the given string.
  7. autolink -> Auto-links URLs in plain text. This text should generally already be HTML escaped, because it can't be done after the linking.

You can call a helper in the template this way:

{xen:helper NAME_OF_THE_HELPER, 'argument1', 'argument2'}


Step 1 - Begin

As usual let's starting by creating the folder for our add-on, and including a listener (because we need one). This is the final structure:

  • forumroot
  • library
  • SimpleHelper -> Our new folder!
  • Listener.php -> Our new file!
  • XenForo
Ok, once created, open the file Listener.php and add the following code:

<?php//Our class nameclass SimpleHelper_Listener{
    
/**
    * Listen to the "init_dependencies" code event.
    *
    * @param XenForo_Dependencies_Abstract $dependencies
    * @param array $data
    */
    
public static function init(XenForo_Dependencies_Abstract $dependencies, array $data)
    {
        
//Get the static variable $helperCallbacks and add a new item in the array.
        
XenForo_Template_Helper_Core::$helperCallbacks += array(
            
'echo' => array('SimpleHelper_Helpers''helperEcho')
        );
    }
}
?>

What it does?
This function listen to the Code Event Listener init_dependecies. This code event is called when the dependency manager loads its default data. Is fired on virtually every page and is the first thing you can plug into.
The following code get the static $helperCallbacks which has the list of helpers, and merge a new one, the our simple helper.
 
XenForo_Template_Helper_Core::$helperCallbacks += array(
        
'echo' => array('SimpleHelper_Helpers''helperEcho')
);



Notice that the SimpleHelper_Helpers do not exists. We'll creating this class in the next step.

We now need to do two things: create a new add-on and create a new event listener in the AdminCP.



Create the add-on



To create a new add-on, 
  • go to AdminCP
  • Development 
  • Create Add-on and fill with the info:
----------------------------------------------------
  1. Add-on ID: SimpleHelper
  2. Title: Simple Helper
  3. Version String: 1.0.0
  4. Version ID: 1

Then save it.


Create the Event Listener


Go to
AdminCP -> Development -> Code Event Listeners and create a new listener using our function.
  • Listen to Event: init_dependecies
  • Execute Callback Class: SimpleHelper_Listener
  • Execute Callback method: init
  • Description: Add a new custom helper
  • Add-on: Simple helper

Save it!


Step 2 - Core


Now that are all setup, let's create the function that will handle the call to the helper
echo.
Create one more file:

  • forumroot
  • --library
  • ---SimpleHelper
  • -----Helpers.php -> Our new file!
  • -----Listener.php
  • ---XenForo


Open the new file (SimpleHelper/Helpers.php) and put the following code:

 
<?php//Our class helper (we can put any helpers in here we want)class SimpleHelper_Helpers{
    public static function 
helperEcho ($string)
    {
        
//We only return the argument, dont do nothing.
        
return $string;
    }
}
?>



Remember this piece of code in the Listener.php:
 
'echo' => array('SimpleHelper_Helpers''helperEcho')


So, we just have created a class SimpleHelper_Helpers and a function helperEcho.

But as you can see, this helper does nothing! It just take an argument (the first one) and then return as it is.



Step 3 - Testing


Let's test this.


Open the template
forum_view and put this at the top:

{xen:helper echo, 'This is a custon helper! It does nothing!'}



Save.

Go to your forum list, refresh the page and you'll see something like this:



Ok, it works, but how we can make this helper a little more.....helpish?


Step 4 - More functionality



Let's change what this helper do. Open the file
SimpleHelper/Helpers.php and change ourhelperEcho to the following code:

public static function helperEcho ($string$color)
{
    return 
"<font color=$color>$string</font>";
}



Open the forum_list and change the call to this helper to:

{xen:helper echo, 'This is a custon helper! It does nothing!', 'red'}


Refresh the forum list in your forum and see what happens. It will turn all the text red.

So that's it. You can create your own helpers this way. And for sure, you can do a lot more then just echo a string in the red color.

Monday, September 2, 2013

How To Make Statistics xenForo Like IPB

How To Make Statistics xenForo Like IPB. Today I will guide you to the forum statistics, statistics like members online source statistics of IPB . Screenshot: Step 1: Go to ACP >> Template >> Create a new template footer_stats with the following contents:



<xen:require css="footer_stats.css" />
<div id="board_stats" class="breadBoxBottom">
    <ul class="ipsType_small ipsList_inline">
        <span class="value">{xen:number $boardTotals.discussions}</span>{xen:phrase discussions}
        <span class="value">{xen:number $boardTotals.messages}</span>{xen:phrase messages}
        <span class="value">{xen:number $boardTotals.users}</span>{xen:phrase members_count}
        <span class="value"><xen:username user="$boardTotals.latestUser" /></a></span>{xen:phrase latest_member}
    </ul>
</div>
<div class="borderwrapper">
    <div class="stats_body">
        <h3 class="stats_title_right"><a href="online/" class="Tooltip" title="See all online users">{xen:phrase online_now_x_members_y_guests_z, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}'}</a></h3>
            <div id="stats_content">    
            <xen:if is="{$onlineUsers.records}">
            <ol class="listInline">
            <xen:foreach loop="$onlineUsers.records" value="$user" i="$i">
                <xen:if is="{$i} <= {$onlineUsers.limit}">
                    <li>
                    <xen:if is="{$user.user_id}">
                        <a href="{xen:link members, $user}"
                            class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                    <xen:else />
                        {xen:phrase guest}<xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                    </xen:if>
                    </li>
                </xen:if>
            </xen:foreach>
            <xen:if is="{$onlineUsers.recordsUnseen}">
                <li class="moreLink">... <a href="{xen:link online}" title="{xen:phrase see_all_visitors}">{xen:phrase and_x_more, 'count={xen:number $onlineUsers.recordsUnseen}'}</a></li>
            </xen:if>
            </ol>
            </xen:if>
        <br />
        <ul>
            <li>
                <span style="font-weight: bold; color: red;">Administrator</span></a> |
                <span style="font-weight: bold; color: green;">Moderator</span> |
                <span style="color: black; font-weight: bold;">Members</span> |
                <span style="color: violet; font-weight: bold;">Bots</span>
            </li>
        </ul>
        </div>
    </div>
</div>



Step 2: Continue to create a template footer_stats.css with the following contents:

#board_stats ul {
        text-align: center;
        font: normal 11px tahoma,helvetica,arial,sans-serif;
}
#board_stats li {
        font: normal 11px tahoma,helvetica,arial,sans-serif;
        margin-right: 20px;
}
#board_stats .value {
        background: none repeat scroll 0 0 url(rgba.php?r=0&g=0&b=0&a=25); background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);font: normal 11px tahoma,helvetica,arial,sans-serif;
        border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -khtml-border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF; -khtml-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF;
        color: #222222;
        display: inline-block;
        font-weight: bold;
        margin-right: 3px;
        padding: 3px 7px;
        text-shadow: 0 0 0 transparent, 0 1px 0 rgba(255, 255, 255, 0.6);
}
.borderwrapper {
        overflow: hidden;
        border: 1px solid
        rgb(215, 215, 215);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        padding: 5px;
}
.stats_body {
        width: 100%;
        float: left;
}
.stats_title_left, .stats_title_center, .stats_title_right {
        overflow: hidden;
        background:
        #F7F7F7;
        border-bottom: 1px solid
        #E0E0E0;
        color:
        rgb(100,100,100);
        font: normal 11px tahoma,helvetica,arial,sans-serif;
        text-align: left;
        margin: 0px;
        font-size: 11px;
        font-weight: bold;
        padding: 3px 10px;
}
#stats_content {
        font: normal 11px tahoma,helvetica,arial,sans-serif;
        font-size: 11px;
        padding: 5px 10px;
}



Step 3: Open the template forum_list find the following:
<xen:hook name="forum_list_nodes">
    <xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
</xen:hook>



Add to bottom
<xen:include template="footer_stats" />


How To Make Statistics xenForo Like IPB


It is How To Make Statistics xenForo Like IPB , Good luck!

How To Easily Rebuild The Custom Field Cache On xenForo

How To Easily Rebuild The Custom Field Cache On xenForo. To build back cache is actually very easy to do, but for beginners who wear xenforo forum will usually be difficult. Therefore, I will share a tutorial how to build a cache back properly on the forum xenforo. Take the tour which I will share below correctly and appropriately.


All the custom fields for the users are stored in a couple of places.\
  • The first one is the database table xf_user_field_value in which it maintains a relation between the field_id and the user_id
  • The second one is a php serialized version of it, that is stored inside custom_fields in the xf_user_profile table
If you were to code an addon that writes to a custom field, you would need to keep updating both the table and the serialized version. Using a custom field might be a good idea since there are already hooks in the system for it, and should it need to be editable there is all the functionality already coded in for making it appear in Personal Information or Preferences.

This value is recalculated when the user edits his information and clicks on "save". Another way is when you go to the Maintenance tasks in the AdminCP and "Rebuild user information"

In some cases, you might not want to rebuild all user information as that would also do posts, and any other information associated to the user. If you wanted to only rebuild the custom fields, a simple PHP file with the following code will suffice.
RebuildCustomFields.php


<?php

$startTime = microtime(true);

require('./library/XenForo/Autoloader.php');
XenForo_Autoloader::getInstance()->setupAutoloader('./library');

XenForo_Application::initialize('./library');
XenForo_Application::set('page_start_time', $startTime);
XenForo_Application::setDebugMode(true);

$db = XenForo_Application::getDb();
$userIds = $db->fetchCol("SELECT user_id FROM xf_user");

$model = new XenForo_Model_User();
foreach ($userIds as $id)
{
print "Rebuilding $id<br/>\r\n";
$model->rebuildCustomFieldCache($id);
}

How To Easily Rebuild The Custom Field Cache On xenForo


It is How To Easily Rebuild The Custom Field Cache On xenForo, good luck!

Setup Trash Forum On xenForo

Setup Trash Forum On xenForo. Today I will share a tutorial to make garbage on xenforo forum, so please follow the tutorial that I will give below.

1. Set up a Trash Forum, don't forget to untick "Allow new messages to be posted in this forum".

2. In library\XenForo\Model\Thread.php and In library\XenForo\Model\InlineMod\Thread.php find & change:
$dw->set('discussion_state', 'deleted');
to this:
$dw->set('node_id', 'xxx');

3. Change xxx with the ID of your trash forum.

4. Test it out on a random thread.

Setup Trash Forum On xenForo


Trash Tutorial Forum Setup On xenForo in the easy and practical it, please give it a try and hopefully useful for you

Tuesday, August 27, 2013

How To Add A Custom Tab On XenForo

How To Add A Custom Tab On XenForo. Ever want your user upgrades to have their own tab? well look no further. You will need to go

Follow the tutorial below :
  • Admin Cp
  • Appearanc
  • Style
  • Your Skin
  • Templates

Once your in templates go to "navigation"

Search for this once your in navigation

Code:
<!-- extra tabs: end -->
     <xen:if is="{$extraTabs.end}">
     <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
         <xen:if is="{$extraTab.linksTemplate}">
             <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">


Right above it add this code

Code:
<li class="navTab PopupClosed"><a href="{xen:link account/upgrades}" class="navLink">Premium</a></li>


and boom your own tab for user upgrades

How To Add A Custom Tab On XenForo

How To Add A Custom Tab On XenForo so hopefully can help you. Good Luck!

Friday, August 16, 2013

Staff Online In Columns (With Overlay) On xenForo

Staff Online In Columns (With Overlay) On xenForo. Here I will discuss how to create an online staff forum on design xenforo, for that you please follow the tutorial which I will share below and note how carefully.


Preview :

Staff Online In Columns (With Overlay) On xenForo



Open Sidebar.css
Add this:
Code:
.sidebar .avatarListInline li
{
overflow: hidden; zoom: 1;
float:left;
margin: 5px 0 0 0;
width:25%;
}



Next open sidebar_online_users
Replace:
Code:
<xen:if hascontent="true">
<!-- block: sidebar_online_staff -->
<div class="section staffOnline avatarList">
<div class="secondaryContent">
<h3>{xen:phrase staff_online_now}</h3>
<ul>
<xen:contentcheck>
<xen:foreach loop="$onlineUsers.records" value="$user">
<xen:if is="{$user.is_moderator} OR {$user.is_admin}">
<li>
<xen:avatar user="$user" size="s" img="true" />
<xen:username user="$user" rich="true" />
<div class="userTitle">{xen:helper userTitle, $user}</div>
</li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
</div>
</div>
<!-- end block: sidebar_online_staff -->
</xen:if>


With:
Code:
<xen:if hascontent="true">
 <!-- block: sidebar_online_staff -->
 <div class="section staffOnline avatarListInline">
 <div class="secondaryContent">
 <h3>{xen:phrase staff_online_now}</h3>
 <ul>
 <xen:contentcheck>
 <xen:foreach loop="$onlineUsers.records" value="$user">
 <xen:if is="{$user.is_moderator} OR {$user.is_admin}">
 <li>
 <xen:avatar user="$user" size="s" text="{$user.username} ({xen:helper userTitle, $user})" class="Tooltip" title="{$user.username}, {xen:helper userTitle, $user}" />
 </li>
 </xen:if>
 </xen:foreach>
 </xen:contentcheck>
 </ul>
 <div style="clear:both;"></div>
 </div>
 </div>
 <!-- end block: sidebar_online_staff -->
</xen:if>


It is easy to Staff Online In Columns (With Overlay) On xenForo, good luck!

Thursday, August 15, 2013

How to Make Stack Alert Image On xenForo

How to Make Stack Alert Image On xenForo. Stack alerts are those little popups that appear at the bottom left of your forum when you've stayed on one page for a long time and something is posted that you have opted to be alerted for.

Usually they look like this:


How to Make Stack Alert Image On xenForo


 The CSS I've used is as follows:
#StackAlerts .stackAlert {

border: 3px solid #262C34;

border-radius: 5px;

-webkit-box-shadow: 0 8px 6px -6px #E9E9E9;

-moz-box-shadow: 0 8px 6px -6px #E9E9E9;

box-shadow: 0 8px 6px -6px #E9E9E9;



}



#StackAlerts .stackAlertContent {

color:#000;

text-align: right;

padding-right: 10px !important;

border-radius: 4px;

border-width:3px 0;

background: url("@imagePath/xenforo/misc/Information.png") no-repeat #F5F4F6 !important;

}

Sample image :


It is How to Make Stack Alert Image On xenForo, good luck and hopefully useful for you!

Wednesday, August 14, 2013

How to Make Floating ACP Bar On xenForo

How to Make Floating ACP Bar On xenForo. Hey guys, Im back with yet another nice custom modification to your site to help you.

This modification makes a floating bar at the bottom of your forum that only Administrators and Moderators can see that has your quick links to your Admin Control Panel and Moderator Control Panel and Reports! This is really easy and is literally always on your screen, but this is small so you it doesnt get in the way!

First, Add this to footer.css

.staffBar {
overflow: hidden;
margin-left: auto;
margin-right: auto;
padding: 7px;
background: url("@importurl/xenforo/highlight.png") repeat-x scroll 0pt 0pt rgb(238,238,238);
border: 1px solid rgb(0, 0, 0);
border-radius: 4px 4px 4px 4px;
position: fixed;
bottom: 5px;
left: 30%;
right: 30%;
}

.staffBar ul {
list-style: none;
}

.staffBar li {
display: inline;
margin-right: 5px;
}

.floatLeft {
float: left;
}

.floatRight {
float: right;
}

Now add this to the bottom of the footer template
<xen:if is="{$visitor.is_moderator}">
<div class="staffBar">
<xen:if is="{$visitor.is_admin}">
<li>    
<a href="admin.php" class="acp adminLink" target="_blank"><span class="itemLabel">AdminCP</span></a>
</li>
<xen:if is="{$session.permissionTest}">
<li>
     <a href="{xen:link misc/reset-permissions}" class="permissionTest adminLink OverlayTrigger floatLeft">
     <span class="itemLabel">{xen:phrase permissions_from_x, 'name={$session.permissionTest.username}'}</span>
     </a>
</li>
</xen:if>
</xen:if>
        
<xen:if is="{$visitor.is_moderator}">
<li>
<a href="{xen:link moderation-queue}" class="moderationQueue modLink">
<span class="itemLabel">Mod Queue:</span>
<span class="itemCount {xen:if {$session.moderationCounts.total}, 'alert'}">{$session.moderationCounts.total}</span>
</a>
</li>
<li>
<a href="{xen:link reports}" class="reportedItems modLink">
<span class="itemLabel">Reports:</span>
<span class="itemCount {xen:if {$session.reportCounts.total}, 'alert'}">{$session.reportCounts.total}</span>
</a>
</li>
</xen:if>
</div>
</xen:if>

Now refresh your forum and you will see this:

How to Make Floating ACP Bar On xenForo

And there you go! Hope you guys enjoy, this is just a slight modification to help you get access to your ACP and ModCP easier and faster, hope you guys enjoy!

Easy and practical it How to Make Floating ACP Bar On xenForo, may be useful and help you!