Post by Teg on Sept 25, 2015 22:03:13 GMT -5
This info center was initially created by me for a PromoForum. After sitting with it for the last four days, I thought it would be cool to share it as a usable modification for all ProBoards users. I ask that you keep the headers/credits in tact if you choose to use it. If you have any questions about it, or need support, I will answer them in this thread and the "Official ProBoards Support" thread only.
Here is what the info center looks like:
Before you get started, you'll need to make sure you've got font awesome icons readily available on your forum. To do this, go to Admin > Themes > Layout Templates. From there select the Forum Wrapper Template. In the head section that begins with <head> and ends with </head> add the following code after $[head] :
Be sure to save it after you've done so. If you wish to use other icons instead of the ones provided with this template modification, you'll have to search their icon database at the Font Awesome website.
You will also have to install the Forum Age Plugin, by Peter from ProBoards Support, and set the following settings:
*NOTE: Change the "text" and the "title" to whatever you want, or it will display as shown in the screenshot of the info center. If you need support with the plugin, then post in Peter's thread.
Go to Admin > Themes > Advanced Styles & CSS. Select the Style Sheet tab and scroll all the way to the bottom. Click in the white-space after the very last line and hit enter (return) a few times. Then, add the following CSS.
*NOTE: Each section of the CSS is labeled and tells you what it styles. While a lot of the colors are the same, the hex codes are there and you can change them to whatever you want. If you want to leave all text colors default to go with your theme remove the "color: #hex code;" portion of the CSS. Here is the CSS Code:
The next step is to and the info center modification itself. To do this, go to Admin > Themes > Layout Templates and select the Home template. Scroll down and find the part of the page that starts with "{if $[show_stats]}" and select everything from the beginning of that line all the way down to the bottom. Then, delete it and copy and paste the following code:
All color changes can be made in the CSS Style Sheet. If you wish to change what the text says, you'll have to do that in the code above for the specific text you'd like to change.
Any comments are welcome and appreciated. All support related questions about this template should be asked here. Thanks guys, and enjoy!
Here is what the info center looks like:
Before you get started, you'll need to make sure you've got font awesome icons readily available on your forum. To do this, go to Admin > Themes > Layout Templates. From there select the Forum Wrapper Template. In the head section that begins with <head> and ends with </head> add the following code after $[head] :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">Be sure to save it after you've done so. If you wish to use other icons instead of the ones provided with this template modification, you'll have to search their icon database at the Font Awesome website.
You will also have to install the Forum Age Plugin, by Peter from ProBoards Support, and set the following settings:
*NOTE: Change the "text" and the "title" to whatever you want, or it will display as shown in the screenshot of the info center. If you need support with the plugin, then post in Peter's thread.
Go to Admin > Themes > Advanced Styles & CSS. Select the Style Sheet tab and scroll all the way to the bottom. Click in the white-space after the very last line and hit enter (return) a few times. Then, add the following CSS.
*NOTE: Each section of the CSS is labeled and tells you what it styles. While a lot of the colors are the same, the hex codes are there and you can change them to whatever you want. If you want to leave all text colors default to go with your theme remove the "color: #hex code;" portion of the CSS. Here is the CSS Code:
/*Info Center*/
/*This Styles the Font Awesome Icons*/
i.info_center_icons {
color: #43494c;
}
/*Chage the color & font size of the text in table headers*/
th.info_center_text {
font-size: 14px;
color: #43494c;
}
/*This makes all of the "Legend" text, including the individual
groups italic*/
.user_legend_text {
font-style: italic;
}
/*This colors the text "Legend"*/
.user_legend_text_legend {
color: #43494c;
}
/*This next group of CSS applies to the links and display style
for the user groups in the user legend. You can add as many
groups as you would like so long as you add them here and the
"home" template. These are the default groups on PromoForum, so
you may change them.*/
a.ic_group1, a.ic_group1:visited, a.ic_group1:active {
font-style: italic;
color: #e86070 !important;;
}
a.ic_group1:hover {
color: #cf5765 !important;;
}
a.ic_group2, a.ic_group2:visited, a.ic_group2:active {
font-style: italic;
color: #60cde8 !important;;
}
a.ic_group2:hover {
color: #52adc4 !important;;
}
a.ic_group3, a.ic_group3:visited, a.ic_group3:active {
font-style: italic;
color: #e78d05 !important;;
}
a.ic_group3:hover {
color: #d68204 !important;;
}
a.ic_group4, a.ic_group4:visited, a.ic_group4:active {
font-style: italic;
color: #c01f1f !important;;
}
a.ic_group4:hover {
color: #981919 !important;;
}
a.ic_group_member, a.ic_group_member:visited, a.ic_group_member:active {
font-style: italic;
color: #43494c !important;;
}
a.ic_group_member:hover {
color: #000000 !important;;
}
a.ic_group_banned, a.ic_group_banned:visited, a.ic_group_banned:active {
font-style: italic;
color: #9d9e9e !important;;
}
a.ic_group_banned:hover {
color: #878888 !important;;
}
/*This changes the width and style of the horizontal rule in the
information center only.*/
hr.ic {
width: 90%;
border: 1px dashed #f4f5f5;
}
/*This changes width and text style of the table head for threads,
posts, and members area*/
th.threads_posts_members {
width: 25%;
font-size: 14px;
color: #43494c;
}
/*This changes the width and text style of the table head for the
last new member area*/
th.ic_last_new_mem {
width: 40%;
font-size: 14px;
color: #43494c;
}
/*This changes the table column width and text style for threads,
posts, members area*/
td.threads_posts_members {
width: 25%;
font-size: 12px;
color: #43494c;
}
/*This changes the table column width and text style for the last
new member area*/
td.ic_last_new_mem {
width: 40%;
font-size: 12px;
color: #43494c;
}
/*This changes the table head width and text style for the Forum
Age and Birthdays area*/
th.age_birthdays {
width: 100%;
font-size: 14px;
color: #43494c;
}
/*This changes the width and text of the table colum of the forum
age text area*/
td.age {
width: 100%;
font-size: 12px;
color: #43494c;
}
/*End of Info Center CSS by PromoForum*/
The next step is to and the info center modification itself. To do this, go to Admin > Themes > Layout Templates and select the Home template. Scroll down and find the part of the page that starts with "{if $[show_stats]}" and select everything from the beginning of that line all the way down to the bottom. Then, delete it and copy and paste the following code:
{if $[show_stats]}
<!--
PromoForum Information Center Modification
by: Amanda Zimmer aka Amanda, Zimm, Teg, Beans, Integrity, baybgurl
This info center modification was made for use on http://promoforum.boards.net.
It can be used by any member of the ProBoards forum community provided this header stays in tact.
For support related to this template modification, please visit the "Official Support Thread" at http://support.proboards.com/thread/561774/template-pf-info-center-remodel
-->
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon"><i class="info_center_icons fa fa-users fa-2x"></i></td>
<td class="info last">
<table>
<tbody>
<tr><th class="info_center_text">Online Now...</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}<br /><br />
<!--Begin User Legend Custom-->
<span style="font-style: italic; color: #43494c;">Legend:</span> <a class="ic_group1" href="http://promoforum.boards.net/members?group=1&view=group">Administrator</a>, <a class="ic_group2" href="http://promoforum.boards.net/members?group=2&view=group">Mod Squad</a>, <a class="ic_group3" href="http://promoforum.boards.net/members?group=3&view=group">Package Team</a>, <a class="ic_group4" href="http://promoforum.boards.net/members?group=4&view=group">Crit Platoon</a>, <a class="ic_group_member" href="http://promoforum.boards.net/members">Member</a>, <a class="ic_group_banned" href="http://promoforum.boards.net/members?group=8&view=group">Banned</a>
<!--End User Legend Custom-->
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon"><i class="info_center_icons fa fa-hourglass fa-2x"></i></td>
<td class="info">
<table>
<tbody>
<tr><th class="info_center_text">Here today...</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
<tr><td>
{foreach $[online_user_24]}
$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]
{/foreach}
{if $[total_online_not_shown_24]}
, and <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<hr class="ic">
<tr>
<td class="icon"><i class="info_center_icons fa fa-pie-chart fa-2x"></i></td>
<td class="info">
<!--Begin Forum Stats, Threads/posts/last post - custom-->
<table>
<tbody>
<tr><th class="threads_posts_members">Total Threads</th><th class=" threads_posts_members">Total Posts</th><th class="ic_last_new_mem">Last Post</th></tr>
<tr><td class="threads_posts_members">$[total_threads]</td><td class="threads_posts_members">$[total_posts]</td>{if $[last_updated_thread]}<td class="ic_last_new_mem">Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by] ($[last_updated_thread.last_post.created_on])</td></tr>{/if}
</tbody>
</table>
<!--End Forum Stats, Threads/posts/last post - custom-->
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--Begin Custom Info Center Addon Section for members, forum age, and birthdays-->
<div class="container stats">
<div class="title-bar"><h2>PromoForum Members</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td colspan="2">
<tr>
<td>
<table>
<tr>
<td class="icon"><i class="info_center_icons fa fa-users fa-2x"></i></td>
<td class="info">
<!--Begin Custom Member layout for info center-->
<table>
<tbody>
<tr><th class="threads_posts_members">Total Members</th><th class="threads_posts_members">Most Ever Online</th><th class="ic_last_new_mem">Welcome Our Newest Member</th></tr>
<tr><td class="threads_posts_members">$[total_members]</td><td class="threads_posts_members">$[most_users_online] <span class="small">($[most_users_online_date])</span></td><td class="ic_last_new_mem">$[newest_user]</td></tr>
</tbody>
</table>
<!--End Custom Member layout for info center-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--Begin Custom Forum Age Area-->
<table>
<hr class="ic">
<tr>
<td class="icon"><i class="info_center_icons fa fa-history fa-2x"></i></td>
<td class="info">
<table>
<tbody>
<tr><th class="age_birthdays">How Old Are We?</th></tr>
<tr><td class="age"><br /><span class="forum-age"></span></td></tr>
</table>
</td>
</tr>
</table>
<!--End Custom Forum Age Area-->
</td>
</tr>
<tr>
<td>
<!--Begin Birthday Section-->
<table>
<hr class="ic">
<tr>
<td class="icon"><i class="info_center_icons fa fa-birthday-cake fa-2x"></i></td>
<td class="info last">
<table>
<tbody>
<tr><th class="age_birthdays">Today's Birthdays</th></tr>
<tr class="last"><td><span style="font-size: 12px; color: #43494c;">$[birthdays_today_link]</span></td></tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--End Birthday Section-->
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
All color changes can be made in the CSS Style Sheet. If you wish to change what the text says, you'll have to do that in the code above for the specific text you'd like to change.
Any comments are welcome and appreciated. All support related questions about this template should be asked here. Thanks guys, and enjoy!
Attachments:
I may test it out and see how it looks on CYN!