SoCal
« Make-Your-Own Info Center »

Welcome Guest. Please Login or Register.
Sept 2, 2010, 4:40pm

[Home] [New Topics] [Help] [Search] [Login] [Register]



SoCal :: SoCal Codes :: ProBoards Codes :: Make-Your-Own Info Center
Page 1 of 21 » Jump to page   Go    [Search This Thread][Send Topic To Friend] [Print]
AuthorTopic: Make-Your-Own Info Center (Read 27,683 times)
california
[image]
I'm not here...
member is offline

[avatar]



Joined: Nov 2004
Gender: Male
Posts: 6,425
Make-Your-Own Info Center
« Thread Started on Nov 13, 2005, 4:33am »
The Intro

This is not a normal Info Center code. What it allows you to do is create your own Info Center using HTML. Now if you don't know HTML, you may be thinking, well damn, you may as well ask me to just write one in JavaScript then. But HTML is easy, especially compared to ProBoards-style JavaScript. There are lots of people who know HTML well enough to create a single table and not very many who can make decent one using JS. So in walks this code, which allows people who know absolutely no JavaScript to make a completely customized, unique Info Center mod specific to only their forum.

Don't know HTML at all? You still may be able to use this, because those kind souls who do know HTML may be willing to write the markup for you. There is a thread in Everything HTML for premade HTML Info Centers to be used with this code:

Premade HTML Info Centers:
Since HTML Info Centers are infinitely easier to make than an entire JS one, there are a fairly good amount to choose from. If you are willing and have the time, please give it a try and submit!

There is also a thread where you can request one based on a sketch or table you made in MS Word or a graphics program.


How it Works

You can already make an Info Center using HTML like you would make any other table, but the problem is that pure HTML is static, and the Info Center needs to update continuously whenever a new post is made or a new member joins. Obviously you can't go and edit your HTML every time this happens. So you create the basic framework for the HTML and hard-code in everything that doesn't change, and for the dynamic content, the stuff that does change, like the total number of members, the link to the last updated topic, the list of users who are currently online, etc, you use something in your markup to signify that the dynamic value gets placed there later. The code then finds that marker and replaces it with what the value should be. So what does this marker look like? Well it's a simple span tag with an ID.

<span id="mydynamiccontentid"></span>

Embedded in the code is a list of these content IDs that represent the different dynamic parts of a ProBoards Info Center, as well as some extra "stuff".


The IDs

  • pbtime - The current date and time as pulled from the top welcome table
  • totalthreads, totalposts - a number for the total threads/topics, and the total posts of the forum
  • postsperboard, postspercat, threadsperboard, threadspercat - all rounded number averages found by some simple division
  • lastpostname, lastpostuser, lastposttime - the last updated topic name (link), the user who posted it (link?),  and the timestamp for it
  • yourusername, yourdisplayname - the plain text username & display name of whoever's viewing, "Guest" for guests
  • yourpms, yournewpms - just the numbers, as pulled from the welcome table
  • modifyprofile - a link to the modify profile page for whoever's viewing, the text of the link is edittable in the JS*
  • totalmem - the total number of members registered at the forum, just the number
  • postspermem, threadspermem - rounded number averages again
  • newmem - a link to the profile of the newest member
  • totalbdays, totalevents - the total number of entries for either, 0 if there are none naturally.
  • bdayslist, eventslist, onlinelist - comma seperated lists of links, or if there are none, the messages are edittable in the JS*
  • mostonline - not the whole message, but just the number and timestamp, for example "327, May 10, 2005, 11:21am"
  • totalonline, membersonline, guestsonline, invisonline - just the numbers, and total doesn't count guests
  • [custom]online - where custom is replaced by whatever you have in the memberGroups array edittable in the JS. For example, adminsonline etc.
  • usersonlinetoday - The list of users who were online today.
  • totalonlinetoday - The total amount of users who were online today.
  • memberonlinetoday - The total amount of members who were online today.
  • guestsonlinetoday - The total amount of guests who were online today.
  • invisonlinetoday - The total amount of invisible users who were online today.

* whenever I say "edittable in the JS", I mean there's a variable for it in the JavaScript portion of the code, which is below.


Markup Instructions

Your table should start out like the actual ProBoards Info Center does. And if you want some example markup to work with, HERE is the basic markup as copied from a test board's source code, and cleaned up. Your basic outer table structure should look like this, as for what goes inside that's really up to you. The only thing is that the first table tag must have an ID of "myoic" so the code knows this is the table you want to use, and the table must be hidden with style="display: none;" so that you don't have a big weird empty info center template appearing for users who have disabled JavaScript etc. It's also highly recommend that you learn and use the ProBoards class names for your table cell backgrounds, namely "titlebg", "catbg", "windowbg" and "windowbg2".

