We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ C ] Date and Points display above board
Topic Started: Mar 12 2014, 07:52 AM (553 Views)
jennarator
Member Avatar
Member
[ * ]
Board Address: www.w11.zetaboards.com/HP_and_Percy_Jackson
Board Software:ZetaBoards
Description: On my board we run for 10 weeks before the activities "reset" and "restart". There are also 4 teams that earn points. For those of you who have guessed, yes, the teams are the Harry Potter houses. Anyways, I need a code that will show the current week number, and each teams number of points. I would like it if you could tell me how to edit the code into my board, how to make the info colored based on the teams color and how to edit without messing it up. Thanks! :)

If you need to know, these are the teams-
Gryffindor
Slytherin
Ravenclaw
Hufflepuff (In case you can't read the yellow I used, it says Hufflepuff)
Offline Profile Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Probably one of the simplest requests I've seen in a while. This can be done very simply but you would have to keep updating it so we can minimise JavaScript usage. For the points you could use this...
Code: HTML
 
<style type="text/css">
#house_gry {
color:firebrick;
font-weight:bold;
text-shadow:1px 1px black;
}
#house_sly {
color:darkgreen;
font-weight:bold;
text-shadow:1px 1px black;
}
#house_rav {
color:mediumblue;
font-weight:bold;
text-shadow:1px 1px black;
}
#house_huf {
color:darkgoldenrod;
font-weight:bold;
text-shadow:1px 1px black;
}
table[name=points] td {
height:100px;
text-align:center;
}
table[name=points] h3 {
display:block;
}
</style>

<div class="category">
<table class="cat_head">
<tr>
<td>
<h2>House Points</h2>
</td>
</tr>
</table>
<table name="points">
<tr>
<td>
<h3 id="house_gry">Gryffindor</h3>
<span>0000</span>
</td>
<td>
<h3 id="house_sly">Slytherin</h3>
<span>0000</span>
</td>
<td>
<h3 id="house_rav">Ravenclaw</h3>
<span>0000</span>
</td>
<td>
<h3 id="house_huf">Hufflepuff</h3>
<span>0000</span>
</td>
</tr>
</table>
</div>

Place it above the board (like you want). In the code you will notice four 0s under each house name, feel free to change those to what you desire. I can use JavaScript instead so when you give a house some points you just need to use `givePoints()` which is simpler but the points wouldn't appear to those who have their JavaScript disabled but that doesn't happen often.

This is a preview of that code would look like on your board

Posted Image
View full image here


As for the date system, I recommend embracing ZB's Calendar to do that. I think it would have just the features you're looking for without needing a code to do it although I'm willing to provide a code if you'd rather it as it's only a suggestion :)
Offline Profile Goto Top
 
jennarator
Member Avatar
Member
[ * ]
Thanks that's awesome! Just what I needed! Its no problem updating it for me :)

As for the date, how can I make the calendar display it on the front board next to the points? Is that what you meant when you said to use the ZB calendar?
Offline Profile Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Oh I do apologise, I think I misread your request. I didn't know you wanted it on the front page xD

Use this code instead...
Code: HTML
 
<style type="text/css">
#house_gry {
color:firebrick;
font-weight:bold;
text-shadow:1px 1px black;
}
#house_sly {
color:darkgreen;
font-weight:bold;
text-shadow:1px 1px black;
}
#house_rav {
color:mediumblue;
font-weight:bold;
text-shadow:1px 1px black;
}
#house_huf {
color:darkgoldenrod;
font-weight:bold;
text-shadow:1px 1px black;
}
table[name=points] td {
height:100px;
text-align:center;
}
table[name=points] h3 {
display:block;
}
table[name=points] th {
text-align:center;
text-shadow:1px 1px black;
font-size:14px;
}
</style>

<div class="category" style="margin-bottom:30px">
<table class="cat_head">
<tr>
<td>
<h2>House Points</h2>
</td>
</tr>
</table>
<table name="points">
<tr>
<th colspan="4">Year 2014 | Week two</th>
</tr>
<tr>
<td>
<h3 id="house_gry">Gryffindor</h3>
<span>0000</span>
</td>
<td>
<h3 id="house_sly">Slytherin</h3>
<span>0000</span>
</td>
<td>
<h3 id="house_rav">Ravenclaw</h3>
<span>0000</span>
</td>
<td>
<h3 id="house_huf">Hufflepuff</h3>
<span>0000</span>
</td>
</tr>
</table>
</div>

Updated the code, it should work 100% now :)
Edited by Ferby, Mar 13 2014, 08:00 AM.
Offline Profile Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
I'm using this code for another board, is it possible to add three rows with four on each?

I would like row one to have: District 1, District 2, District 3, and District 4
Row 2: District 5, District 6, District 7, District 8
Row 3: District 9, District 10, District 11, District 12
Offline Profile Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
TDreamW101
Mar 14 2014, 09:48 PM
I'm using this code for another board, is it possible to add three rows with four on each?

I would like row one to have: District 1, District 2, District 3, and District 4
Row 2: District 5, District 6, District 7, District 8
Row 3: District 9, District 10, District 11, District 12
Code: HTML
 
<style type="text/css">
table[name=points] td {
height:100px;
text-align:center;
}
table[name=points] h3 {
display:block;
}
table[name=points] th {
text-align:center;
text-shadow:1px 1px black;
font-size:14px;
}
</style>

<div class="category" style="margin-bottom:30px">
<table class="cat_head">
<tr>
<td>
<h2>District Points</h2>
</td>
</tr>
</table>
<table name="points">
<tr>
<th colspan="4">Year 2014 | Week two</th>
</tr>
<tr>
<td>
<h3>District 1</h3>
<span>0000</span>
</td>
<td>
<h3>District 2</h3>
<span>0000</span>
</td>
<td>
<h3>District 3</h3>
<span>0000</span>
</td>
<td>
<h3>District 4</h3>
<span>0000</span>
</td>
</tr>
<tr>
<td>
<h3>District 5</h3>
<span>0000</span>
</td>
<td>
<h3>District 6</h3>
<span>0000</span>
</td>
<td>
<h3>District 7</h3>
<span>0000</span>
</td>
<td>
<h3>District 8</h3>
<span>0000</span>
</td>
</tr>
<tr>
<td>
<h3>District 9</h3>
<span>0000</span>
</td>
<td>
<h3>District 10</h3>
<span>0000</span>
</td>
<td>
<h3>District 11</h3>
<span>0000</span>
</td>
<td>
<h3>District 12</h3>
<span>0000</span>
</td>
</tr>
</table>
</div>

That should work :)
Offline Profile Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
Thanks so much!
Offline Profile Goto Top
 
Liam
Member Avatar
~

Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic