Staff Page Help

zubboH123

New Member
Apr 12, 2012
15
0
Hey, Devbest i need help with my staff page im using Aurora CMS skin for Revcms my (edit) and i cant seem to fix the staff page problem. If you could help that would be great below will be a screenie and the staff page please help.

screenie:

staff page below:

<div id="black_bar">
<div class="container">
Welcome Back, {username}
<span class="online_users"> <img
src="../app/tpl/skins/HubboCMS/images/users.png" border="0" style="float:left; padding-left:15px;position:relative;left:-7px;" />
{online} Zubbo's Online!
</span>
</div>
</div>
<div id="blue_bar">
<div class="container">
<a href="index.php">
<img src="../app/tpl/skins/HubboCMS/images/logo.gif" border="0" style="float:left; padding-top:15px;position:relative;left:-7px;" />
</a>
<div id="user_avatar" class="avatar" style="background:url( ) -75px 0px;"> </div>
<div id="enter_area">
<div class="enterButton">
<center>
<a href="client" onClick"mango.client.popup(); return false;">Enter {hotelName} Hotel</a>
</center>
</div>
</div>
</div>
</div>
<div id="menu">
<div class="container">
<ul>
<li><a href="me">Me</a></li>
<li><a href="account">My Account</a></li>
<li><a href="news">News</a></li>
<li><a href="staff">Staff</a></li>
<li><a href="rules">Rules</a></li>
<li><a href="vip">Vip</a></li>
<li><a href="tinychat">Tinychat</a>
{housekeeping}
<li><a href="logout">Logout</a></li>
</ul>
</div>
</div>
<div id="container"
<div id="main_left">
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Owner's</h2><br />
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 7");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\" ";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";

}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/owner.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Admin's</h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 6");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\" ";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/admin.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Moderator's </h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 5");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\" ";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/mod.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Trial Moderators </h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 4");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\" ";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/trial mod.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Event Staff </h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 3");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\" ";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/event staff.bmp\">";
echo "</div></div>";
}
?>
</div><br/>
<div style="clear:both;"></div>
<hr/>
<div style="clear:both;"></div></div>
</div>
<div id="footer">
<hr />
<strong>Copyright {hotelName} 2012, All rights reserved go to their respective owner(s).<strong/><br/>
<br/>
</div>
 

Heaplink

Developer & Designer
Nov 9, 2011
510
173
Your problem is that you don't clearfix your float. Also that theres not enough space for the div's (which got floats on it). Remove this: \"style=\"float:left\"
 

zubboH123

New Member
Apr 12, 2012
15
0
I need it to look normal like the avatar images on the right and the info and badge on the left like all staff page's are how can i do that please help.
 

Heaplink

Developer & Designer
Nov 9, 2011
510
173
Before going into too much detail, go read some tutorials of HTML & CSS this will help you to understand the setup.

Basically you need one DIV ("parent") with two DIVs ("childs") inside. The parent div don't really need any properties. The child divs should be floated left and have a fixed width (e.g. 150px) and you should be good to go. Again if you don't know what I'm talking about, do as I said above.
 

Heaplink

Developer & Designer
Nov 9, 2011
510
173
HTML:
<div> <!-- Parent div-->
<div style="float:left; width:150px;"> <!-- Child div (avatar) -->
<!-- Your avatar image here -->
</div> <!-- End of child div (avatar) -->
 
<div style="float:left width:150px">
<!-- Your badges and info here -->
</div>
<div> <!-- End of Parent div -->

Note: this is just a basic setup, but that is how I explained it. You can adjust the width to the desired.
 

zubboH123

New Member
Apr 12, 2012
15
0
do you think you could just copy that staff page code above that i supplied and paste into note pad add the code and copy and paste it on here so i can just copy it onto my staff page after i wipe it please im not good a coding im only good a graphics
 

Heaplink

Developer & Designer
Nov 9, 2011
510
173
No. As I said you should go read about HTML & CSS. If you wan't to get your bugs fixed, you should be able to do it yourself. It's really simple and you get to use it in the future.
 

FarLock

