Tutorial XF stats like IPB

This tutorial will show you how to put your stats like XF IPB.​

Go on your templates and create a new template called statsipb and put:

Code:

 <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: discussions sentence}
        <Span class = "value"> {xen: number $ boardTotals.messages} </ span> {xen: sentence messages}
        <Span class = "value"> {xen: number $ boardTotals.users} </ span> {xen: MEMBERS_COUNT sentence}
        <Span class = "value"> <xen: username user = "$ boardTotals.latestUser" /> </a> </ span> {xen: latest_member sentence}
    </ 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: online_now_x_members_y_guests_z sentence, 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: guest sentence} <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: and_x_more sentence 'count = {xen: $ onlineUsers number. 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: purple; font-weight: bold;"> Bots </ span>
            </ Li>
        </ Ul>
        </ Div>
    </ Div>
</ Div> [/ CODE]
And save it.

Now create a template called  statsipb.css  and putt inside:



	
Code:
	
 #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;
}
And save it.And now we go forum_list search:
Code:
 <xen: name = hook "forum_list_nodes">
    <Xen: if is = "{$ renderedNodes}"> <xen: include template = "node_list" /> </ xen: if>
</ Xen: hook> [/ CODE]
And putt below:



	
Code:
	
 <xen: include template = "statsipb" /> [/ CODE]