Have you ever wanted to add some features to your client? Like a Bot shop or something like that?
Well read this tutorial and you will know how to do it.
First ill show you a screen shot:
The new box is completely draggable just like the other boxes in your swf.
I know.... pretty sweet huh?
Ok lets see how its done (it's easy).
What we are going to do is just overlay some stuff over your swf and to your visitors it will look like it is all part of the client.
Ok lets get started.
Make sure this parameter is in your list of parameter for your habbo.swf
First add these lines to your client. make sure it is before the </header> tag.
Now after your <body> tag paste the following code.
Save this image
somewhere and adjust this css code to point to the right location.
Download the Ubuntu font
Also create a folder in your root called AddedContent. This is where the extra content will be stored.
Basically you are done.....
To create content Just create a PHP file in your AddedContent folder. e.g. AddedContent/bots.php
To create a link to your file just add a line like this
loadpage('bots //this is the name of the PHP file, do not add .PHP//','Bot Creator //This is the title that will be shown in the header of the box//');
If you dont like the location of the menu bar then just edit the CSS:
If you want to edit the look of the buttons then edit this css:
If you make a form, for example then just use JQUERY to submit it.
Like this example:
Hopefully you guys will be nice enough to share your creations.
Well read this tutorial and you will know how to do it.
First ill show you a screen shot:
The new box is completely draggable just like the other boxes in your swf.
I know.... pretty sweet huh?
Ok lets see how its done (it's easy).
What we are going to do is just overlay some stuff over your swf and to your visitors it will look like it is all part of the client.
Ok lets get started.
Make sure this parameter is in your list of parameter for your habbo.swf
PHP:
params["wmode"] = "transparent";First add these lines to your client. make sure it is before the </header> tag.
PHP:
<style>
.menu
{
position:fixed;
bottom:45px;
left:15px;
z-index: 1005 !important;
color:#FFF;
cursor:pointer;
}
.button
{
float:left;
padding:3px;
margin-right:3px;
}
#addedcontent
{
position:fixed;
top:5px;
left:300px;
max-width:400px;
min-width:150px;
z-index: 1006 !important;
}
#b-header
{
cursor:default;
padding:5px;
text-align:center;
background-color:#568BA4;
font-size:13px;
font-weight:bold;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
border:2px solid #66A2BE;
border-bottom: 1px solid #000;
height:19px;
line-height:19px;
}
#b-content
{
padding:5px;
background-color:#E9E9E1;
-moz-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
color:#000;
}
#close-button
{
position:absolute;
right:5px;
top:7px;
width:19px;
height:20px;
background-image:url('images/buttons/close.png');
background-repeat:no-repeat;
cursor:pointer;
background-position:right top;
}
#close-button:hover
{
background-repeat:no-repeat;
background-position:left top;
}
@font-face
{
font-family: Ubuntu-C;
src: url('Ubuntu-C.ttf');
}
body
{
font-size: 12px;
font-family:Ubuntu-C;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#addedcontent").draggable();
$("#addedcontent").hide();
});
function loadpage(page,title)
{
$("#b-header").html(title + '<div id="close-button" onclick="$(\'#addedcontent\').hide();"></div>');
$('#b-content').load("addedcontent/"+page+".php", function()
{
$("#addedcontent").show();
});
}
</script>Now after your <body> tag paste the following code.
PHP:
<div class="menu">
<div class="button" onclick="loadpage('bots','Bot Creator');">Create Bot</div>
<div class="button" onclick="loadpage('coins','Buy Coins');">Buy Coins</div>
<div class="button" onclick="loadpage('badgeshop','Badge Shop');">Badge Shop</div>
</div>
<div id="addedcontent">
<div id="b-header">
header
</div>
<div id="b-content">
content
</div>
</div>Save this image
PHP:
#close-button
{
position:absolute;
right:5px;
top:7px;
width:19px;
height:20px;
background-image:url('images/buttons/close.png');
background-repeat:no-repeat;
cursor:pointer;
background-position:right top;
}Download the Ubuntu font
You must be registered for see links
and put it in the root of your site (or where ever you want it, just edit the css ).Also create a folder in your root called AddedContent. This is where the extra content will be stored.
Basically you are done.....
To create content Just create a PHP file in your AddedContent folder. e.g. AddedContent/bots.php
To create a link to your file just add a line like this
PHP:
<div class="button" onclick="loadpage('bots','Bot Creator');">Create Bot</div>If you dont like the location of the menu bar then just edit the CSS:
PHP:
.menu
{
position:fixed;
bottom:45px;
left:15px;
z-index: 1005 !important;
color:#FFF;
cursor:pointer;
}If you want to edit the look of the buttons then edit this css:
PHP:
.button
{
float:left;
padding:3px;
margin-right:3px;
}If you make a form, for example then just use JQUERY to submit it.
Like this example:
PHP:
$(function() {
$(".button").click(function() {
// validate and process form here
var dataString = 'name='+ name + '&id=' + id + '&look=' + look; //just an example
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
//Completed hide the Box
$("#addedcontent").hide();
}
});
});
});Hopefully you guys will be nice enough to share your creations.