And as explained above, you will place an empty span tag with one of the IDs in the above list wherever your dynamic content needs to go. An example:

Welcome to SoCal. Our <a href="/index.cgi?action=members"><span id="totalmem"></span> registered members</a> have made a total of <span id="totalthreads"></span> threads and <span id="totalposts"></span> posts since the board was created.<br />
Right now there are <span id="totalonline"></span> registered members online. The most users ever online was <span id="mostonline"></span>.
We would like to welcome <span id="newmem"></span> as the newest member of the forum.

This of course isn't a complete info center table, just something that might be inside one of the cells. It's important to note that I haven't created IDs for things like "view the most recent posts" because that's all static HTML. The link is always /index.cgi?action=recent so you can just hard-code it into your markup using a plain anchor tag. Some other things you can hard code in:

- News and announcements, links to important threads like rules
- Member of the month
- A staff legend
- The list of your staff members, how many staff members you have, etc.
- The total number of categories, boards, sub boards, and averages between the three.
- Your own info center icons or other images
- Forum navigation, maybe a dropdown list or a list of quicklinks.

More instructions and tips can be found HERE. When you're done with your table markup it goes in the Main Footer. So have fun! Oh right, and...


The actual JavaScript code

Code:
<script type="text/javascript">
<!--
/* Make-Your-Own Info Center v1 by california
©2005 SoCal Codes, [url]http://socal.proboards26.com[/url] */

/* customization variables below */

// these two are just used for calculating averages (threads per board, etc.)
var numberOfCategories = 5;
var numberOfBoards = 10;

// used for the 'modifyprofile' ID as the hyperlink text
var modifyProfileText = "modify profile";

// used for the three comma seperated lists when there's nothing in the list
var noBirthdaysMessage = "There are no birthdays today."
var noEventsMessage = "There are no events this month.";
var noneOnlineMessage = "There are no users online right now.";

// used for the '[custom]online' IDs
// first part of each line determines what you use as the ID of the span tag in your markup
// second part of each line specifies what member group numbers go with that ID
memberGroups = [
['admins', '1'],
['gmods', '2|3'],
['mods', '4|5|6'] // last line doesn't get a comma
];

/* end customization */

document.write('<script type="text/javascript" src="http://www.iycatacombs.com/socal/resources/scripts/myoic.js"></scr'+'ipt>');
// -->
</script>


All this goes below your table markup in the Main Footer. So just to reiterate, everything is in your Main Footer. First comes the table markup, then the JavaScript.


Support

In addition to the thread for submitting table markup, there is a thread in Everything HTML for questions and discussion about the HTML markup for anyone who needs help with it, HERE. So if you have a question about the HTML part of the code, you will ask there. If you have a question about the JavaScript part of the code, the IDs, or you want to request an ID addition, you may do so in this thread.
« Last Edit: Sept 6, 2008, 12:04pm by Chris »Link to Post - Back to Top  IP: Logged
[image]
g0alieb0y
[image]
member is offline



[aim]

Joined: Jun 2005
Gender: Male
Posts: 258
Re: Make-Your-Own Info Center
« Reply #1 on Nov 13, 2005, 5:52am »
Wow!  Nice code.  A little confusing, but it is good code. :)
Link to Post - Back to Top  IP: Logged
Free Remotely Hosted Shoutboxes, Click Here
[image]
Chris
[image]
member is offline

[avatar]


[homepage]

Joined: Jul 2005
Gender: Male
Posts: 6,367
Location: Nebraska
Re: Make-Your-Own Info Center
« Reply #2 on Nov 13, 2005, 10:24am »
Very nice Cali. :P Bout time you released it.
Link to Post - Back to Top  IP: Logged
[image]
/^(Krayzie)?$/i
[image]
member is offline



[aim]
[homepage]

Joined: Jun 2005
Gender: Male
Posts: 112
Re: Make-Your-Own Info Center
« Reply #3 on Nov 13, 2005, 2:18pm »
Didn't think it was possible, I thought you were KRAYZIE! But it turns out you did make it, maybe I'm a little KRAYZIE!
Link to Post - Back to Top  IP: Logged
[image]
madmax
Guest
Re: Make-Your-Own Info Center
« Reply #4 on Nov 16, 2005, 2:47am »
Thanx alot Cal! You already seen my I-Center, can't wait to release it. Man, I got some work to do now. LOL
Link to Post - Back to Top  IP: Logged
Gunny
[image]
member is offline

[avatar]

No...No... NOOOOOOOOOOOO!!!!



