Information & Statistics Layout Tutorial
Mar 23, 2013 9:07:41 GMT -8
aRMY83, CåñåÐå™, and 6 more like this
Post by - TuGs on Mar 23, 2013 9:07:41 GMT -8
Information & Statistics Layout Tutorial
DO NOT FORGET DO BACK UP WHAT YOU CURRENTLY HAVE WHILE YOUR EDITING ANY OF THESE VERY IMPORTANT!!! BACK UP!!!
First things first i need to explain that there are two places to write this code.
Themes > Layout Template > Board = Displays on Boards
Themes > Layout Template > Home = Displays on Homepage
if you want this code in both places you need to copy and paste your final copy to your other section (which way around you choose)
to do this copy and paste from before the {if $[show_stats]} and after the last {/if} at the bottom of the page. Unless you use the "Hide Info Center From Guests" code in which case you copy and paste from before the {if $[current_user.is_member]}{if $[show_stats]}and after the last {/if}
Display On Home Page Only
goto Themes > Layout Template > Board
put <!-- before the {if $[show_stats]} and --> after the last {/if} at the bottom of the page.
Display On Board Page's Only
goto Themes > Layout Template > Home
put <!-- before the {if $[show_stats]} and --> after the last {/if} at the bottom of the page.
Disable Info Center Completely
go to:
Settings > Forum Settings
Display Info Centers "no"
For the sake of this tutorial i'm going to use Themes > Layout Template > Home
Information & Statistics Layout Tutorial Index.
This Tutorial includes,
- Creating 3 Columns
- How To Add A New Row
- Place Content On The Right Of A Column
- Hide Inner Border
- Customize Size (Width) Of Columns (Move Divider)
- Customize Content
- Using Custom Image's
- Remove Images
- Change Images
- Collapsible Info Center with Remember
- Change Your Info Center Title
- Hide Info Center From Guests
- Display On Home Page Only
- Display On Board Page's Only
- Disable Info Center Completely
- Pre-Made 2 Row By 2 Column Information Center
- Total of guests/staff/members Online
- Total of guests/staff/members Online in the last 24 hours
Pre-Made 2 Row By 2 Column Information Center
Remove Lines 25 -122 replace with this code:
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td class="icon">$[image.stats]</td>
<td class="info">
<table>
<tbody>
<tr><th>Threads and Posts</th></tr>
<tr><td>Total Threads: $[total_threads] Total Posts: $[total_posts]</td></tr>
{if $[last_updated_thread]}
<tr><td>Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by_user] ($[last_updated_thread.last_post.date])</td></tr>{/if}
<tr><td>$[recent_threads_link] - $[recent_posts_link] - $[rss_feed_link]{if $[mark_boards_read_link]} - $[mark_boards_read_link]{/if}</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="icon">$[image.members]</td>
<td class="info">
<table>
<tbody>
<tr><th>Members</th></tr>
<tr><td>Total Members: $[total_members]</td></tr>
<tr><td>Newest Member: $[newest_user]</td></tr>
<tr><td>Most Users Online: $[most_users_online] <span class="small">($[most_users_online_date])</span></td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="icon">$[image.online_24]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online in the Last 24 Hours</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.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_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>{/if}</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if $[total_guests_online] != 1}s{/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}</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
Change Your Info Center Title
Themes > Layout Template > Home
go to this code and edit the bold.
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
for reference: & is the "&" symbol
Hide Info Center From Guests
Themes > Layout Template > Home
Find Red in this code. insert blue here
{/if}
{if $[current_user.is_member]}
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics <span style="float: right; ">+/-</span></h2></div>
<div class="content">
<table>
Then Right at the bottom of the code insert
{/if}
Collapsible Info Center with Remember
Use this plugin by Bennett 🚀additionally you can add hide and show text on the info center title bar to the right by replacing this line
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
with:
<div class="title-bar"><h2>Forum Information & Statistics <span style="float: right; ">Hide/Show</span></h2></div>
(you can change the text if you like by editing the red)
Change Images
Simply go to,
Themes > Theme Manager > Images
Remove Images
Remove this line to remove Members Online Image:
<td class="icon">$[image.members]</td>
Remove this line to remove Threads And Posts Image:
<td class="icon">$[image.stats]</td>
Remove this line to remove Users Online In The Last 24 hours Image:
<td class="icon">$[image.online_24]</td>
Remove this line to remove Users Online Image:
<td class="icon">$[image.online]</td>
How To Add A New Row
you can use this HERE by @xsteveuk or carry on here...
at the bottom of the code
it should read :
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
add this code below between the red in the above code (after the last </tr>)
<tr class="last">
<td>
<table>
<tr>
<td class="icon"><img src="URL OF IMAGE" alt="MOUSE OVER TEXT HERE" /></td>
<td class="last">
<table>
<tbody>
<tr><th>1st Column Custom Title</th></tr>
<tr><td>1st Column Custom Text Line 1</td></tr>
<tr><td>1st Column Custom Text Line 2</td></tr>
<tr><td>1st Column Custom Text Line 3</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
Note: (optional) <td colspan="2"> is the amount of columns the row will span across, here is a Example. (set this to 3 if your spanning across 3 columns for example.)
if you want the Columns to be aligned properly in separate dedicated areas i wouldn't recommend this this option. If this is what you want switch <td colspan="2"> with the green <td> in the above code.
if you do choose this option remember that you cannot add another content column to this row as you have spanned across it. unless your using 3 columns.
Use A Custom image Above in red or use these defaults below in replacement:
Members Online Image:
<td class="icon">$[image.members]</td>
Threads And Posts Image:
<td class="icon">$[image.stats]</td>
Users Online In The Last 24 hours Image:
<td class="icon">$[image.online_24]</td>
Users Online Image:
<td class="icon">$[image.online]</td>
Place Content On The Right Of A Column
Note: if your trying to create 3 columns doing this STOP! scroll down for a tutorial on how to make 3 columns. and follow those steps.
IMPORTANT! : Go to the code you wish to put the NEW content next too:
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon"><img src="URL OF IMAGE" alt="MOUSE OVER TEXT HERE" /></td>
<td class="info last">
<table>
<tbody>
<tr><th>1st Column Custom Title</th></tr>
<tr><td>1st Column Custom Text Line 1</td></tr>
<tr><td>1st Column Custom Text Line 2</td></tr>
<tr><td>1st Column Custom Text Line 3</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
1. Remove Red. so your left with <td> (dont forget white space) if the <td colspan="2"> is not there and its already a <td> move on...
2. Paste this code below between the blue.
<td>
<table>
<tr>
<td class="icon"><img src="URL OF IMAGE" alt="MOUSE OVER TEXT HERE" /></td>
<td class="last">
<table>
<tbody>
<tr><th>2nd Column Custom Title</th></tr>
<tr><td>2nd Column Custom Text Line 1</td></tr>
<tr><td>2nd Column Custom Text Line 2</td></tr>
<tr><td>2nd Column Custom Text Line 3</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
Again you can Use A Custom image Above in red or use these defaults below in replacement:
Members Online Image:
<td class="icon">$[image.members]</td>
Threads And Posts Image:
<td class="icon">$[image.stats]</td>
Users Online In The Last 24 hours Image:
<td class="icon">$[image.online_24]</td>
Users Online Image:
<td class="icon">$[image.online]</td>
Customize Content of Tables.
This is where you can customize your content of the table's between the current <tbody> tags. This is "Users Online" for example.<tbody>
<tr><th>Users Online</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online]Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if$[total_guests_online] !=1}s{/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}</td></tr>
</tbody>
Note: There are 3 more like this in the code "Members" "Threads And Posts" "Users Online In The Last 24 hours" with <tbody> tags around them.
We are going to dissect the "Users Online" code as an example you can use this for all other content tables. Im not going teaching you HTML here.
You must have a little HTML knowledge to do this successfully. but here is a insight:
Red - If Statement, {if $[total_members_online] != 1}s{/if} (this means if the $[total_members_online] is above 1 it will display the "s"
Green - notice the <th> its the header text tag.
Purple - Regular text.
Pink - these are codes pre defined by pro boards they all do/mean different things but you can make out what they do by previewing your website,
and also you can see there output in HTML by right clicking and view source webpage.
Blue - Start & End tags - with these tags
you can start a new line for your own content, or you can delete from
these tags for example if you wanted to remove:
4 Staff, 39 Members, 82 Guests.
you would delete this line like so...
"<tr><td>$[total_staff_online] Staff, $[total_members_online]Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if$[total_guests_online] !=1}s{/if}.</td></tr>"
if you create a new line make sure you end the tags the right way round. For example:
<tr><td>Custom Line</td></tr> not <tr><td>Custom Line</tr></td>)
this should be enough information for you to play with, to edit your table content.
I have some fancy <tr><td>content</td></tr> lines on which you might like..
These Next Two Codes are the Total of guests / staff / members combined that are Online
| Users Online |
|---|
| There Are 2 Users Online Now or if 1 user There is 1 User Online Now |
<tr><td>There
<script type="text/javascript">
var tmp=($[total_online]);
if( tmp > 1 ){
document.write("Are " + tmp + " Users");
}else{
document.write("Is " + tmp + " User");
}
</script> Online Now</td></tr>
| Users Online in the Last 24 Hours |
|---|
| There Were 210 Users Online In The Last 24 Hours Or if 1 user There Was 1 User Online In The Last 24 Hours |
<tr><td>There
<script type="text/javascript">
var tmp=($[total_online_24]);
if( tmp > 1 ){
document.write("Were " + tmp + " Users");
}else{
document.write("Was " + tmp + " User");
}
</script> Online In The Last 24 Hours</td></tr>
i would like to add the <script> codes used here can conflict with plugins that are not 100% up to scratch
one plugin that has been reported is here plugin-proboards-sidebar.
Customize Size Of Columns (Move Divider)
Themes > Advanced Styles & CSS > Style Sheet
then edit the bold making sure both values add to 100%
Line1271:
.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }
Line 1279:
.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; width: 57%; }
Hide Inner Border
Themes > Advanced Styles & CSS > Style Sheet
then edit the bold to "0"
Line 1262
@info_inner_border: 1px solid @container_inner_border_color
Change the space around the image
(this actually defines the space from left of the table then THROUGH the image to the text content)
Themes > Advanced Styles & CSS > Style Sheet
then edit the bold to how much space you want from the left side of the table
Line 1275
.stats .icon { width: 70px; text-align: center; vertical-align: middle; }
Creating 3 Columns
let me know if i have missed anything... i will not let one stone be unturned!
feedback would be great
1. Place 3rd Column Content
Themes > Layout Template > Home
IMPORTANT! : Go to the code on the 2nd column that you wish to put the NEW 3rd column content next too:
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon"><img src="URL OF IMAGE" alt="MOUSE OVER TEXT HERE" /></td>
<td class="info last">
<table>
<tbody>
<tr><th>2nd Column Custom Title</th></tr>
<tr><td>2nd Column Custom Text Line 1</td></tr>
<tr><td>2nd Column Custom Text Line 2</td></tr>
<tr><td>2nd Column Custom Text Line 3</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
1. Remove Red. so your left with <td> (dont forget white space) if the <td colspan="2"> is not there and its already a <td> move on...
2. Paste this code below between the blue.
<td>
<table>
<tr>
<td class="icon"><img src="URL OF IMAGE" alt="MOUSE OVER TEXT HERE" /></td>
<td class="last">
<table>
<tbody>
<tr><th>3rd Column Custom Title</th></tr>
<tr><td>3rd Column Custom Text Line 1</td></tr>
<tr><td>3rd Column Custom Text Line 2</td></tr>
<tr><td>3rd Column Custom Text Line 3</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
NOTE: (optional) <td rowspan="2"> is the amount of rows the Column will span across, here is a example. (set this to 3 if your spanning across 3 rows for example.) although if you want the rows to be aligned properly in separate dedicated areas i wouldn't recommend this this option.
If this is what you want switch <td rowspan="2"> with the green <td> in the above code.
if you do choose this option remember that you cannot add another content row to this Column as you have spanned across it. unless your using 3+ rows.
You can also Use A Custom image here in red in the Above code or use these defaults below in replacement:
Members Online Image:
<td class="icon">$[image.members]</td>
Threads And Posts Image:
<td class="icon">$[image.stats]</td>
Users Online In The Last 24 hours Image:
<td class="icon">$[image.online_24]</td>
Users Online Image:
<td class="icon">$[image.online]</td>
At this moment your site wont look right you need to edit the CSS now.
2. Define the space that each column will use
next go to Themes > Advanced Styles & CSS > Style Sheet
so 3 Dived by 100% = 33.333333
im going to down grade this by .3 to be on the safe side. so we have 33
edit both bold values to 33% this will leave another 34% room for your new column.
Line1271:
.stats .content > table > tbody > tr > td { border: info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }
Line 1279:
.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; width: 57%; }
3. Change the space around the image
edit the bold to 35px if you have images
(you can change this value higher if you like but i don't suggest going smaller as the content text then overlaps the default image's if your using them)
if you have no images set this too 10 so you have a little space from the edge of the border
Line 1275
.stats .icon { width: 70px; text-align: center; vertical-align: middle; }
Congratulations you have created 3 columns in your info center!
(optional)
After you have completed this you might want to go back to Themes > Layout Template > Home
and resize your text in the content between the <tr><td>Content</td></tr> tags for example like:
<tr><td><font size="1">Content</font></td></tr>
i suggest you scroll back up if you have followed the 3 column tutorial and learn some more on the editing of the content.Tutorial
hope you get along fine with this,
let me know if i have missed anything... i will not let one stone be unturned!
feedback would be great
