Welcome Guest [Log In] [Register]

Welcome to Big Boards. We hope you like what you see and decide to visit often. Big Boards offers the Zathyus network our long famous Resource Archives, our extensive search indexes, and our info-packed resource forums.

Our team has recently opened a new project called Planet Nexus, where a bold new experiment in forum promotion is taking place. We call it nexworking. NexusTree offers social networking pages for forums in a fully automated format. Your NexusTree page is created instantly when your join the nexus. Find out more by visiting Planet Nexus, and become part of the nexworking revolution.

Posted Image Posted Image
If you're already a member please log in to your account for additional access:

Username:   Password:
Closed Topic
How to Create a Custom Staff Page?
Topic Started: Sep 9 2009, 01:23 AM (160 Views)
ShockWave
BB Alpha
[ * ]
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/
Offline
Profile
Goto Top
 
ShockWave
BB Alpha
[ * ]
Bump!
Offline
Profile
Goto Top
 
Dorith
BB Gamma
[ *  *  * ]
Your board example is offline.
Posted Image :dorith:
Offline
Profile
Goto Top
 
Nuke
Czar of the Nukian Empire
[ *  *  * ]
You go to webpage editor and code it yourself.
Posted Image
Offline
Profile
Goto Top
 
ShockWave
BB Alpha
[ * ]
I know it's offline and if I could code it myself I would be asking how to create a custom staff page.
Offline
Profile
Goto Top
 
Cory
Member Avatar
Technical Adviser

Do you wish to use BB's staff page layout, or a different layout?
Offline
Profile
Goto Top
 
ShockWave
BB Alpha
[ * ]
BB's staff page layout
Offline
Profile
Goto Top
 
Cory
Member Avatar
Technical Adviser

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;
}
Offline
Profile
Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Support Archive · Next Topic »
Closed Topic