Joined: Aug 2005
Gender: Male
Posts: 597
Location: Adelaide, Australia
Re: Make-Your-Own Info Center
« Reply #5 on Nov 16, 2005, 3:30am »
Nice, very nice...now, I must do that HTML tutorial sometime...
Link to Post - Back to Top  IP: Logged

Quote:
Is it okay if it looks like a black square? :P
california
[image]
I'm not here...
member is offline

[avatar]



Joined: Nov 2004
Gender: Male
Posts: 6,425
Re: Make-Your-Own Info Center
« Reply #6 on Nov 16, 2005, 3:54am »
You'll have to take it out of MM, or I simply can't help.
Link to Post - Back to Top  IP: Logged
[image]
madmax
Guest
Re: Make-Your-Own Info Center
« Reply #7 on Nov 16, 2005, 4:05am »
Oh shoot, I forgot about that Cal.....it's a done deal!
Link to Post - Back to Top  IP: Logged
california
[image]
I'm not here...
member is offline

[avatar]



Joined: Nov 2004
Gender: Male
Posts: 6,425
Re: Make-Your-Own Info Center
« Reply #8 on Nov 16, 2005, 4:16am »
Okay now take it off of "Guests must login" :P
Link to Post - Back to Top  IP: Logged
[image]
madmax
Guest
Re: Make-Your-Own Info Center
« Reply #9 on Nov 16, 2005, 4:27am »

Quote:
Okay now take it off of "Guests must login" :P


ok, I did. I'm just really super pissed right now having waited so long for it not to work. It's not your fault, but you know how that goes.   :-/
« Last Edit: Nov 16, 2005, 4:28am by madmax »Link to Post - Back to Top  IP: Logged
california
[image]
I'm not here...
member is offline

[avatar]



Joined: Nov 2004
Gender: Male
Posts: 6,425
Re: Make-Your-Own Info Center
« Reply #10 on Nov 16, 2005, 4:49am »
In your footer it ended up like this:

Code:
document.write('<script type="text/javascript"

src="http://www.socal-files.com/resources/scripts/myoic.js"></scr'+

'ipt>');


Instead of all on one line like it's supposed to be:

Code:
document.write('<script type="text/javascript" src="http://www.socal-files.com/resources/scripts/myoic.js"></scr'+'ipt>');



Also, remove the second table tag in the very beginning of the markup, that causes it to be nested incorrectly. Also check the end, you end it with a </form> so there must be some improper nesting there too. I hope this fixed it because it's 3am and I have a test tomorrow, so I really need to sleep.

edit: oh yeah and make sure you aren't using any IDs that aren't in the list. I didn't end up creating IDs for each individual part of the date. What you can do is just write that in using JavaScript in your table, look up the Date object on google and you'll be able to format it however you like. About the board & category totals, I didn't create IDs for those either, you just need to hard code those in.
« Last Edit: Nov 16, 2005, 4:53am by california »Link to Post - Back to Top  IP: Logged
[image]
madmax
Guest
Re: Make-Your-Own Info Center
« Reply #11 on Nov 16, 2005, 5:42pm »
ok, so how do you make the default I-Center disappear? Mines still there, and it looks stupid having two of them.  :o
Link to Post - Back to Top  IP: Logged
california
[image]
I'm not here...
member is offline

[avatar]



Joined: Nov 2004
Gender: Male
Posts: 6,425
Re: Make-Your-Own Info Center
« Reply #12 on Nov 16, 2005, 8:29pm »
The code will do that for you, it replaces the default info center with the new one after it's done replacing all the span tags, but it will only do that at the end if there are no errors along the way. Check your PMs.
Link to Post - Back to Top  IP: Logged
[image]
detectiveunknown
[image]
member is offline





Joined: Dec 2004
Gender: Male
Posts: 326
Re: Make-Your-Own Info Center
« Reply #13 on Nov 16, 2005, 9:20pm »
Nice, I believe you saw my sexy info center in that html thread before :P. I can't do this tonite  though, I'm too tired (well, maybe I will)
Link to Post - Back to Top  IP: Logged
madmax
Guest
Re: Make-Your-Own Info Center
« Reply #14 on Nov 16, 2005, 10:26pm »

Quote:
Nice, I believe you saw my sexy info center in that html thread before :P. I can't do this tonite  though, I'm too tired (well, maybe I will)


Wait till you see mine j-pop. I do believe you will have a new lover. LOL
Link to Post - Back to Top  IP: Logged
Page 1 of 21 » Jump to page   Go    [Search This Thread][Send Topic To Friend] [Print]

Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!
Terms of Service | Privacy Policy | Report Abuse | Mobile