|
How to Create a Custom Staff Page?
|
|
Topic Started: Sep 9 2009, 01:23 AM (160 Views)
|
|
ShockWave
|
Sep 9 2009, 01:23 AM
Post #1
|
- Posts:
- 5
- Group:
- Members
- Member
- #11,784
- Joined:
- September 9, 2009
|
Board URL: What browser(s) are you using? FireFox Your Issue/Question: I want to know how do I make a custom staff page like the one found here? http://s1.zetaboards.com/zcnetwork/
|
|
|
| |
|
ShockWave
|
Sep 10 2009, 03:41 PM
Post #2
|
- Posts:
- 5
- Group:
- Members
- Member
- #11,784
- Joined:
- September 9, 2009
|
Bump!
|
|
|
| |
|
Dorith
|
Sep 10 2009, 04:16 PM
Post #3
|
- Posts:
- 139
- Group:
- Members
- Member
- #11,682
- Joined:
- July 17, 2009
|
Your board example is offline.
|

|
| |
|
Nuke
|
Sep 10 2009, 05:33 PM
Post #4
|
Czar of the Nukian Empire
- Posts:
- 139
- Group:
- Members
- Member
- #11,495
- Joined:
- May 6, 2009
|
You go to webpage editor and code it yourself.
|
|
| |
|
ShockWave
|
Sep 11 2009, 12:00 AM
Post #5
|
- Posts:
- 5
- Group:
- Members
- Member
- #11,784
- Joined:
- September 9, 2009
|
I know it's offline and if I could code it myself I would be asking how to create a custom staff page.
|
|
|
| |
|
Cory
|
Sep 11 2009, 08:32 PM
Post #6
|
Technical Adviser
- Posts:
- 4,169
- Group:
- Technical Admin
- Member
- #120
- Joined:
- July 30, 2006
- Blog
- Cory's Life, with a Side of BB
|
Do you wish to use BB's staff page layout, or a different layout?
|
|
|
| |
|
ShockWave
|
Sep 11 2009, 11:26 PM
Post #7
|
- Posts:
- 5
- Group:
- Members
- Member
- #11,784
- Joined:
- September 9, 2009
|
BB's staff page layout
|
|
|
| |
|
Cory
|
Sep 12 2009, 09:21 PM
Post #8
|
Technical Adviser
- Posts:
- 4,169
- Group:
- Technical Admin
- Member
- #120
- Joined:
- July 30, 2006
- Blog
- Cory's Life, with a Side of BB
|
Here's the source code for me and Helena's staff block. Simply add it to a webpage and edit in the information that applies to you and another staff member.
- Code:
-
<div class="left staffbox"> <div class="stafftop"> <a href="/profile/129473/"><img class="left" style="height:100px;width:100px;" alt="Cory's Avatar" src="http://209.85.122.87/5902/164/0/f5002777/coryrat.png" /></a> <div class="right"> <a href="/profile/129473/"><span style="font-size:150%;font-weight:700;color:#F76541;">Cory</span></a><br /> <small>Technical Admin</small><br /> <img alt="Cory's Emote" src="http://209.85.122.87/5902/164/0/e17776//e17776.png" /><br /> <a href="/pages/member_map/"><img alt="U.S.A." src="http://209.85.62.24/269/184/0/p172784/United_States_Flag_32.png" /></a> </div> </div> <div class="staffbottom"> <dl class="left user_info"> <dt>Joined:</dt> <dd>June 1, 2006</dd> <dt>Staff since:</dt> <dd>June 1, 2006</dd> <dd class="spacer"/> </dl> <dl class="right user_info"> <dt>Location:</dt> <dd>Weatherford, TX</dd> <dt>Contact:</dt> <dd><a href="/msg/?c=2&mid=129473">PM</a> | <a href="/comm/?c=1&mid=129473">Email</a></dd> <dd class="spacer"/> </dl> <h4>Interests:</h4> Forum management, basic programming, traveling, land vehicles, landscapes, fancy rats, working, fantasy films <h4 style="margin-top:7px;">Fun Facts:</h4> <ul> <li>Born on July 20, 1990.</li> <li>Started foruming as a Yu-Gi-Oh TCG enthusiast back in 2004.</li> <li>Has rats as pets, six to be specific. Fascinating he finds them, as pets you can actually hold in the palm of your hand.</li> <li>Likes to chat online, but mostly contemplate and explore deep thoughts.</li> <li>Primary interests of life: Construction vehicles when he was a kid, Yu-Gi-Oh TCG during his early teenage years and foruming and basic programming at this time.</li> </ul> </div> </div> <div class="right staffbox"> <div class="stafftop"> <a href="/profile/129364/"><img class="left" style="height:100px;width:100px;" alt="Helena's Avatar" src="http://209.85.62.24/2/81/0/p180380/BoundariesAv.png" /></a> <div class="right"> <a href="/profile/129364/"><span style="font-size:150%;font-weight:700;color:#FF6666;">HelenaZF</span></a><br /> <small>Admin</small><br /> <img alt="Helena's Emote" src="http://209.85.122.87/5902/164/0/e17807//e17807.png" /><br /> <a href="/pages/member_map/"><img alt="U.S.A." src="http://209.85.62.24/269/184/0/p172784/United_States_Flag_32.png" /></a> </div> </div> <div class="staffbottom" style="clear:both;"> <dl class="left user_info"> <dt>Joined:</dt> <dd>June 3, 2006</dd> <dt>Staff since:</dt> <dd>July 2006</dd> <dd class="spacer"/> </dl> <dl class="right user_info"> <dt>Location:</dt> <dd>Kansas City, MO</dd> <dt>Contact:</dt> <dd><a href="/msg/?c=2&mid=129364">PM</a> | <a href="/blog/main/129364/">Blog</a></dd> <dd class="spacer"/> </dl> <h4>Interests:</h4> Designing in these mediums: fabric sculpture, garments, theatrical environments, and computer graphics. Song-writing, liturgical dance and choreography, sampling and judging barbecue and jazz. Oh yes...and helping y'all...If you've learned something useful...it's good to pass it on <h4 style="margin-top:7px;">Fun Facts:</h4> <ul> <li>The ZF in my name stands for ZionFire, our worship arts ministry in which fire is an ongoing and guiding theme.</li> <li>Likes green (like my eyes), chocolate (tributes welcome), kona coffee (real cream only), lolling by the pool, lolling at the beach, in fact, any general type of lolling will do.</li> <li>Abhors selfish & arrogant people, bad coffee, non-cotton socks, green olives, early mornings, the WE channel.</li> </ul> </div> </div> <div style="clear:both;"></div> Copy and paste the source code to add two more blocks.
Be sure to add the following snippet of coding to the very bottom of the webpage.
- Code:
-
<script type="text/javascript"> jQuery(".staffbox,.staffbottom").corner("10px"); </script> Add the following CSS to your board and change the properties to reflect the styles of your theme.
- Code:
-
.staffbox { background:#DFE8EA url(http://209.85.62.24/269/184/0/p136214/TD_IMG.gif) repeat-x scroll center top; border:1px solid #C2CED1; margin-bottom:1em; padding:10px; width:46.5%; } .stafftop { height:100px; margin-bottom:10px; } .stafftop div { text-align:right; } .staffbottom { background:#E8EFF1 none repeat scroll 0 0; border:1px solid #C2CED1; clear:both; font-size:80%; padding:5px 7px; } .staffbottom dl, .staffbottom h4 { margin-bottom:5px; } .staffbottom dl.left { border-right:1px solid #C2CED1; width:48%; } .staffbottom dl.right { width:46%; } .staffbottom .user_info dt { min-width:5.2em; }
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|