[SSD] Brighten up your Forum Stats Box

[SSD] Brighten up your Forum Stats Box

Overview Reviews (2) Discussion
iamjudd said:
Would you just need the class name of that section?
Click to expand...

No, I need the full line of code in the template starting <dl class="mostCount">

iamjudd said:
Also I just noticed the icons only show on my portal and not on the forum listings
Click to expand...
Did you just change the template for the XenPorta page? If so, then you'll need to also change the standard template. When I wrote the tutorial, it was mostly guesswork what would need changing for XenPorta.
 
Lisa said:
No, I need the full line of code in the template starting <dl class="mostCount">


Did you just change the template for the XenPorta page? If so, then you'll need to also change the standard template. When I wrote the tutorial, it was mostly guesswork what would need changing for XenPorta.
Click to expand...
If I give you access to my admin panel briefly would you possibly be able to help fix it?
And you can see what you would need to add it for this tutorial.
 
Thanks for this, it looks good.

If you have XenPorta, you need a bit of extra code to add an icon to the User Record.

Screen Shot 2015-07-14 at 7.31.37 pm.webp

In EWRwidget_ForumStats use:

Code: 
<div class="section widget_{$wWidget}" id="widget_{$wWidlink}">
    <div class="secondaryContent statsList">
        <h3>{xen:phrase forum_statistics}</h3>
        <div class="pairsJustified">
            <div class="pairsJustified">
            <div class="pairsJustified">
            <dl class="discussionCount"><dt class="fa fa-comments fa-2x Tooltip" title="{xen:phrase discussions}"></dt><dt> {xen:phrase discussions}:</dt>
                <dd>{xen:number $wUncached.discussions}</dd></dl>

            <dl class="messageCount"><dt class="fa fa-comment fa-2x Tooltip" title="{xen:phrase messages}"></dt><dt>{xen:phrase messages}:</dt>
                <dd>{xen:number $wUncached.messages}</dd></dl>

            <dl class="memberCount"><dt class="fa fa-users fa-2x Tooltip" title="{xen:phrase members_count}"></dt><dt>{xen:phrase members_count}:</dt>
                <dd>{xen:number $wUncached.users}</dd></dl>

            <dl class="mostCount"><dt class="fa fa-user-times fa-2x Tooltip" title="{xen:phrase porta2_user_record}"></dt><dt>{xen:phrase porta2_user_record}:</dt>
                <dd class="Tooltip" title="{xen:dateTime $wUncached.most_users.time}">{xen:number $wUncached.most_users.total}</dd></dl>

            <dl class="latestUser_tvttime"><dt class="fa fa-user-plus fa-2x Tooltip" title="{xen:phrase latest_member}"></dt><dt>{xen:phrase latest_member}:</dt>
                <dd><xen:username user="$wUncached.latestUser" text="rich" /></dd></dl>
            <!-- slot: forum_stats_extra -->
        </div>
    </div>
</div>

In extra.css use:
Code: 
.pairsJustified dt.fa.fa-comments.fa-2x, .pairsJustified dt.fa.fa-comment.fa-2x, .pairsJustified dt.fa.fa-users.fa-2x,
.pairsJustified dt.fa.fa-user-times.fa-2x, .pairsJustified dt.fa.fa-user-plus.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  border: 3px solid;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  color: #1e598e
}

.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .mostCount dt, .pairsJustified .latestUser_tvttime dt{
padding-top: 10px;
}

.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .mostCount dd, .pairsJustified .latestUser_tvttime dd {
padding-top: 10px;
}




 
rushmere said:
Thanks for this, it looks good.

If you have XenPorta, you need a bit of extra code to add an icon to the User Record.

View attachment 111260

In EWRwidget_ForumStats use:

Code: 
<div class="section widget_{$wWidget}" id="widget_{$wWidlink}">
    <div class="secondaryContent statsList">
        <h3>{xen:phrase forum_statistics}</h3>
        <div class="pairsJustified">
            <div class="pairsJustified">
            <div class="pairsJustified">
            <dl class="discussionCount"><dt class="fa fa-comments fa-2x Tooltip" title="{xen:phrase discussions}"></dt><dt> {xen:phrase discussions}:</dt>
                <dd>{xen:number $wUncached.discussions}</dd></dl>

            <dl class="messageCount"><dt class="fa fa-comment fa-2x Tooltip" title="{xen:phrase messages}"></dt><dt>{xen:phrase messages}:</dt>
                <dd>{xen:number $wUncached.messages}</dd></dl>

            <dl class="memberCount"><dt class="fa fa-users fa-2x Tooltip" title="{xen:phrase members_count}"></dt><dt>{xen:phrase members_count}:</dt>
                <dd>{xen:number $wUncached.users}</dd></dl>

            <dl class="mostCount"><dt class="fa fa-user-times fa-2x Tooltip" title="{xen:phrase porta2_user_record}"></dt><dt>{xen:phrase porta2_user_record}:</dt>
                <dd class="Tooltip" title="{xen:dateTime $wUncached.most_users.time}">{xen:number $wUncached.most_users.total}</dd></dl>

            <dl class="latestUser_tvttime"><dt class="fa fa-user-plus fa-2x Tooltip" title="{xen:phrase latest_member}"></dt><dt>{xen:phrase latest_member}:</dt>
                <dd><xen:username user="$wUncached.latestUser" text="rich" /></dd></dl>
            <!-- slot: forum_stats_extra -->
        </div>
    </div>
</div>

In extra.css use:
Code: 
.pairsJustified dt.fa.fa-comments.fa-2x, .pairsJustified dt.fa.fa-comment.fa-2x, .pairsJustified dt.fa.fa-users.fa-2x,
.pairsJustified dt.fa.fa-user-times.fa-2x, .pairsJustified dt.fa.fa-user-plus.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  border: 3px solid;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  color: #1e598e
}

.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .mostCount dt, .pairsJustified .latestUser_tvttime dt{
padding-top: 10px;
}

.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .mostCount dd, .pairsJustified .latestUser_tvttime dd {
padding-top: 10px;
}
Click to expand...

Can you show the code for the colored icons?
 
For the coloured version, use the same code in my previous post for EWRwidget_ForumStats, but use this in extra.css:

Code: 
.pairsJustified dt.fa.fa-comments.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #C22326
}

.pairsJustified .discussionCount dt, .pairsJustified .discussionCount dd {
  color: #C22326;
  }
.pairsJustified dt.fa.fa-comment.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #F37338;
}
.pairsJustified .messageCount dt, .pairsJustified .messageCount dd {
   color: #F37338;
   }

.pairsJustified dt.fa.fa-users.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #027878;
}

.pairsJustified .mostCount dt, .pairsJustified .mostCount {
  color: #027878;
  }
.pairsJustified dt.fa.fa-user-times.fa-2x  {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #68A434;
}

.pairsJustified .memberCount dt, .pairsJustified .memberCount {
  color: #027878;
  }
.pairsJustified dt.fa.fa-user-plus.fa-2x  {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #801638;
}

.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .mostCount dt, .pairsJustified .latestUser_tvttime dt{
padding-top: 10px;
}

.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .mostCount dd, .pairsJustified .latestUser_tvttime dd {
padding-top: 10px;
}

Screen Shot 2015-07-14 at 7.52.30 pm.webp
 
rushmere said:
For the coloured version, use the same code in my previous post for EWRwidget_ForumStats, but use this in extra.css:

Code: 
.pairsJustified dt.fa.fa-comments.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #C22326
}

.pairsJustified .discussionCount dt, .pairsJustified .discussionCount dd {
  color: #C22326;
  }
.pairsJustified dt.fa.fa-comment.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #F37338;
}
.pairsJustified .messageCount dt, .pairsJustified .messageCount dd {
   color: #F37338;
   }

.pairsJustified dt.fa.fa-users.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #027878;
}

.pairsJustified .mostCount dt, .pairsJustified .mostCount {
  color: #027878;
  }
.pairsJustified dt.fa.fa-user-times.fa-2x  {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #68A434;
}

.pairsJustified .memberCount dt, .pairsJustified .memberCount {
  color: #027878;
  }
.pairsJustified dt.fa.fa-user-plus.fa-2x  {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #801638;
}

.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .mostCount dt, .pairsJustified .latestUser_tvttime dt{
padding-top: 10px;
}

.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .mostCount dd, .pairsJustified .latestUser_tvttime dd {
padding-top: 10px;
}

View attachment 111262
Click to expand...
thank you very much!
 
Mine is just displaying blank square boxes. What am I doing wrong? I read that it's something with fontawesome but I don't know what that is, nor do I know where to download the addon.
 
You need to be running FontAwesome on your site already. Make sure that:-
Code: 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
has been added to your PAGE_CONTAINER template inside the <head> section.
 
thanks for this, i made the icons smaller and more compact. this didn't work at first, then i released you have to add your code in template "wf_widget_stats" if you're using WF.
 
You must log in or register to reply here.
Top Bottom