ThisHabbo Media Journalist
Apr 21, 2012
224
52
Simple. Use this and replace all the texts found in your app/tpl/skins/{skin folder}/styles/global.css to this one:
HTML:
@charset "UTF-8";body#me, body#account, body#news{background:#E3E3DB;font-family:Tahoma,Geneva,sans-serif;font-size:13px;margin:0;padding:0;}#maintenance_enabled{padding-top:5px;padding-bottom:5px;color:#bc532a;width:100%;height:20px;background:#fffde5;border:#f2e2c2 1px solid;margin-top:15px;}#header_bar{height:40px;font-size:15px;width:100%;margin:auto;background:#333333;}#container-me{width:950px;margin:auto;}#content{border:#D0D0D0 1px solid;width:910px;min-height: 400px;background:#FFFFFF;margin:auto;padding:20px;padding-top:10px;}#featured_campaign{width:910px;height:140px;margin-top:15px;background:url(../images/featured_1.png);}#content hr{border:none;border-top:#d0d0d0 1px solid;}#footer{border-left:#1d1d1d 1px solid;border-right:#1d1d1d 1px solid;color:#FFFFFF;font-size:16px;width:950px;height:130px;background:#333333;margin:auto;}#footer ul{padding:0;float:left;margin:0;height:120px;margin:15px 0 0 20px;}#footer li{font-size:13px;list-style:none;}#footer a{color:#FFF;text-decoration:none;}#footer a:hover{text-decoration:underline;}#header_bar .mid{width:950px;margin:auto;padding-top:10px;color:#FFFFFF;}#header_bar .lefts{width:400px;float:left;margin-right:10px;}#header_bar .right{width:530px;text-align:right;height:25px;float:right;}h3{font-size:13px;margin:0;padding:0;float:right;}#footer .left{float:left;width:150px;}#logo{float:left;}#menu{font-size:16px;float:right;margin:0;padding:0;}#menu li{float:left;padding-top:21px;padding-left:12px;list-style:none;}#clear{clear:both;}#menu a{color:#333;text-decoration:none;}#menu a:hover{text-decoration:underline;}.content-box{width:590px;border:#d0d0d0 1px solid;border-bottom:#d0d0d0 4px solid;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.news-articles-box{width:300px;border:#d0d0d0 1px solid;border-bottom:#d0d0d0 4px solid;}.content-box-black{width:580px;background:#333333;margin:5px;height:35px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.content-box-deep-blue{background:#2767a7;width:580px;margin:5px;height:35px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.news-articles-box-green{width:290px;background:#343434;margin:5px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.content-box-content{padding:10px;}.content-box-content p{padding:0;margin:0;}.title{text-align:center;color:#FFFFFF;font-size:14px;height:26px;margin:0;padding:0;padding-top:5px;}#avatar-plate{background:url(../images/info_habbo_plate.png) no-repeat 2px -162px;height:138px;width:96px;position:relative;left:15px;float:left;}#main_left{width:600px;float:left;}#main_right{width:300px;float:right;}#user_info{width:130px;float:left;}#avatar-plate:hover{background-position:2px 75px;}#user{padding-left:13px;}#top_stories{float:right;width:300px;}#top-story{width:260px;height:147px;font-size:18px;color:#FFFFFF;padding:10px 20px;}#top-headlines-holder{width:298px;border-bottom:#d0d0d0 4px solid;border-right:#d0d0d0 1px solid;border-left:#d0d0d0 1px solid;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-moz-border-b-left-radius:5px;-o-border-top-left-radius:5px;-moz-border-top-right-radius:5px;-o-border-top-right-radius:5px;-webkit-border-radius:5px;border-top-right-radius:0;border-top-left-radius:0;}#enter{background-image:url(../images/enter.png);width:142px;height:49px;float:right;}input#register,textarea,select{outline:none;border:1px #e0e0e0 solid;padding:5px;font-size:14px;font-weight:bold;width:200px;}input:focus{border-color:#ccc;background-color:#fafafa;}input[type=submit],input.button{color:#888;border-color:#ddd;background:#f0f0f0;cursor:pointer;padding:3px;height:40px;width:90px;}input[type=submit]:hover,input.button:hover{background-color:#e6e6e6;border-color:#d6d6d6;}#user_infos{margin-top:40px;width:250px;background:#333333;float:left;}#message{padding:5px;color:#bc532a;min-height:17px;max-height:34px;background:#fffde5;border:#f2e2c2 1px solid;margin-bottom:5px;}#menu_left{width:260px;float:left;}#menu_right{width:590px;float:left;}#enter_area{float:right;height:90px;width:400px;padding-top:24px;margin-right:50px;margin-top:25px;}.snippet{color:#FFFFFF;font-size:12px;width:150px;margin:0;}.subnews_1{padding:5px;height:30px;background:#ececec;}.subnews_0{padding:5px;height:30px;}.sub-news-date{font-size:11px;}#top-story a{color:#FFFFFF;text-decoration:none;}.subnews_0 a,.subnews_1 a{color:#000000;}.campaign_content{float:left;margin-left:5px;width:400px;min-height:45px;}.campaign_images{float:left;}h2{font-size:16px;margin:0;padding:0;}.gothere{float:right;}.gothere a{color:#000;}.campaign_light{padding-bottom:10px;}.campaign_dark{background:#ececec;}.news-articles-box a{color:#000;}.content-box-orange{background:#f66200;width:580px;margin:5px;height:35px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.buttonContainer{width:515px;;height:52px;float:right;}.enterButton a{display:block;font-weight:500;float:right;width:auto;height:38px;background-image:url(../images/enterButton.png);border-radius:7px;-moz-border-radius:7px;background-repeat:repeat-x;-o-border-radius:7px;-webkit-border-radius:7px;border:2px solid #007A00;padding-top:14px;background-color:#007a00;padding-left:15px;padding-right:15px;color:#FFF;font-size:18px;text-decoration:none;}.enterButton a:hover{float:right;background-position:0 -53px;background-repeat:repeat-x;background-color:#007a00;width:auto;height:38px;background-image:url(../images/enterButton.png);border-radius:7px;-moz-border-radius:7px;-o-border-radius:7px;-webkit-border-radius:7px;border:2px solid #007A00;padding-top:14px;padding-left:15px;padding-right:15px;color:#FFF;font-size:18px;}.userAmounts{bottom:100px;float:right;display:table-cell;vertical-align:middle;margin-right:10px;text-wrap:normal;}#staff_username{padding-top:25px;font-weight:bolder;}#StaffBox {height:110px;width:540px;}#staff_online{padding-top:25px;float:right;font-weight:bolder;}#offline{color:maroon;}#online{color:green}#navi{font-size:16px;float:right;margin:50;padding:50;}
 
.content-box-deep-red
{
background:#cd1221;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-green
{
background:#20cd11;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-yellow
{
background:#f0f005;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-palegreen
{
background:#b2ff59;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-purple
{
background:#a659ff;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}

And I'd be glad if you could give us some credits at habprohotel.co.uk since I grabbed those codes from my hotel. :)
 

Users who are viewing this thread

Top