-
Remaster 2006 Habbo Layout [release][work-in-progress]
Latest Revision:
http://i.imgur.com/ajm3nql.png
Older revisions
To do:
- Source images
- Finish HTML/CSS/JS
- Stuff
Download:
index.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<section id="advertisements" class="border-1-3">
<div class="border-2">
<div class="border-1-3">
<h2 class="advertisements-header">Advertisement</h1>
<p class="advertisements-container"></p>
</div>
</div>
</section>
<section id="status">
<ul id="status-container">
<li class="status-container-list"><span class="status-container-list-box">0 People Online</span></li>
<li class="status-container-list">
<a href="javascript:box(1)" class="status-container-list-link"><span id="status-container-list-link-icon-1"></span> My Home</a>
<a href="javascript:box(2)" class="status-container-list-link"><span id="status-container-list-link-icon-2"></span> My Currency</a>
<a href="javascript:box(3)" class="status-container-list-link"><span id="status-container-list-link-icon-3"></span> My Club</a>
</li>
<li class="status-container-list"><span class="status-container-list-box red">Not Signed In</span></li>
</ul>
</section>
<div class="border-1-3">
<div class="border-2">
<div class="border-1-3">
<header id="header-container">
<h1 id="header-container-logo">Logo</h1>
<p id="header-container-description">Hangout for people</p>
<section id="header-container-information-container">
<div id="header-container-information-container-box-1" style="display:block;">
<h2 class="header-container-information-container-header" align="right">Welcome! Please sign in or register</h2>
<p class="header-container-information-container-description">
<img src="frank-1.gif" alt="Frank" align="left" id="frank" />
<a href="#">Register, it's free!<span class="arrow">></span></a><br />
<a href="#">Sign in<span class="arrow">></span></a>
</p>
</div>
<div id="header-container-information-container-box-2" style="display:none;">
<h2 class="header-container-information-container-header" align="center">Please sign in to see your balance</h2>
<p class="header-container-information-container-description">
<img src="currency-1.png" alt="Currency" width="47" height="21" align="left">
<a href="#">Buy more currency<span class="arrow">></span></a><br />
<a href="#">Redeem currency or code<span class="arrow">></span></a>
</p>
</div>
<div id="header-container-information-container-box-3" style="display:none;">
<h2 class="header-container-information-container-header" align="center">Please sign in to see your club status</h2>
<p class="header-container-information-container-description">
Our Club gives you the best benefits as a member.<br /><br />
<a href="#">Latest news on our Club<span class="arrow">></span></a>
</p>
</div>
</section>
<a href="#" id="header-container-play"></a>
<nav id="header-container-nav">
<ul id="header-container-nav-container">
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link" id="active"><span id="header-container-nav-container-list-link-icon-1"></span> Home</a></li>
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link"><span id="header-container-nav-container-list-link-icon-2"></span> Community</a></li>
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link"><span id="header-container-nav-container-list-link-icon-3"></span> Currency</a></li>
<li class="header-container-nav-container-list"><a href="#" class="header-container-nav-container-list-link"><span id="header-container-nav-container-list-link-icon-4"></span> Help</a></li>
<span id="header-container-nav-container-list-right"></span>
</ul>
</nav>
</header>
<section id="navigation-container-1">
<nav id="navigation-container-2">
<ul id="navigation-container-3">
<li class="navigation-container-3-list">Webpage 1 | </li>
<li class="navigation-container-3-list"><a href="#" class="navigation-container-3-list-link">Webpage 2</a> | </li>
<li class="navigation-container-3-list"><a href="#" class="navigation-container-3-list-link">Webpage 3</a></li>
</ul>
</nav>
</section>
<main id="content">
<h2 id="content-header">Homepage</h2>
<section id="content-row">
<div class="content-row-column left">
<div class="border-1-3" id="content-row-column-news-left">
<div class="border-2">
<div class="border-1-3">
<h2 class="content-row-column-news-header">Top Story</h2>
<img src="content-row-column-news-header-1.gif" alt="Top Story" />
<p class="content-row-column-news-description">
The Battle Ball Challenge is back with big prizes up for grabs. Can you bounce to victory?
</p>
</div>
</div>
</div>
<div class="content-row-column-content left">
<h2 class="content-row-column-content-header orange">Header</h2>
<p class="content-row-column-content-container">
Text
</p>
</div>
</div>
<div class="content-row-column middle" id="news">
<div class="border-1-3" id="content-row-column-news-right">
<div class="border-2">
<div class="border-1-3">
<h2 class="content-row-column-news-header">What's New</h2>
<p class="content-row-column-news-description limit">
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 1</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 2</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 3</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 4</a><br />Description here<br /><br />
<strong>[01-01-2019]</strong> <a href="#" class="content-row-column-news-description-right-link">News article 5</a><br />Description here
</p>
</div>
</div>
</div>
<div class="content-row-column-content middle">
<h2 class="content-row-column-content-header blue">Header</h2>
<p class="content-row-column-content-container">
Text
</p>
</div>
<div class="content-row-column-content middle">
<h2 class="content-row-column-content-header green">Header</h2>
<p class="content-row-column-content-container">
Text
</p>
</div>
</div>
<div class="content-row-column right">
<div class="border-1-3">
<div class="border-2">
<div class="border-1-3">
<h2 class="advertisements-header">Advertisement</h1>
<p class="advertisements-container"></p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer id="footer-container">
<section>
<p>All Rights Reserved</p>
</section>
</footer>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
Code:
body{background-color:#525d63;font:10px Verdana,Arial,Helvetica,sans-serif;}
#container{width:1024px;margin:100px auto;}
#advertisements{width:768px;margin:0 auto 50px;}
.advertisements-header, .advertisement-container{display:block !important;}
.advertisements-header{background-color:#000000;font-size:inherit;font-weight:bold;color:#555555;text-align:center;margin:0;padding:5px;}
.advertisements-container{background-color:green;min-height:90px;margin:0;}
#status{background-color:#555555;border:solid #000000;border-width:1px 1px 0;}
#status-container{margin:0;padding:0;color:#ffffff;}
.status-container-list{width:338px;height:30px;line-height:30px;list-style:none;display:inline-block;word-break:break-all;text-align:left;vertical-align:text-top;}
.status-container-list-box{width:328px;height:20px;line-height:20px;margin:5px auto 0;background-color:#444444;display:block;text-align:center;border:1px solid #000000;}
.status-container-list-box.red{color:red;}
.status-container-list-box.green{color:green;}
.status-container-list-link{padding:4px 10px 9px;background-color:#666666;color:#ffffff;text-decoration:none;border:solid #000000;border-width:1px 1px 0;}
.status-container-list-link.active, .status-container-list-link:focus{padding:4px 10px 13px;}
#status-container-list-link-icon-1, #status-container-list-link-icon-2, #status-container-list-link-icon-3{background-image:url("status-container-list-link-icon.png");height:23px;display:inline-block;vertical-align:middle;}
#status-container-list-link-icon-1{background-position:0;width:25px;}
#status-container-list-link-icon-2{background-position:-25px 0;width:27px;}
#status-container-list-link-icon-3{background-position:-52px 0;width:22px;}
.border-1-3{background-color:#47839d;border:1px solid #000000;}
.border-2{border:3px solid #ffffff;}
#header-container{background:url("header-container.png") round;width:inherit;height:150px;position:relative;border-bottom:1px solid #000000;}
#header-container-logo{position:absolute;top:35px;left:40px;margin:0;}
#header-container-description{position:absolute;top:60px;left:40px;margin:0;}
#header-container-information-container{background:rgba(242,242,242,0.5);width:326px;max-height:122px;margin:0 auto;padding:5px;border:solid #000000;border-width:0 1px 1px;overflow:hidden;font-weight:bold;}
.header-container-information-container-header{background-color:#ffffff;margin:0;padding:5px;font-size:inherit;display:block;}
.header-container-information-container-description{border-top:1px dashed black;margin:5px 0;padding:5px 0;text-align:right;}
.header-container-information-container-description img#frank{margin:-26px 10px 0;}
.header-container-information-container-description a{background-color:#d7d7d7;margin-bottom:5px;padding:2.5px 0 2.5px 10px;display:inline-block;border:1px solid #000000;color:#000000;text-decoration:none;}
.header-container-information-container-description a .arrow{background-color:#ff8015;margin-left:10px;padding:2.5px 5px;color:#ffffff;border-left:1px solid #000000;}
#header-container-play{background-image:url("header-container-play.gif");width:105px;height:106px;position:absolute;top:15px;right:165px;text-align:center;}
#header-container-nav{position:absolute;bottom:3px;left:5px;}
#header-container-nav-container{margin:0;padding:0;list-style:none;vertical-align:text-top;}
.header-container-nav-container-list{display:inline;}
.header-container-nav-container-list-link{background-color:#d75c03;display:inline;padding:8px 12px 8px 8px;margin-right:-4px;border:solid #000000;border-width:1px 0 1px 1px;color:#ffffff;text-decoration:none;text-shadow:2px 2px 2px #000000;text-transform:uppercase;font-weight:bold;}
.header-container-nav-container-list-link#active{background-color:#ffce00;text-shadow:none;color:#000000;padding:12px 12px 12px 8px;border-width:1px;}
#header-container-nav-container-list-link-icon-1, #header-container-nav-container-list-link-icon-2, #header-container-nav-container-list-link-icon-3, #header-container-nav-container-list-link-icon-4{background-image:url("header-container-nav-container-list-link-icon.png");margin-right:1px;height:19px;display:inline-block;vertical-align:middle;}
#header-container-nav-container-list-link-icon-1{background-position:0;width:20px;}
#header-container-nav-container-list-link-icon-2{background-position:-20px 0;width:19px;}
#header-container-nav-container-list-link-icon-3{background-position:-39px 0;width:17px;}
#header-container-nav-container-list-link-icon-4{background-position:-56px 0;width:15px;}
#header-container-nav-container-list-right{background-image:url("header-container-nav-container-list-right.gif");width:8px;height:29px;display:inline-block;margin-bottom:-10px;}
#navigation-container-1{width:1016px;height:23px;position:relative;}
#navigation-container-2{background-color:#ffce00;position:absolute;left:-2px;width:inherit;height:inherit;line-height:22px;border:solid #000000;border-width:0px 1px 1px;}
#navigation-container-3{margin:0;padding:0;list-style:none;text-indent:8px;}
.navigation-container-3-list{display:inline;color:#930930;}
.navigation-container-3-list-link{color:#000000;font-weight:bold;}
#content{margin-bottom:25px;padding:5px 0 5px 5px;}
#content-header{background-color:#083d55;width:inherit;height:20px;margin:0 0 5px;padding:8px;display:block;color:#ffffff;font-size:16px;font-weight:bold;text-transform:uppercase;}
#content-row:after{content:"";display:table;clear:both;}
.content-row-column{float:left;margin-right:5px}
.content-row-column.middle#news{margin-left:-8px;}
.content-row-column.left{width:525px;}
.content-row-column.middle{width:304px;}
.content-row-column.right{width:173px;}
#content-row-column-news-left{border-right-width:0;}
#content-row-column-news-left img{width:516px;height:190px;}
#content-row-column-news-right{border-left-width:0;}
.content-row-column-news-header{background-color:#222222;width:inherit;color:#ffffff;font-size:inherit;font-weight:bold;text-transform:uppercase;margin:0;padding:6.5px 5px;}
.content-row-column-news-description{background-color:#004979;color:#ffffff;margin:0;padding:7px 6px;}
.content-row-column-news-description.limit{height:205px;}
.content-row-column-news-description-right-link{color:#f16100;font-weight:bold;}
.content-row-column-content{background-color:#f3f3f3;padding:3px;margin-top:5px;}
.content-row-column-content.left{margin-right:4px;}
.content-row-column-content.middle{margin-left:4px;}
.content-row-column-content-header{width:inherit;color:#ffffff;font-size:inherit;font-weight:bold;margin:0;padding:6.5px 5px;}
.content-row-column-content-header.orange{background-color:#d75c03;}
.content-row-column-content-header.green{background-color:#508f54;}
.content-row-column-content-header.blue{background-color:#47839d;}
.content-row-column-content.left, .content-row-column-content.middle, .content-row-column-content-container{padding-top:5px;}
.content-row-column-content-container{margin:0;word-wrap:break-word;}
#footer-container{background-color:#0a4362;color:#7295aa;font-size:9px;text-align:center;font-weight:bold;margin:0 5px 5px;padding:5px;}
#footer-container a{color:inherit;}
script.js
Code:
function box(id)
{
var box1 = document.getElementById("header-container-information-container-box-1");
var box2 = document.getElementById("header-container-information-container-box-2");
var box3 = document.getElementById("header-container-information-container-box-3");
if (id === 1)
{
if (box1.style.display === "none")
{
box1.style.display = "block";
box2.style.display = "none";
box3.style.display = "none";
}
}
else if(id === 2)
{
if (box2.style.display === "none")
{
box1.style.display = "none";
box2.style.display = "block";
box3.style.display = "none";
}
}
else if(id === 3)
{
if (box3.style.display === "none")
{
box1.style.display = "none";
box2.style.display = "none";
box3.style.display = "block";
}
}
}
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
No offense. I appreciate every effort on everything here, but I think I still prefer the original style. Parts are downloadable, parts can be retrieved with the waybackmachine.
I'd recommend changing the formatting of the .css though (my opinion) into something like this:
Code:
body {
background-color:#bcf4ee;
font:11px Verdana,Arial,Helvetica,sans-serif;
}
#container {
width:1024px;
margin:100px auto;
}
Since it's in development anyways and better to read in my opinion. When it's done for production, you can always minify the CSS and use that :) Goodluck regardless.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
The General
Waybackmachine
Quote:
Originally Posted by
Emily
No offense. I appreciate every effort on everything here, but I think I still prefer the original style. Parts are downloadable, parts can be retrieved with the waybackmachine.
I'd recommend changing the formatting of the .css though (my opinion) into something like this:
Code:
body {
background-color:#bcf4ee;
font:11px Verdana,Arial,Helvetica,sans-serif;
}
#container {
width:1024px;
margin:100px auto;
}
Since it's in development anyways and better to read in my opinion. When it's done for production, you can always minify the CSS and use that :) Goodluck regardless.
Much appreciated on the source; waybackmachine is very useful, I was using a stock image from bing prior
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
if you need help, i’ve already recreated this in css, using none of the original images
Sent from my iPhone using Tapatalk
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Laynester
if you need help, i’ve already recreated this in css, using none of the original images
Sent from my iPhone using Tapatalk
Feel free to contribute on however you see fit
Revision 8: Download Zip (contains images)
Refer back to the latest post to see if it's on a later revision
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I have started to transfer this project to MyBB forums as a template/theme with the idea in mind that I'll use an open source emulator to convert the database (sql) over to MyBB's structure
http://i.imgur.com/Cw5Ag0P.png
http://i.imgur.com/Gx1JRYb.png
I will not be compromising on any features that MyBB has and will eventually release everything in 1 entity.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Sabbo
I have started to transfer this project to MyBB forums as a template/theme with the idea in mind that I'll use an open source emulator to convert the database (sql) over to MyBB's structure
http://i.imgur.com/Cw5Ag0P.png
http://i.imgur.com/Gx1JRYb.png
I will not be compromising on any features that MyBB has and will eventually release everything in 1 entity.
not really sure why you’re doing a forum as a base but it kinda sounds like a good idea so i’m intrigued.
Sent from my iPhone using Tapatalk
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Laynester
not really sure why you’re doing a forum as a base but it kinda sounds like a good idea so i’m intrigued.
To create a forum/cms as feature rich as MyBB, it would take years; the people behind MyBB have been developing this product for over a decade (and then some). It has everything hotel owners would need/want + more. My intention was to continue this project by making it into a CMS, this way I don't need to worry whether the software is not safe or if I'm using up to date practices
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
http://i.imgur.com/dJmmWuU.png
I believe I have completed all of the global notifications; I don't know if I am satisfied with how they have turned out. Feedback is welcome!
CSS (so far) (The templates are a headache to showcase)
Code:
body {
background-color:#525D63;
color: #000;
text-align: left;
margin: 0;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}
a {
color: #D75C03;
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
word-break: break-all;
}
#container {
background-color: #47839D;
width: 1022px;
margin: 100px auto;
outline: 3px solid #FFF;
border: 1px solid #000;
}
.wrapper {
padding: 12px;
}
div#status_container {
background-color: #555;
width: inherit;
height: 30px;
color: #FFF;
border-bottom: 1px solid #000;
}
div#status_container ul {
list-style: none;
margin: 0;
padding: 0;
}
div#status_container ul li {
width: 338px;
height: 30px;
line-height: 30px;
display: inline-block;
vertical-align: text-top;
}
div#status_container ul li span.status_box {
background-color: #444;
width: 328px;
height: 20px;
line-height: 20px;
margin: 5px auto 0;
display: block;
text-align: center;
border: 1px solid #000;
}
div#status_container ul li a {
background-color: #666;
padding: 4px 10px 9px;
color:#FFF;
text-decoration: none;
border: solid #000000;
border-width: 1px 1px 0;
}
div#status_container ul li a:focus {
padding: 4px 10px 13px;
}
div#status_container ul li a span#status_icon_1,
div#status_container ul li a span#status_icon_2,
div#status_container ul li a span#status_icon_3 {
background-image: url(images/status_icon.png);
height: 23px;
display: inline-block;
vertical-align: middle;
}
div#status_container ul li a span#status_icon_1 {
background-position: 0;
width: 25px;
}
div#status_container ul li a span#status_icon_2 {
background-position: -25px 0;
width: 27px;
}
div#status_container ul li a span#status_icon_3 {
background-position: -52px 0;
width: 22px;
}
header {
position: relative;
}
header section {
background: url(images/header.png) round;
width: inherit;
height: 150px;
border-bottom: 1px solid #000;
}
header section h1 a {
font-size: 26px;
color: #000;
text-decoration: none;
position: absolute;
top: 35px;left: 40px;
}
header p#header_desc {
position: absolute;
top: 65px;
left: 40px;
}
header div#status_block {
background: rgba(242, 242, 242, 0.5);
width: 326px;
max-height: 122px;
margin: 0 auto;
padding: 5px;
border: solid #000;
border-width: 0 1px 1px;
overflow: hidden;
font-weight: bold;
}
header div#status_block h2 {
background-color: #FFF;
padding: 5px;
font-size: inherit;
display: block;
}
header div#status_block p.status_desc {
border-top: 1px dashed black;
margin: 5px 0;
padding: 5px 0;
text-align: right;
}
header div#status_block p.status_desc img#frank {
margin: -26px 10px 0;
}
header div#status_block p.status_desc img#avatar {
margin: -56px 0 0;
}
header div#status_block p.status_desc a {
background-color: #d7d7d7;
margin-bottom: 5px;
padding: 2.5px 0 2.5px 10px;
display: inline-block;
border: 1px solid #000;
color: #000;
text-decoration: none;
}
header div#status_block p.status_desc a span.arrow {
background-color: #FF8015;
margin-left: 10px;
padding: 2.5px 5px;
color: #FFF;
border-left: 1px solid #000;
}
header section a#header_play {
background-image: url(images/header_play.gif);
width: 105px;
height: 106px;
position: absolute;
top: 15px;
right: 165px;
text-align: center;
}
header nav {
position: absolute;
bottom: 4px;
left: 5px;
}
header nav ul {
margin: 0;
padding: 0;
list-style: none;
vertical-align: text-top;
}
header nav ul li {
display: inline;
}
header nav ul li a {
background-color: #D75C03;
margin-right: -4px;
padding: 8px 12px 8px 8px;
display: inline;
color: #FFF;
text-decoration: none;
text-shadow: 2px 2px 2px #000;
text-transform: uppercase;
font-weight: bold;
border: solid #000;
border-width: 1px 0 0 1px;
}
header nav ul li a#nav_active {
background-color: #FFCE00;
text-shadow: none;
color: #000;
padding: 12px 12px 12px 8px;
border-width: 1px 1px 0;
}
header nav ul li a span#nav_icon_1,
header nav ul li a span#nav_icon_2,
header nav ul li a span#nav_icon_3,
header nav ul li a span#nav_icon_4,
header nav ul li a span#nav_icon_5,
header nav ul li a span#nav_icon_6,
header nav ul li a span#nav_icon_7 {
background-image: url(images/nav_icon.png);
height: 19px;
margin-right: 1px;
display: inline-block;
vertical-align: middle;
}
header nav ul li a span#nav_icon_1 {
background-position: 0;
width: 20px;
}
header nav ul li a span#nav_icon_2 {
background-position: -20px 0;
width: 19px;
}
header nav ul li a span#nav_icon_3 {
background-position: -39px 0;
width: 17px;
}
header nav ul li a span#nav_icon_4 {
background-position: -56px 0;
width: 15px;
}
header nav ul li a span#nav_icon_5 {
background-position: -71px 0;
width: 18px;
}
header nav ul li a span#nav_icon_6 {
background-position: -89px 0;
width: 19px;
}
header nav ul li a span#nav_icon_7 {
background-position: -107px 0;
width: 21px;
}
header nav ul span#nav_right {
background-image: url(images/nav_right.gif);
width: 8px;
height: 29px;
margin-bottom :-10px;
display: inline-block;
}
div#container div#nav {
width: 1024px;
height: 23px;
position: relative;
}
div#container div#nav ul {
background-color: #FFCE00;
width: inherit;
height: inherit;
line-height: 22px;
margin: 0;padding: 0;
list-style: none;
text-indent: 8px;
position: absolute;
left: -2px;
border: solid #000000;
border-width: 0px 1px 1px;
}
div#container div#nav ul li {
color: #930930;
display: inline;
}
div#container div#nav ul li a {
color: #000;
font-weight: bold;
}
main section.pm_alert,
main section.red_alert {
background-color: #FFF;
margin-bottom: 12px;
padding: 6px;
font-weight: bold;
overflow: hidden;
}
main section.pm_alert h2,
main section.red_alert h2 {
margin-bottom: 6px;
padding: 10px;
font-size: 11px;
color: #FFF;
}
main section.pm_alert h2 {
background-color: #8C3C02;
}
main section.red_alert h2 {
background-color: #A5161A;
}
main section.pm_alert p,
main section.red_alert p {
padding: 0 10px;
}
main section.pm_alert p img,
main section.red_alert p img {
margin-right: 5px;
}
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
http://i.imgur.com/SDlqKe5.png
So, I finished with the Navigation Templates and started messing around with the Forum Bit templates. Feedback is welcome
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
http://i.imgur.com/9KIo0ZV.png
Did some tweaking with the padding, it wasn't correctly aligned!
http://i.imgur.com/ylrIl3K.png
Forum Display, work in proggress
Update
Originally I was using this image:
http://i.imgur.com/D9lSmh7.gif
I did some tweaking and recreated the animation into this image:
http://i.imgur.com/WdfOxO3.gif
Animation seems to be a lot smoother and now I can create something like this:
Code:
header section a#header_play {
background-image: url(images/header_play.gif);
width: 105px;
height: 106px;
position: absolute;
top: 15px;
right: 165px;
text-align: center;
}
header section a#header_play.closed {
background-position: -105px 0;
}
I thought it was just a cool little addition, feedback is welcome!
Crazy notes
http://i.imgur.com/6BYiO1Q.png
Decided to enable everything on the website and this is the result, so crazy!
http://i.imgur.com/ukpqc3M.png
This is how the MyBB theme/template originally looks, crazy how much has changed in such short time span!
Feedback is welcome!
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
http://i.imgur.com/6zkaZtj.png
Debug Summary template is complete!
Footer took the longest for me as I was having difficulty on how I wanted to lay the content out. I am pretty happy with the end result! There is still a couple of things that need addressing.
Forum jump has its own template, who knew?
User/mod browsing won't need anymore changes
As always, feedback is welcome
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
http://i.imgur.com/iAVzcsU.png
We have lots of columns/rows and different colour headers!
Feedback is welcome
Notes:
To add static content on Forum Home (index.php); edit template Index Page Templates > index
Advertisement column will only appear on Forum Home (index.php). To add the column to other pages, you will need to edit other templates (this will depend on your situation)
Added the appropriate design to forumdisplay_rules
To work on (no particular order):
index_whosonline
footer
forumdisplay_threadlist
index
Index template:
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$forums}
<!-- start: Second column -->
{$boardstats}
<!-- end: Second column -->
<div id="main_ads" class="float_left">
<section class="ads">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>{$lang->advertisement}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="{$theme['imgdir']}/ads_battle_ball.png" alt="Ads" title="Ads" />
</td>
</tr>
</tbody>
</table>
</section>
</div>
{$footer}
</body>
</html>
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I am super excited with the latest revision, I created first of many plugins that will be released exclusively with this theme/template!
There is a couple of things that need improving upon, but I will be prioritising on other things for the project at this time. Language system will be implemented prior full release*
Features:
- Allows you to show/hide top story headlines
- Allows you to which forums you want to headline; so for instance you could create a forum that's locked and only admins can post in that forum.
- Allows you to limit how many posts can be displayed in top story
The plugin system makes everything very simple, download the package, upload it to inc/plugins/ and activate it inside housekeeping (admincp)!
I have also fixed some alignment issues with padding
Feedback is welcome!
http://i.imgur.com/RSX3GAS.png
http://i.imgur.com/vMvVYjM.png
PHP Code:
<?php
/**
* MyBB 1.8
*
* Top Story
*
*/// Make sure we can't access this file directly from the browser.
if(!defined('IN_MYBB'))
{
die('This file cannot be accessed directly.');
}// cache templates - this is important when it comes to performance
// THIS_SCRIPT is defined by some of the MyBB scripts, including index.php
if(defined('THIS_SCRIPT'))
{
global $templatelist; if(isset($templatelist))
{
$templatelist .= ',';
} if(THIS_SCRIPT== 'index.php')
{
$templatelist .= 'index_topstory, index_topstory_topstory';
}
}if(defined('IN_ADMINCP'))
{
// Add our topstory_settings() function to the setting management module to load language strings.
$plugins->add_hook('admin_config_settings_manage', 'topstory_settings');
$plugins->add_hook('admin_config_settings_change', 'topstory_settings');
$plugins->add_hook('admin_config_settings_start', 'topstory_settings');
// We could hook at 'admin_config_settings_begin' only for simplicity sake.
}
else
{
// Add our index_topstory() function to the index_start hook so when that hook is run our function is executed
$plugins->add_hook('index_start', 'index_topstory');
}function topstory_info()
{
/**
* Array of information about the plugin.
* name: The name of the plugin
* description: Description of what the plugin does
* website: The website the plugin is maintained at (Optional)
* author: The name of the author of the plugin
* authorsite: The URL to the website of the author (Optional)
* version: The version number of the plugin
* compatibility: A CSV list of MyBB versions supported. Ex, '121,123', '12*'. Wildcards supported.
* codename: An unique code name to be used by updated from the official MyBB Mods community.
*/
return array(
'name' => 'Top Story',
'description' => '',
'website' => '',
'author' => '',
'authorsite' => '',
'version' => '1.0',
'compatibility' => '18*',
'codename' => 'topstory'
);
}/*
* _activate():
* Called whenever a plugin is activated via the Admin CP. This should essentially make a plugin
* 'visible' by adding templates/template changes, language changes etc.
*/
function topstory_activate()
{
global $db;
// Add a new template (topstory) to our global templates (sid = -1)
$templatearray = array(
'index_topstory' => '<section id="top_story">
<table cellspacing="{$theme[\'borderwidth\']}" cellpadding="{$theme[\'tablespace\']}">
<thead>
<tr>
<td width="459">
Top Story
</td>
<td width="284">
What\'s New
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="http://forum.ragezone.com/images/top_story.gif" alt="Top Story" title="Top Story" />
</td>
<td>
<div>
{$topstories}
<a href="{$mybb->settings[\'bburl\']}/forumdisplay.php?fid={$fid}" class="button float_right">Read more<span class="arrow">></span></a>
</div>
</td>
</tr>
</tbody>
</table>
</section>',
'index_topstory_topstory' => '<strong>[{$dateline}]</strong>
<a href="{$mybb->settings[\'bburl\']}/showthread.php?tid={$id}">{$subject}</a>
<br />
{$message}
<br />
<br />'
); // Create templates.
foreach($templatearray as $name => $code)
{
$template = array(
'title' => $db->escape_string($name),
'template' => $db->escape_string($code),
'version' => '1',
'sid' => '-2',
'dateline' => TIME_NOW
);
// Create
$db->insert_query('templates', $template);
// Remove this template from the earlier queried list.
unset($templates[$name]);
} // This is required so it updates the settings.php file as well and not only the database - they must be synchronized!
rebuild_settings(); // Include this file because it is where find_replace_templatesets is defined
require_once MYBB_ROOT . '/inc/adminfunctions_templates.php'; // Edit the index template and add our variable to above {$forums}
find_replace_templatesets('index', '#'.preg_quote('{$forums}').'#', "{\$topstory}\n{\$forums}");
}/*
* _deactivate():
* Called whenever a plugin is deactivated. This should essentially 'hide' the plugin from view
* by removing templates/template changes etc. It should not, however, remove any information
* such as tables, fields etc - that should be handled by an _uninstall routine. When a plugin is
* uninstalled, this routine will also be called before _uninstall() if the plugin is active.
*/
function topstory_deactivate()
{
global $db; // Delete templates belonging to template groups.
$db->delete_query('templates', 'title=\'index_topstory\' OR title LIKE \'index_topstory_%\''); // Include this file because it is where find_replace_templatesets is defined
require_once MYBB_ROOT.'inc/adminfunctions_templates.php'; // Remove template edits
find_replace_templatesets('index', '#'.preg_quote('{$topstory}').'#', '');
}/*
* _install():
* Called whenever a plugin is installed by clicking the 'Install' button in the plugin manager.
* If no install routine exists, the install button is not shown and it assumed any work will be
* performed in the _activate() routine.
*/
function topstory_install()
{
global $db;
$settinggroups = array(
'name' => 'topstory',
'title' => 'Top Story Settings',
'description' => '',
'disporder' => 1,
'isdefault' => 0
); $gid = $db->insert_query('settinggroups', $settinggroups); $settings[] = array(
'name' => 'topstory_display',
'title' => 'Do you want to see Top Story?',
'description' => '',
'optionscode' => 'yesno',
'disporder' => 1,
'value' => 1,
'gid' => $gid
); $settings[] = array(
'name' => 'topstory_forum',
'title' => 'Which Forums do you want to see shown on Top Story?',
'description' => 'The ID of the forums that you want to show. Separate ID by commas.',
'optionscode' => 'text',
'disporder' => 2,
'value' => '',
'gid' => $gid
); $settings[] = array(
'name' => 'topstory_limit',
'title' => 'How many Top Stories do you want to see?',
'description' => '',
'optionscode' => 'text',
'disporder' => 3,
'value' => 5,
'gid' => $gid
); $db->insert_query_multiple('settings', $settings); // This is required so it updates the settings.php file as well and not only the database - they must be synchronized!
rebuild_settings();
}/*
* _is_installed():
* Called on the plugin management page to establish if a plugin is already installed or not.
* This should return TRUE if the plugin is installed (by checking tables, fields etc) or FALSE
* if the plugin is not installed.
*/
function topstory_is_installed()
{
global $db;
$query = $db->simple_select('settinggroups', '*', 'name=\'topstory\''); // If the rows exists then it means the plugin is installed because we only drop it on uninstallation
return $db->num_rows($query);
}/*
* _uninstall():
* Called whenever a plugin is to be uninstalled. This should remove ALL traces of the plugin
* from the installation (tables etc). If it does not exist, uninstall button is not shown.
*/
function topstory_uninstall()
{
global $db; // Delete templates belonging to template groups.
$db->delete_query('templates', 'title=\'index_topstory\' OR title LIKE \'index_topstory_%\''); // Delete settings group
$db->delete_query('settinggroups', 'name=\'topstory\''); // Remove the settings
$db->delete_query('settings', 'name IN (\'topstory_display','topstory_forum','topstory_limit\')'); // This is required so it updates the settings.php file as well and not only the database - they must be synchronized!
rebuild_settings();
}/*
* Loads the settings language strings.
*/
function topstory_settings()
{}/*
* Displays the list of stories on index - depending on the setting of course.
*/
function index_topstory()
{
global $mybb; // Only run this function is the setting is set to yes
if($mybb->settings['topstory_display'] == 0)
{
return;
} global $db, $templates, $topstories, $topstory; $topstory_forum = ''; if($mybb->settings['topstory_forum'])
{
$topstory_forum .= ' AND t.fid IN (' . $mybb->settings['topstory_forum'] . ') ';
} require_once MYBB_ROOT.'inc/functions_search.php'; $unsearchforums = get_unsearchable_forums(); if($unsearchforums)
{
$topstory_forum .= ' AND t.fid IN ($unsearchforums)';
} $inactiveforums = get_inactive_forums(); if($inactiveforums)
{
$topstory_forum .= ' AND t.fid IN ($inactiveforums)';
} $permissions = forum_permissions(); for($i = 0; $i <= sizeof($permissions); $i++)
{
if(isset($permissions[$i]['fid']) && ( $permissions[$i]['canview'] == 0 || $permissions[$i]['canviewthreads'] == 0 ))
{
$topstory_forum .= ' AND t.fid <> '.$permissions[$i]['fid'];
}
} $topstory_forum .= ' AND p.visible <> -1'; // Retreive all the stories from the database
$story = '';
$topstory_limit = (int) $mybb->settings['topstory_limit'];
$query = $db->query("
SELECT p.*, u.username AS userusername, u.usergroup, u.displaygroup, lp.usergroup AS lastusergroup, lp.displaygroup as lastdisplaygroup, p.visible
FROM ".TABLE_PREFIX."posts p
LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid=p.uid)
LEFT JOIN ".TABLE_PREFIX."users lp ON (p.uid=lp.uid)
LEFT JOIN ".TABLE_PREFIX."threads t ON (p.tid=t.tid)
WHERE 1 = 1 {$topstory_forum}
ORDER BY p.dateline DESC
LIMIT $topstory_limit
");
while($story = $db->fetch_array($query))
{
// htmlspecialchars_uni is similar to PHP's htmlspecialchars but allows unicode
$id = $story['tid'];
$fid = $story['fid'];
$subject = htmlspecialchars_uni($story['subject']);
$message = preg_replace('/((\w+\W*){'.(5-1).'}(\w+))(.*)/', '${1}', htmlspecialchars_uni($story['message'])).'...';
$dateline = my_date('d-m-y', $story['lastpost']);
$topstories .= eval($templates->render('index_topstory_topstory'));
} // Set $topstory as our template and use eval() to do it so we can have our variables parsed
$topstory = eval($templates->render('index_topstory'));
}?>
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Would you be able to make it work with Arcturus? If you have questions feel free to message me.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
The General
Would you be able to make it work with Arcturus? If you have questions feel free to message me.
This is something I have considered when thinkin' about using closed source emulators. I've tried my best to pick out the differences that would make your emulator incompatible with mybb.
Left is your database and right is MyBB
Permissions is called Usergroups in MyBB
ID has the field GID smallint(5)
rank_name has the field title varchar(120)
Bans is called Banned in MyBB
user_id has the field UID int(10)
user_staff_id has the field admin int(10)
timestamp has the field dateline int(10)
ban_expire has the field lifted int(10)
ban_reason has the field reason varchar(255)
Users is called Users in MyBB :')
id has the field
uid int(10)
mail has the field
email varchar(220)
rank has the field
usergroup smallint(5)
look has the field
avatar varchar(200)
auth_ticket has the field
loginkey varchar (50) - This won't matter tho tbh
last_login has the field
lastvisit int(10)
last_online has the field
lastactive int(10)
account_created has the field
regdate int(10)
account_day_of_birth has the field
birthday varchar(15)
ip_register has the field
regip varbinary(16)
ip_current has the field
lastip varbinary(16)
- - - Updated - - -
Ah, it feels like it was only yesterday that I started this project
Old
http://i.imgur.com/Gx1JRYb.png
New
http://i.imgur.com/ZgQPnmw.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Please think about change the squares to the original boxes borders
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
m.tiago
Please think about change the squares to the original boxes borders
Something like this? If so, I just prefer square over rounded; it doesn't mean that the individual user can't change it in the CSS
http://i.imgur.com/eMphCdr.png
- - - Updated - - -
So, I've just been tidying up the project; trying to keep it tidy and inline and I want to mention some of my thoughts on the project.
We're at revision 19, the opening post release is at revision 9. When I started revision 10, it was the swap to MYBB. MyBB uses tables, now prior revision 10 I wasn't using tables. I kept using tables because it was easier to do so. MyBB will be releasing 1.9 later this year (we're at 1.8.x) and with the release of 1.9 they will be overhauling their template/themes to make it a responsive forum.
I've thought about removing the tables and make the project responsive, but I ask myself, why should I do that? The whole project revolves around the use of Flash, the target audience will be using flash and Flash doesn't work on mobile phones. So what is the point in making it responsive? I doubt that with the release of v1.9 will destroy the theme/templates I am working on because most of the {$theme} tags are redundant (most {$theme} tags will be getting removed/changed in 1.9 anyway).
Here is the current css anyway:
Code:
body {
background-color: #525D63;
text-align: left;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}
body,
h1, h2, h3, h4, h5, h6,
p,
div#status_container ul,
header nav ul,
div#container div#nav ul {
margin: 0;
}
body,
header section h1 a,
header div#status_block p.status_desc a,
header nav ul li a#nav_active,
div#container div#nav ul li a,
.blocker .modal table tbody tr td button {
color: #000;
}
a {
color: #D75C03;
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6,
p {
word-break: break-all;
}
select,
input.textbox,
button,
input.checkbox {
font-family: inherit;
font-size: inherit;
outline: 0;
}
select,
input.textbox,
button,
input.checkbox,
#container,
div#status_container ul li div.status_box,
header div#status_block p.status_desc a {
border: 1px solid #000;
}
select {
padding: 3px;
}
select,
input.textbox,
input.checkbox {
background: #FFF;
}
input.textbox {
padding: 4px;
}
input.textbox.portal_search {
width: 68%;
}
button {
background: #1373A9;
padding: 3px 0 3px 10px;
cursor: pointer;
}
button,
button span.arrow,
div#status_container,
div#status_container ul li a,
header div#status_block p.status_desc a span.arrow,
header nav ul li a,
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
main section#top_story tbody tr td,
.blocker .modal table thead tr td {
color: #FFF;
}
button,
header div#status_block,
header nav ul li a,
div#container div#nav ul li a,
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
main section#ads thead tr td,
main section.table tbody tr.trow_sep,
main footer,
.blocker .modal table thead tr td {
font-weight: bold;
}
button,
div#status_container ul li a,
header section h1 a,
header div#status_block p.status_desc a,
header nav ul li a,
main section#navigation p a,
main section.table thead tr td a,
main footer section.float_right div p a {
text-decoration: none;
}
input.checkbox
div#status_container ul li a span#status_icon_1,
div#status_container ul li a span#status_icon_2,
div#status_container ul li a span#status_icon_3,
header nav ul li a span#nav_icon_1,
header nav ul li a span#nav_icon_2,
header nav ul li a span#nav_icon_3,
header nav ul li a span#nav_icon_4,
header nav ul li a span#nav_icon_5,
header nav ul li a span#nav_icon_6,
header nav ul li a span#nav_icon_7 {
vertical-align: middle;
}
#container {
background-color: #47839D;
width: 1022px;
margin: 100px auto;
outline: 3px solid #FFF;
}
.wrapper {
padding: 12px;
}
.wrapper,
header div#status_block,
main footer {
overflow: hidden;
}
.clear,
main footer {
clear: both;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
div#status_container {
background-color: #555;
height: 30px;
border-bottom: 1px solid #000;
}
div#status_container,
header section,
div#container div#nav ul,
main footer {
width: inherit;
}
div#status_container ul,
header nav ul,
div#container div#nav ul {
list-style: none;
}
div#status_container ul,
header nav ul,
div#container div#nav ul {
padding: 0;
}
div#status_container ul li {
width: 338px;
height: 30px;
line-height: 30px;
vertical-align: text-top;
}
div#status_container ul li,
div#status_container ul li a span#status_icon_1,
div#status_container ul li a span#status_icon_2,
div#status_container ul li a span#status_icon_3,
header div#status_block p.status_desc a,
header nav ul li a span#nav_icon_1,
header nav ul li a span#nav_icon_2,
header nav ul li a span#nav_icon_3,
header nav ul li a span#nav_icon_4,
header nav ul li a span#nav_icon_5,
header nav ul li a span#nav_icon_6,
header nav ul li a span#nav_icon_7,
header nav ul span#nav_right,
main section.table tbody tr td span.forum_status,
main section.table tbody tr td div.subforumicon,
main section.table tbody tr td div.trow_threads_posts,
.blocker:before,
.blocker .modal {
display: inline-block;
}
div#status_container ul li div.status_box {
background-color: #444;
width: 328px;
height: 20px;
line-height: 20px;
margin: 5px auto 0;
text-align: center;
}
div#status_container ul li a {
background-color: #666;
padding: 4px 10px 9px;
border: solid #000000;
border-width: 1px 1px 0;
}
div#status_container ul li a:focus {
padding: 4px 10px 13px;
}
div#status_container ul li a span#status_icon_1,
div#status_container ul li a span#status_icon_2,
div#status_container ul li a span#status_icon_3 {
background-image: url(images/status_icon.png);
height: 23px;
}
div#status_container ul li a span#status_icon_1 {
background-position: 0;
width: 25px;
}
div#status_container ul li a span#status_icon_2 {
background-position: -25px 0;
width: 27px;
}
div#status_container ul li a span#status_icon_3 {
background-position: -52px 0;
width: 22px;
}
header,
div#container div#nav,
main section#top_story tbody tr td,
.blocker .modal {
position: relative;
}
header section {
background: url(images/header.png) round;
height: 150px;
border-bottom: 1px solid #000;
}
header section h1 a {
font-size: 26px;
top: 35px;
left: 40px;
}
header section h1 a,
header p#header_desc,
header section a#header_play,
header nav,
div#container div#nav ul,
main section#top_story tbody tr td div,
.blocker .modal a.close-modal {
position: absolute;
}
header p#header_desc {
top: 65px;
left: 40px;
}
header div#status_block {
background: rgba(242, 242, 242, 0.5);
width: 324px;
max-height: 122px;
margin: 0 auto;
border: solid #000;
border-width: 0 1px 1px;
}
header div#status_block,
main section.table,
main section#ads,
main section#ads thead tr td,
main section.table tbody tr.trow_sep,
main footer,
.blocker .modal {
padding: 6px;
}
header div#status_block h2 {
padding: 5px;
font-size: inherit;
display: block;
}
header div#status_block h2,
main section#top_story,
main section.table,
main section#ads {
background-color: #FFF;
}
header div#status_block p.status_desc {
border-top: 1px dashed black;
margin: 6px 0;
padding: 6px 0;
text-align: right;
}
header div#status_block p.status_desc img#frank {
margin: -26px 10px 0;
}
header div#status_block p.status_desc img#avatar {
margin: -56px 0 0;
}
header div#status_block p.status_desc a {
background-color: #d7d7d7;
margin-bottom: 6px;
padding: 3px 0 3px 10px;
}
header div#status_block p.status_desc a span.arrow,
button span.arrow {
background-color: #FF8015;
margin-left: 10px;
padding: 3px 6px;
border-left: 1px solid #000;
}
header section a#header_play {
background-image: url(images/header_play.gif);
width: 105px;
height: 106px;
top: 15px;
right: 165px;
}
header nav {
bottom: 4px;
left: 12px;
}
header nav ul {
vertical-align: text-top;
}
header nav ul li {
display: inline;
}
header nav ul li a {
background-color: #D75C03;
margin-right: -4px;
padding: 8px 12px 8px 8px;
display: inline;
text-shadow: 2px 2px 2px #000;
text-transform: uppercase;
border: solid #000;
border-width: 1px 0 0 1px;
}
header nav ul li a#nav_active {
background-color: #FFCE00;
text-shadow: none;
padding: 12px 12px 12px 8px;
border-width: 1px 1px 0;
}
header nav ul li a span#nav_icon_1,
header nav ul li a span#nav_icon_2,
header nav ul li a span#nav_icon_3,
header nav ul li a span#nav_icon_4,
header nav ul li a span#nav_icon_5,
header nav ul li a span#nav_icon_6,
header nav ul li a span#nav_icon_7 {
background-image: url(images/nav_icon.png);
height: 19px;
margin-right: 1px;
}
header nav ul li a span#nav_icon_1 {
background-position: 0;
width: 20px;
}
header nav ul li a span#nav_icon_2 {
background-position: -20px 0;
width: 19px;
}
header nav ul li a span#nav_icon_3 {
background-position: -39px 0;
width: 17px;
}
header nav ul li a span#nav_icon_4 {
background-position: -56px 0;
width: 15px;
}
header nav ul li a span#nav_icon_5 {
background-position: -71px 0;
width: 18px;
}
header nav ul li a span#nav_icon_6 {
background-position: -89px 0;
width: 19px;
}
header nav ul li a span#nav_icon_7 {
background-position: -107px 0;
width: 21px;
}
header nav ul span#nav_right {
background-image: url(images/nav_right.gif);
width: 8px;
height: 29px;
margin-bottom :-10px;
}
div#container div#nav {
width: 1024px;
height: 23px;
}
div#container div#nav ul {
background-color: #FFCE00;
height: inherit;
line-height: 22px;
text-indent: 23px;
left: -2px;
border: solid #000000;
border-width: 0px 1px 1px;
}
div#container div#nav ul li {
color: #930930;
display: inline;
}
main section#navigation p {
color: #9CC;
margin-bottom: 6px;
}
main section#navigation p,
main section#navigation h2,
main section#top_story thead tr td,
main section.table thead tr td,
.blocker .modal table thead tr td {
padding: 0 10px;
}
main section#navigation p a,
main section.table thead tr td a {
color: inherit;
}
main section#navigation h2 {
background-color: #083D55;
line-height: 34px;
text-transform: uppercase;
}
main section#navigation h2,
main section#top_story,
main section.table,
main section#ads {
margin-bottom: 12px;
}
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
.blocker .modal table thead tr td {
height: 34px;
}
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
main footer,
.blocker .modal table thead tr td {
font-size: 11px;
}
main div#main_content {
width: 807px;
}
main section#top_story {
padding: 6px 6px 6px 0;
}
main section#ads {
width: 173px;
margin-left: 12px;
}
main section.table table,
main section#ads table,
main section#ads tbody tr td img {
width: 100%;
}
main section.table thead::after {
height: 6px;
display: table-row;
content: "";
}
main section#top_story thead tr td {
background-color: #222;
text-transform: uppercase;
border-left:6px solid #FFF;
border-collapse: separate;
}
main section.table thead tr td {
background-color: #D75C03;
}
main section.table thead tr td.brown_alert {
background-color: #8C3C02;
}
main section.table thead tr td.red_alert {
background-color: #A5161A;
}
main section.table thead tr td.green {
background-color: #508F54;
}
main section#ads thead tr td {
background-color: #000;
color: #555;
text-align: center;
}
main section.table thead tr td span {
font-weight: normal;
display: block;
}
main section#top_story tbody tr td {
background-color: #004979;
border-left: 6px solid #FFF;
border-collapse: separate;
}
main section#top_story tbody tr td img {
width: 100%;
}
main section#top_story tbody tr td div {
top: 6px;
right: 10px;
left: 10px;
}
main section.table tbody tr.trow1 {
background-color: #9DD1E7;
}
main section.table tbody tr.trow2 {
background-color: #E6EFEF;
}
main section.table tbody tr.trow_shaded {
background-color: transparent;
}
main section.table tbody tr.trow_deleted,
.post.deleted_post {
background: #E8DEFF;
}
main section.table tbody tr.trow_selected,
main section.table tbody tr.trow_selected td {
background-color: #FFFBD9;
color: #333;
}
main section.table tbody tr.trow_sep {
background: #ddd;
color: #333;
border-bottom: 1px solid #c5c5c5;
font-size: 12px;
}
main section.table tbody tr.trow1 a,
main section.table tbody tr.trow2 a {
color: #47839D;
}
main section.table tbody tr.trow_selected a {
color: #333;
}
main section.table tbody tr.trow1 td,
main section.table tbody tr.trow2 td,
main section.table tbody tr.trow_shaded td,
.blocker .modal table tbody tr td {
padding: 6px 10px;
}
main section.table tbody tr.trow_shaded td img {
margin-right: 6px;
}
main section.table tbody tr td span.forum_status {
height: 32px;
width: 32px;
}
main section.table tbody tr td span.forum_on {
background: url(images/forum_on.gif) no-repeat;
}
main section.table tbody tr td span.forum_off {
background: url(images/forum_off.gif) no-repeat;
}
main section.table tbody tr td span.forum_offclose {
background: url(images/forum_offclose.gif) no-repeat;
}
main section.table tbody tr td span.forum_offlink {
background: url(images/forum_offlink.gif) no-repeat;
}
main section.table tbody tr td div.subforumicon {
background: url(images/mini_status_sprite.png) no-repeat 0 0;
height: 10px;
width: 10px;
margin: 0 6px;
}
main section.table tbody tr td div.subforum_minion {
background-position: 0 0;
}
main section.table tbody tr td div.subforum_minioff {
background-position: 0 -10px;
}
main section.table tbody tr td div.subforum_minioffclose {
background-position: 0 -20px;
}
main section.table tbody tr td div.subforum_miniofflink {
background-position: 0 -30px;
}
main section.table tbody tr td div.trow_threads_posts {
margin: 0 3px;
}
main section.table tbody tr td div.trow_threads_posts img {
margin-bottom: 3px;
display: block;
}
main footer {
background-color: #0A4362;
color: #7295AA;
}
main footer section.float_left {
width: 247px;
height: 74px;
margin-right: 10px;
border-right: 1px dotted #7295AA;
}
main footer section.float_left div {
margin-top: 16px;
margin-left: 65px;
}
main footer section.float_left div h3 {
font-size: 20px;
}
main footer section.float_right {
width: 728px;
height: 74px;
}
main footer section.float_right div {
margin-top: 26px;
}
main footer section.float_right div p a {
color: #47839D;
}
.blocker {
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
text-align: center;
z-index: 9999;
overflow: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.blocker:before {
content: "";
height: 40%;
margin-right: -0.05em;
}
.blocker.behind {
background-color: transparent;
}
.blocker .modal {
background-color: #E2E2E2;
width: 400px;
z-index: 2;
}
.blocker .modal table {
width: 100%;
}
.blocker .modal table thead::after {
height: 6px;
display: table-row;
content: "";
}
.blocker .modal table thead tr td {
background-color: #6F6F6F;
}
.blocker .modal table tbody tr td button {
background-color: #D7D7D7;
}
.blocker .modal a.close-modal {
top: 8px;
right: 15px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}
.blocker .modal-spinner {
display: none;
width: 102px;
height: 67px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
}
- - - Updated - - -
http://i.imgur.com/eUMDv7L.png
Changed some of the css to fix alignment issues
Showcasing some templates (error, error_inline, error_nopermission_loggedin, global_bannedwarning and others)
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Just looking for some feedback
http://i.imgur.com/XvmN7EB.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Sabbo
Do you have an online demo? I would to provide some feedback on the total project.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
GertJanA
Do you have an online demo? I would to provide some feedback on the total project.
Yes, this is something that I plan on doing in the near future. I don't think a online demo is a good idea at the moment, as everything I haven't shown on this thread, is broken...
Work in progress:
http://i.imgur.com/KjKhRY6.png
- - - Updated - - -
I was not satisfied with Forum options in column 2, so I have made the appropriate adjustments, feedback is welcome
http://i.imgur.com/kMuSCEW.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Not a Huge fan on how postbit (column 2) template is coming together
http://i.imgur.com/qv9agqT.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Consider using Discourse instead of MyBB. MyBB has been notorious for sql injections over the years and hardly follows any best practices.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Hoshiko
Consider using Discourse instead of MyBB. MyBB has been notorious for sql injections over the years and hardly follows any best practices.
Maybe I'll look into using Discourse for another project that I have in mind!
http://i.imgur.com/bFo8d9zg.png
So, I had to take a break from this project for a little bit, as I was starting to get stressed out, I have aligned postbit to more of my liking. [STRIKE]That being said, I have finally found a flaw in the design and that is the list of buttons at the bottom of every post. There are a lot more buttons than what's being shown, so I'll have to compromise and change the buttons into text (sadly) as I don't have enough width to compensate for the dozen buttons that there is
[/STRIKE]
- - - Updated - - -
Logged into a test account to see what it would look like and it seems it'll work out just nicely
http://i.imgur.com/B9C5bTQ.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Out of postbit and postbit_classic (this), postbit_classic is probably my most favourite, even though you get less width for your post
http://i.imgur.com/UZvM8oT.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I thought I'd do something quick and easy.
http://i.imgur.com/c41Hnzu.png
- - - Updated - - -
Another easy template
http://i.imgur.com/k8LLe4f.png
- - - Updated - - -
Starting tomorrow, updates on this project may slow down because another game that I play is getting an update, so I won't be priotising this project for things I want to do!
http://i.imgur.com/U7V1OdK.png
postbit_author/information/statistics got a width reduction and less padding
I've also been working on some more plugins, this is still work in progress, but this is a development, things will change constantly!
PHP Code:
<?php
/**
* MyBB 1.8
*
* Showteam avatar
*
*/// Make sure we can't access this file directly from the browser.
if(!defined('IN_MYBB'))
{
die('This file cannot be accessed directly.');
}$plugins->add_hook('showteam_start', 'showteam_avatar');function showteamavatar_info()
{
/**
* Array of information about the plugin.
* name: The name of the plugin
* description: Description of what the plugin does
* website: The website the plugin is maintained at (Optional)
* author: The name of the author of the plugin
* authorsite: The URL to the website of the author (Optional)
* version: The version number of the plugin
* compatibility: A CSV list of MyBB versions supported. Ex, '121,123', '12*'. Wildcards supported.
* codename: An unique code name to be used by updated from the official MyBB Mods community.
*/
return array(
'name' => 'Show Team Avatar',
'description' => '',
'website' => '',
'author' => 'd',
'authorsite' => '',
'version' => '1.0',
'compatibility' => '18*',
'codename' => 'showteamavatar'
);
}/*
* _activate():
* Called whenever a plugin is activated via the Admin CP. This should essentially make a plugin
* 'visible' by adding templates/template changes, language changes etc.
*/
function showteamavatar_activate()
{
// Include this file because it is where find_replace_templatesets is defined
require_once MYBB_ROOT . '/inc/adminfunctions_templates.php'; // Edit the showteam template and add our variable to below {$bgcolors}
find_replace_templatesets('showteam_usergroup_user', '#'.preg_quote('<tr class="{$bgcolor}">').'#', '<tr class="{$bgcolor}">\n<td>{$showteam_avatar}</td>');
}/*
* _deactivate():
* Called whenever a plugin is deactivated. This should essentially 'hide' the plugin from view
* by removing templates/template changes etc. It should not, however, remove any information
* such as tables, fields etc - that should be handled by an _uninstall routine. When a plugin is
* uninstalled, this routine will also be called before _uninstall() if the plugin is active.
*/
function showteamavatar_deactivate()
{
// Include this file because it is where find_replace_templatesets is defined
require_once MYBB_ROOT.'inc/adminfunctions_templates.php'; // Remove template edits
find_replace_templatesets('showteam_usergroup_user', '#'.preg_quote('<td>{$showteam_avatar}</td>').'#', '');
}/*
* Displays user's avatar
*/
function showteam_avatar()
{
global $templates, $showteam_avatar;
eval("\$showteam_avatar = \"".$templates->get("postbit_avatar")."\";");
}?>
- - - Updated - - -
Here is current CSS I am using (near the end, it's got a little unorganised, but I've been messing around with prexisting tags)
Code:
body {
background-color: #525D63;
text-align: left;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}
body,
h1, h2, h3, h4, h5, h6,
p,
div#status_container ul,
header nav ul,
div#container div#nav ul {
margin: 0;
}
body,
header section h1 a,
header div#status_block p.status_desc a,
header nav ul li a#nav_active,
div#container div#nav ul li a,
.blocker .modal table tbody tr td button {
color: #000;
}
a {
color: #D75C03;
text-decoration: underline;
}
select,
input.textbox,
button,
a.button,
input.checkbox,
textarea {
font-family: inherit;
font-size: inherit;
outline: 0;
}
select,
input.textbox,
button,
a.button,
input.checkbox,
textarea,
div#outer_container,
div#outer_container div#container,
div#status_container ul li div.status_box,
header div#status_block p.status_desc a {
border: 1px solid #000;
}
select,
textarea {
padding: 3px;
}
select,
input.textbox,
input.checkbox,
textarea {
background: #FFF;
}
input.textbox {
padding: 4px;
}
input.error, textarea.error, select.error {
border: 1px solid #A5161A;
color: #A5161A;
}
input.valid, textarea.valid, select.valid {
border: 1px solid #508F54;
}
label.error {
color: #A5161A;
margin: 6px;
padding: 0;
display: block;
}
input.textbox.portal_search {
width: 68%;
}
button,
a.button {
background: #1373A9;
padding: 3px 0 3px 10px;
cursor: pointer;
}
button,
a.button,
button span.arrow,
a.button span.arrow,
div#status_container,
div#status_container ul li a,
header div#status_block p.status_desc a span.arrow,
header nav ul li a,
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
main section#top_story tbody tr td,
.blocker .modal table thead tr td {
color: #FFF;
}
button,
a.button,
label.error,
header div#status_block,
header nav ul li a,
div#container div#nav ul li a,
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
main section#ads thead tr td,
main footer,
.blocker .modal table thead tr td {
font-weight: bold;
}
button,
a.button,
div#status_container ul li a,
header section h1 a,
header div#status_block p.status_desc a,
header nav ul li a,
main section#navigation p a,
main section.table thead tr td a,
main footer section.float_right div p a {
text-decoration: none;
}
input.checkbox,
div#status_container ul li a span#status_icon_1,
div#status_container ul li a span#status_icon_2,
div#status_container ul li a span#status_icon_3,
header nav ul li a span#nav_icon_1,
header nav ul li a span#nav_icon_2,
header nav ul li a span#nav_icon_3,
header nav ul li a span#nav_icon_4,
header nav ul li a span#nav_icon_5,
header nav ul li a span#nav_icon_6,
header nav ul li a span#nav_icon_7 {
vertical-align: middle;
}
div#outer_container {
background-color: #FFF;
width: 1016px;
margin: 0 auto 12px;
padding: 3px;
}
div#outer_container div#container {
background-color: #47839D;
}
.wrapper {
padding: 12px;
}
.wrapper,
header div#status_block,
main section.table tbody tr td div.post,
main footer {
overflow: hidden;
}
.clear,
main footer {
clear: both;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
div#status_container {
background-color: #555;
width: 1022px;
margin: 12px auto 0;
border: solid #000;
border-width: 1px 1px 0;
}
div#status_container,
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
.blocker .modal table thead tr td {
height: 34px;
}
div#status_container ul,
header nav ul,
div#container div#nav ul {
list-style: none;
}
div#status_container ul,
header nav ul,
div#container div#nav ul {
padding: 0;
}
div#status_container ul li {
width: 338px;
height: inherit;
margin-top: 6px;
}
div#status_container ul li,
div#status_container ul li a span#status_icon_1,
div#status_container ul li a span#status_icon_2,
div#status_container ul li a span#status_icon_3,
header div#status_block p.status_desc a,
header nav ul li a span#nav_icon_1,
header nav ul li a span#nav_icon_2,
header nav ul li a span#nav_icon_3,
header nav ul li a span#nav_icon_4,
header nav ul li a span#nav_icon_5,
header nav ul li a span#nav_icon_6,
header nav ul li a span#nav_icon_7,
header nav ul span#nav_right,
main section.table tbody tr td span.forum_status,
main section.table tbody tr td div.subforumicon,
main section.table tbody tr td div.trow_threads_posts,
.blocker:before,
.blocker .modal {
display: inline-block;
}
div#status_container ul li div.status_box {
background-color: #444;
width: 325px;
height: 20px;
line-height: 18px;
margin: 0 auto;
text-align: center;
}
div#status_container ul li a {
background-color: #666;
padding: 4px 10px 12px;
border: solid #000000;
border-width: 1px 1px 0;
}
div#status_container ul li a:focus {
padding: 4px 10px 16px;
}
div#status_container ul li a span#status_icon_1,
div#status_container ul li a span#status_icon_2,
div#status_container ul li a span#status_icon_3 {
background-image: url(images/status_icon.png);
height: 23px;
}
div#status_container ul li a span#status_icon_1 {
background-position: 0;
width: 25px;
}
div#status_container ul li a span#status_icon_2 {
background-position: -25px 0;
width: 27px;
}
div#status_container ul li a span#status_icon_3 {
background-position: -52px 0;
width: 22px;
}
header,
div#container div#nav,
main section#top_story tbody tr td,
.blocker .modal {
position: relative;
}
header section {
background: url(images/header.png) round;
height: 150px;
border-bottom: 1px solid #000;
}
header section,
div#container div#nav ul,
main footer {
width: inherit;
}
header section h1 a {
font-size: 26px;
top: 35px;
left: 40px;
}
header section h1 a,
header p#header_desc,
header section a#header_play,
header nav,
div#container div#nav ul,
main section#top_story tbody tr td div,
.blocker .modal a.close-modal {
position: absolute;
}
header p#header_desc {
top: 65px;
left: 40px;
}
header div#status_block {
background: rgba(242, 242, 242, 0.5);
width: 326px;
max-height: 122px;
margin: 0 auto;
padding: 5px;
border: solid #000;
border-width: 0 1px 1px;
}
header div#status_block h2 {
padding: 5px;
font-size: inherit;
display: block;
}
header div#status_block h2,
main section#top_story,
main section.table,
main section#ads {
background-color: #FFF;
}
header div#status_block p.status_desc {
border-top: 1px dashed black;
margin: 6px 0;
padding: 6px 0;
text-align: right;
}
header div#status_block p.status_desc img#frank {
margin: -26px 10px 0;
}
header div#status_block p.status_desc img#avatar {
margin: -46px 0 0;
}
header div#status_block p.status_desc a {
background-color: #d7d7d7;
margin-bottom: 6px;
padding: 3px 0 3px 10px;
}
header div#status_block p.status_desc a span.arrow,
button span.arrow,
a.button span.arrow {
background-color: #FF8015;
margin-left: 10px;
padding: 3px 6px;
border-left: 1px solid #000;
}
header section a#header_play {
background-image: url(images/header_play.gif);
width: 105px;
height: 106px;
top: 15px;
right: 165px;
}
header nav {
bottom: 4px;
left: 12px;
}
header nav ul {
vertical-align: text-top;
}
header nav ul li {
display: inline;
}
header nav ul li a {
background-color: #D75C03;
margin-right: -4px;
padding: 8px 12px 8px 8px;
display: inline;
text-shadow: 2px 2px 2px #000;
text-transform: uppercase;
border: solid #000;
border-width: 1px 0 0 1px;
}
header nav ul li a#nav_active {
background-color: #FFCE00;
text-shadow: none;
padding: 12px 12px 12px 8px;
border-width: 1px 1px 0;
}
header nav ul li a span#nav_icon_1,
header nav ul li a span#nav_icon_2,
header nav ul li a span#nav_icon_3,
header nav ul li a span#nav_icon_4,
header nav ul li a span#nav_icon_5,
header nav ul li a span#nav_icon_6,
header nav ul li a span#nav_icon_7 {
background-image: url(images/nav_icon.png);
height: 19px;
margin-right: 1px;
}
header nav ul li a span#nav_icon_1 {
background-position: 0;
width: 20px;
}
header nav ul li a span#nav_icon_2 {
background-position: -20px 0;
width: 19px;
}
header nav ul li a span#nav_icon_3 {
background-position: -39px 0;
width: 17px;
}
header nav ul li a span#nav_icon_4 {
background-position: -56px 0;
width: 15px;
}
header nav ul li a span#nav_icon_5 {
background-position: -71px 0;
width: 16px;
}
header nav ul li a span#nav_icon_6 {
background-position: -87px 0;
width: 19px;
}
header nav ul li a span#nav_icon_7 {
background-position: -106px 0;
width: 21px;
}
header nav ul span#nav_right {
background-image: url(images/nav_right.gif);
width: 8px;
height: 29px;
margin-bottom :-10px;
}
div#container div#nav {
width: 1016px;
height: 25px;
}
div#container div#nav ul {
background-color: #FFCE00;
height: inherit;
line-height: 22px;
text-indent: 23px;
left: -2px;
border: solid #000000;
border-width: 0px 1px 1px;
}
div#container div#nav ul li {
color: #930930;
display: inline;
}
main section#navigation p {
color: #9CC;
margin-bottom: 6px;
}
main section#navigation p,
main section#navigation h2,
main section#top_story thead tr td,
main section.table thead tr td,
.blocker .modal table thead tr td {
padding: 0 10px;
}
main section#navigation p a,
main section.table thead tr td a {
color: inherit;
}
main section#navigation h2 {
background-color: #083D55;
line-height: 34px;
text-transform: uppercase;
}
main section#navigation h2,
main section#top_story,
main section.table,
main section#ads {
margin-bottom: 12px;
}
main section#navigation h2,
main section.table thead tr td,
main section#top_story thead tr td,
main footer,
.blocker .modal table thead tr td {
font-size: 11px;
}
main div#main_content {
width: 793px;
}
main section#top_story {
padding: 6px 6px 6px 0;
}
main section#ads {
width: 173px;
margin-left: 12px;
}
main section.table,
main section#ads,
main section#ads thead tr td,
main footer,
.blocker .modal {
padding: 6px;
}
main section.table table,
main section#ads table,
main section#ads tbody tr td img {
width: 100%;
}
main section.table thead::after {
height: 6px;
display: table-row;
content: "";
}
main section#top_story thead tr td {
background-color: #222;
text-transform: uppercase;
border-left:6px solid #FFF;
border-collapse: separate;
}
main section.table thead tr td {
background-color: #D75C03;
}
main section.table thead tr td.brown_alert {
background-color: #8C3C02;
}
main section.table thead tr td.red_alert {
background-color: #A5161A;
}
main section.table thead tr td.green {
background-color: #508F54;
}
main section#ads thead tr td {
background-color: #000;
color: #555;
text-align: center;
}
main section.table thead tr td span {
font-weight: normal;
display: block;
}
main section#top_story tbody tr td {
background-color: #004979;
border-left: 6px solid #FFF;
border-collapse: separate;
}
main section#top_story tbody tr td img {
width: 100%;
}
main section#top_story tbody tr td div {
top: 6px;
right: 10px;
left: 10px;
}
main section.table tbody tr.trow1 {
background-color: #9DD1E7;
}
main section.table tbody tr.trow2 {
background-color: #E6EFEF;
}
main section.table tbody tr.trow_shaded {
background-color: transparent;
}
main section.table tbody tr.trow_deleted,
.post.deleted_post {
background-color: #E8DEFF;
}
main section.table tbody tr.trow_selected,
main section.table tbody tr .trow_selected {
background-color: #FFFBD9;
color: #333;
}
main section.table tbody tr.trow1 a,
main section.table tbody tr.trow2 a,
main section.table tbody tr.post_bit td div.post div.post_author a {
color: #47839D;
}
main section.table tbody tr.trow1 td,
main section.table tbody tr.trow2 td,
main section.table tbody tr.trow_shaded td,
.blocker .modal table tbody tr td {
padding: 6px 10px;
}
main section.table tbody tr.trow_shaded td img {
margin-right: 6px;
}
main section.table tbody tr td span.forum_status {
height: 32px;
width: 32px;
}
main section.table tbody tr td span.forum_on {
background: url(images/forum_on.gif) no-repeat;
}
main section.table tbody tr td span.forum_off {
background: url(images/forum_off.gif) no-repeat;
}
main section.table tbody tr td span.forum_offclose {
background: url(images/forum_offclose.gif) no-repeat;
}
main section.table tbody tr td span.forum_offlink {
background: url(images/forum_offlink.gif) no-repeat;
}
main section.table tbody tr td div.subforumicon {
background: url(images/mini_status_sprite.png) no-repeat 0 0;
height: 10px;
width: 10px;
margin: 0 6px;
}
main section.table tbody tr td div.subforum_minion {
background-position: 0 0;
}
main section.table tbody tr td div.subforum_minioff {
background-position: 0 -10px;
}
main section.table tbody tr td div.subforum_minioffclose {
background-position: 0 -20px;
}
main section.table tbody tr td div.subforum_miniofflink {
background-position: 0 -30px;
}
main section.table tbody tr td div.trow_threads_posts {
margin: 0 3px;
}
main section.table tbody tr td div.trow_threads_posts img {
margin-bottom: 3px;
display: block;
}
main section.table tbody tr td div.editor_control_bar {
background: #fff;
border: 1px solid #ccc;
}
main section.table tbody tr td div.post .editor_control_bar {
background: #f5f5f5;
}
main section.table tbody tr.trow_shaded.post_bit td img {
margin-right: 0;
}
main section.table tbody tr td div.post div.post_author {
background-color: #9DD1E7;
padding: 6px 10px;
overflow: inherit;
}
main section.table tbody tr td div.post.classic div.post_author {
width: 112px;
}
main section.table tbody tr td div.post div.post_author img.buddy_status {
vertical-align: middle;
margin-top: -4px;
margin-left: 3px;
}
main section.table tbody tr td div.post div.post_author div.author_avatar {
background-color: #FFF;
margin-right: 6px;
padding: 6px;
border: 1px solid #47839D;
}
main section.table tbody tr td div.post.classic div.post_author div.author_avatar {
width: 67px;
margin: 0 auto;
float: none;
}
main section.table tbody tr td div.post div.post_author div.author_avatar a div.author_avatar_img {
background-color: #E6EFEF;
padding: 6px;
}
main section.table tbody tr td div.post div.post_author div.author_avatar a div.author_avatar_img div {
background-position: -6px -17px;
}
main section.table tbody tr td div.post div.post_author div.author_information,
main section.table tbody tr td div.post div.post_author div.author_statistics {
padding: 6px 0;
}
main section.table tbody tr td div.post.classic div.post_author div.author_information {
text-align: center;
}
main section.table tbody tr td div.post div.post_author div.author_statistics {
width: 154px;
margin-top: 15px;
}
main section.table tbody tr td div.post.classic div.post_author div.author_statistics {
width: 112px;
border-top: 1px dashed #47839D;
}
main section.table tbody tr td div.post div.signature {
margin-top: 5px;
border-top: 1px dotted #ddd;
padding: 10px 0 4px 0;
}
main section.table tbody tr td div.post.classic div.post_content {
width: 578px;
}
main section.table tbody tr td div.post div.post_head {
background-color: #E6EFEF;
margin-bottom: 12px;
padding: 6px 10px;
}
main section.table tbody tr td div.post div.post_body {
font-size: 11px;
margin-bottom: 12px;
padding: 6px 10px;
}
main section.table tbody tr td div.post div.post_meta {
padding: 0 10px;
}
main section.table tbody tr td div.post div.post_controls {
background-color: #E6EFEF;
padding: 10px;
overflow: inherit;
clear: both;
}
main section.table tbody tr td div.post div.post_controls a.postbit_multiquote_on {
background-color: #116795;
text-decoration: underline;
}
main section.table tbody tr td div.post:not(.deleted_post) .postbit_qrestore,
main section.table tbody tr td div.post:not(.deleted_post) .status_type,
main section.table tbody tr td div.post.deleted_post .postbit_mirage {
display: none;
}
.ignored_post {
border-top: 3px solid #333;
padding: 15px;
}
.ignored_post .show_ignored_post {
margin-top: -15px;
}
.ignored_post .show_ignored_post a.button span {
background-position: 0 -400px;
}
main section.table tbody tr td div.deleted_post_hidden {
border-top: 2px solid #000;
padding: 15px;
}
main section.table tbody tr td div.deleted_post_collapsed {
border-top: 3px solid #000;
padding: 15px;
}
main section.table tbody tr td div.deleted_post_collapsed div.show_deleted_post {
margin-top: -6px;
}
main section.table tbody tr td div.deleted_post_collapsed div.show_deleted_post a.button span {
background-position: 0 -400px;
}
main footer {
background-color: #0A4362;
color: #7295AA;
}
main footer section.float_left {
width: 243px;
height: 74px;
margin-right: 10px;
border-right: 1px dashed #7295AA;
}
main footer section.float_left div {
margin-top: 16px;
margin-left: 65px;
}
main footer section.float_left div h3 {
font-size: 20px;
}
main footer section.float_right {
width: 724px;
height: 74px;
}
main footer section.float_right div {
margin-top: 26px;
}
main footer section.float_right div p a {
color: #47839D;
}
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
When you clicked logged:
http://i.imgur.com/uaN5MPx.png
- - - Updated - - -
Here is another for reporting an individual, if you have the right permissions, etc
http://i.imgur.com/y8OqATJ.png
- - - Updated - - -
I'll probably add a frank picture inside the redirect template, just because
http://i.imgur.com/ioZlTwG.png
- - - Updated - - -
I believe you can change the width of the redirect template inside the admin cp settings
http://i.imgur.com/bglxU7w.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Consider user rounded coners on Pop-ups Alerts
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
m.tiago
Consider user rounded coners on Pop-ups Alerts
You and your rounded corners. When it's released, you can make everything rounded inside global.css; just like this:
http://i.imgur.com/TVK12MT.png
Finished with templates:
* Edit Post
* New Thread
(They both look like the poll/new reply templates)
- - - Updated - - -
I couldn't wait any longer, this is something I've been working on and I'm super excited to showcase it! (m.tiago, yes I am using rounded corners)
http://i.imgur.com/DClpJyb.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Trying something different, here is a GIF on the save state of widgets
http://i.imgur.com/NRjdtLc.gif
To do:
Able to change background
Add/remove widgets
Add own personal comments
Add images/videos
But I may prioritise finishing the theme/template for release, before spending a lot of time working on this!
- - - Updated - - -
Here is a better quality picture for reference
http://i.imgur.com/J1pRYn5.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
When do u expect a finished copy of this to be released?
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Fibfbi
When do u expect a finished copy of this to be released?
I couldn't say when it'll be released; I'm a 1 man team and I just do this project in my spare time
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Sabbo
I couldn't say when it'll be released; I'm a 1 man team and I just do this project in my spare time
Can u post the updated code for this?
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Fibfbi
Can u post the updated code for this?
What code are you referring to, exactly!
I will be releasing 2 themes/templates
Here's a first look at the second theme/template
http://i.imgur.com/HuIseB8.png
I will be using the assets from HoloCMS, as that is the only data I can retrieve for this 2009 layout. I will be recoding most of it in due time to make it relevant with todays standards, etc etc.
Anyway, business as usual and feedback is always welcome
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
So when using the 2nd theme/template you will need to use seperate plugins (each theme/template will have its own plugins, so you must deactivate the plugins for that specific theme, otherwise it'll get messy)
http://i.imgur.com/NTWkGdP.png
I already have the template set up, error checks are working and if you want to change the language for {errorinline}, it'll be inside the language files that can be accessed in adminCP.
To ensure that the user sees this page first and not index.php (index.php will be me.php) I have created a plugin to ensure that, shown below:
PHP Code:
<?phpif(!defined('IN_MYBB'))
{
die('This file cannot be accessed directly.');
}$plugins->add_hook('index_start', 'forcelogin');
$plugins->add_hook('no_permission', 'forcelogin');function forcelogin_info()
{
return array(
'name' => '(holo) Force Login',
'description' => 'Forces the user to login before accessing index.php',
'website' => '',
'author' => '',
'authorsite' => '',
'version' => '1.0',
'compatibility' => '18*',
'codename' => 'forcelogin'
);
}function forcelogin_activate()
{
// Do nothing
}function forcelogin_deactivate()
{
// Do nothing
}function forcelogin()
{
global $mybb;
if($mybb->user['uid'] == 0)
{
header('Location: member.php?action=login');
}
}?>
- - - Updated - - -
Both templates/themes will be using this maintenance page. The plugin makes sure if you have the right permissions, you will not be redirected to this webpage
http://i.imgur.com/XJMiFtV.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
You're just a monster. Well done mate.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Here's a little more information about the maintenance page:
Everyone will still be able to access:
Login/logout pages (incase you have permission to access the website)
Contact us page
Captcha (incase you are a spam bot)
Plugin:
PHP Code:
<?php<?phpif(!defined('IN_MYBB'))
{
die('This file cannot be accessed directly.');
}$plugins->add_hook('global_start', 'maintenance');function maintenance_info()
{
return array(
'name' => '(holo) Force Maintenance',
'description' => 'Forces the user to go on maintenance when board is closed',
'website' => '',
'author' => '',
'authorsite' => '',
'version' => '1.0',
'compatibility' => '18*',
'codename' => 'maintenance'
);
}function maintenance_activate()
{
global $db; $templatearray = array(
'maintenance' => '<html>
<head>
<title>Maintenance</title>
<meta http-equiv="Content-Type" content="text/html; charset="{$charset}" />
<link href="web-gallery/maintenance/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page-container">
<div id="header-container"></div>
<div id="maintenance-container">
<div id="content-container">
<div id="inner-container">
<div id="left_col">
<div class="bubble">
<div class="bubble-body">
<img src="web-gallery/maintenance/alert_triangle.gif" align="left" class="triangle" />
<strong>I think you hit the wrong switch Greggers! {$mybb->settings[\'bbname\']} just vanished!</strong>
<br class="clear" />
</div>
</div>
<div class="bubble-bottom">
<div class="bubble-bottom-body">
<img src="web-gallery/maintenance/bubble_tail_left.gif" />
</div>
</div>
<img src="web-gallery/maintenance/frank_habbo_down.gif" />
</div>
<div id="right_col">
<div class="bubble">
<div class="bubble-body">
{$reason}
<br class="clear" />
</div>
</div>
<div class="bubble-bottom">
<div class="bubble-bottom-body">
<img src="web-gallery/maintenance/bubble_tail_left.gif" />
</div>
</div>
<img src="web-gallery/maintenance/workman_habbo_down.gif" />
</div>
</div>
</div>
</div>
<div id="footer-container"></div>
</div>
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
</body>
</html>'
); foreach($templatearray as $name => $code)
{
$template = array(
'title' => $db->escape_string($name),
'template' => $db->escape_string($code),
'version' => '1',
'sid' => '-2',
'dateline' => TIME_NOW
); $db->insert_query('templates', $template); unset($templates[$name]);
} rebuild_settings();
}function maintenance_deactivate()
{
global $db; $db->delete_query('templates', 'title=\'maintenance\'');
}function maintenance()
{
$current_page = my_strtolower(basename(THIS_SCRIPT)); $closed_bypass = array(
'member.php' => array(
'login',
'do_login',
'logout',
),
'captcha.php',
'contact.php',
); global $mybb, $templates; if($mybb->settings['boardclosed'] == 1 && $mybb->usergroup['canviewboardclosed'] != 1 && !in_array($current_page, $closed_bypass) && (!is_array($closed_bypass[$current_page]) || !in_array($mybb->get_input('action'), $closed_bypass[$current_page])))
{
$reason = $mybb->settings['boardclosed_reason'];
eval("\$page = \"".$templates->get("maintenance")."\";");
output_page($page);
exit;
}
}?>?>
Works with both templates/themes
http://i.imgur.com/kBpNJrQ.png
- - - Updated - - -
I have no words for this template
http://i.imgur.com/zN2HIFU.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Once you look below, your eyes will bleed. I am just showcasing that I have the functionality of the register page, this is work in progress...
http://i.imgur.com/t2RMn5I.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Error checking when submitting the form also works
http://i.imgur.com/62gWwFq.png
- - - Updated - - -
Jquery will do error checking too
http://i.imgur.com/okHo9Ic.png
- - - Updated - - -
Here is the regersitation.js (I formatted it and made some slight changes) Work in progress:
Code:
HabboView.add(function() {
HabboEditor.addCallback("setGender", function(A) {
$("register-gender").value = A
});
HabboEditor.addCallback("setFigure", function(A) {
$("register-figure").value = A
});
HabboEditor.addCallback("setEditorState", function(A) {
$("register-editor-state").value = A
});
window.refreshingAvatars = false;
if ($("register-avatars-refresh")) {
Event.observe($("register-avatars-refresh"), "click", function(A) {
window.refreshingAvatars = true
})
}
if ( !! $("register-birthday")) {
RegistrationForm.createEnterValidBirthdayTooltip();
Event.observe($("register-birthday"), "click", function() {
if (Tips.get("register-birthday")) {
$("register-birthday").removeClassName("error");
Tips.get("register-birthday").hideTip()
}
})
}
if ( !! $("register-name")) {
RegistrationForm.createCheckButtonTooltip();
RegistrationForm.createNameTooltip();
RegistrationForm.previousName = $F("register-name");
Event.observe($("register-name"), "keydown", function(B) {
if (B.keyCode == Event.KEY_TAB || B.keyCode == Event.KEY_RETURN) {
Event.stop(B);
RegistrationForm.Validator._checkName()
} else {
var A = $F("register-name");
if (A != RegistrationForm.previousName) {
RegistrationForm.Validator._resetErrorState($("register-name"));
RegistrationForm.previousName = A;
RegistrationForm.Validator._lastCheckedName = "";
$("registration-overlay").style.display = "block";
RegistrationForm._toggleFormSection("register-section-3", true);
if (RegistrationForm.nameTooltipState != "create") {
RegistrationForm.nameTooltipState = "create";
RegistrationForm.createNameTooltip();
Tips.get($("register-name")).showTip()
}
}
RegistrationForm.Validator._nameCheckNeeded = true
}
});
Event.observe($("register-name-check"), "click", function(A) {
Event.stop(A);
RegistrationForm.Validator._checkName()
});
$("register-name-check-container").show();
Event.observe($("register-name"), "blur", function(A) {
if ($F("register-name") != "" && RegistrationForm.Validator._nameCheckNeeded) {
if (!RegistrationForm.nameSuggestionEnabled) {
Tips.get("register-name-check").showTip()
}
RegistrationForm.Validator._showErrorState($("register-name"))
}
});
Event.observe($("register-name"), "focus", function(A) {
Tips.get("register-name-check").hideTip()
})
}
if ( !! $("register-password")) {
RegistrationForm.createPasswordTooltip();
new Form.Element.Observer($("register-password"), 0.5, RegistrationForm.Validator.checkPasswordValidity);
Event.observe($("register-password"), "keyup", function(C) {
var A = $("register-password");
var B = $F("register-password");
RegistrationForm.Validator._lastCheckedPassword = "";
Tips.get(A).hideTip();
if (B != "" && B.length < 6) {
RegistrationForm.Validator._showErrorState(A, true);
if (RegistrationForm.passwordTooltipState != "tooshort") {
RegistrationForm.passwordTooltipState = "tooshort";
RegistrationForm.createPasswordTooShortTooltip()
}
} else {
if (B == "") {
RegistrationForm.Validator._resetErrorState(A);
RegistrationForm.Validator._resetErrorState($("register-password2"));
$("register-password2").value = "";
if (RegistrationForm.passwordTooltipState != "create") {
RegistrationForm.passwordTooltipState = "create";
RegistrationForm.createPasswordTooltip()
}
}
}
Tips.get(A).showTip()
});
Event.observe($("register-password2"), "focus", function(A) {
if ($F("register-password") == "") {
$("register-password").focus()
}
Tips.get("register-password").showTip()
});
Event.observe($("register-password2"), "blur", function(A) {
Tips.get("register-password").hideTip()
});
Event.observe($("register-password2"), "keyup", function(C) {
var A = $("register-password2");
var B = $F("register-password2");
if (B != "") {
if ($("register-password").hasClassName("error")) {
if (RegistrationForm.passwordTooltipState != "invalid") {
RegistrationForm.passwordTooltipState = "invalid";
RegistrationForm.createPasswordInvalidTooltip()
}
} else {
if (B == $F("register-password")) {
RegistrationForm.Validator._showSuccessState(A);
if (RegistrationForm.passwordTooltipState != "success") {
RegistrationForm.passwordTooltipState = "success";
RegistrationForm.createPasswordSuccessTooltip()
}
} else {
RegistrationForm.Validator._showErrorState(A, true);
if (RegistrationForm.passwordTooltipState != "notsame") {
RegistrationForm.passwordTooltipState = "notsame";
RegistrationForm.createRetypedPasswordNotSameTootip()
}
}
}
} else {
if ($F("register-password") != "") {
RegistrationForm.Validator._resetErrorState(A);
if (RegistrationForm.passwordTooltipState != "retype") {
RegistrationForm.passwordTooltipState = "retype";
RegistrationForm.createRetypePasswordTooltip()
}
}
}
Tips.get("register-password").showTip()
})
}
if ($("register-name-other")) {
RegistrationForm.Validator._waitingForValidName = true;
Event.observe($("register-name"), "focus", function(A) {
$("register-name-other").checked = true
});
$$(".register-name-suggestion").each(function(A) {
Event.observe(A, "change", function(B) {
if (Event.element(B).checked) {
RegistrationForm.Validator._waitingForValidName = false
}
})
})
}
if ( !! $("register-email")) {
RegistrationForm.createEmailToolTip();
new Form.Element.Observer($("register-email"), 0.5, RegistrationForm.Validator.checkEmailValidity);
Event.observe($("register-email"), "keyup", function(C) {
var B = $F("register-email");
var A = $("register-email");
RegistrationForm.Validator._lastCheckedEmail = "";
Tips.get(A).hideTip();
if (B == "") {
RegistrationForm.Validator._resetErrorState(A);
RegistrationForm.Validator._resetErrorState($("register-email2"));
$("register-email2").value = "";
if (RegistrationForm.emailTooltipState != "create") {
RegistrationForm.emailTooltipState = "create";
RegistrationForm.createEmailToolTip()
}
} else {
if (!RegistrationForm.Validator.validateEmail(B)) {
RegistrationForm.Validator._showErrorState(A, true);
if (RegistrationForm.emailTooltipState != "invalid") {
RegistrationForm.emailTooltipState = "invalid";
RegistrationForm.createInvalidEmailTooltip()
}
}
}
Tips.get(A).showTip()
});
Event.observe($("register-email2"), "keyup", function(C) {
var A = $("register-email2");
var B = $F("register-email2");
if (B != "") {
if ($("register-email").hasClassName("error")) {
if (RegistrationForm.emailTooltipState != "invalid") {
RegistrationForm.emailTooltipState = "invalid";
RegistrationForm.createInvalidEmailTooltip()
}
} else {
if (B == $F("register-email")) {
RegistrationForm.Validator._showSuccessState(A);
if (RegistrationForm.emailTooltipState != "success") {
RegistrationForm.emailTooltipState = "success";
RegistrationForm.createEmailSuccessTooltip()
}
} else {
RegistrationForm.Validator._showErrorState(A, true);
if (RegistrationForm.emailTooltipState != "notsame") {
RegistrationForm.emailTooltipState = "notsame";
RegistrationForm.createRetypedEmailNotSameTootip()
}
}
}
} else {
if ($F("register-email") != "") {
RegistrationForm.Validator._resetErrorState(A);
if (RegistrationForm.emailTooltipState != "retype") {
RegistrationForm.emailTooltipState = "retype";
RegistrationForm.createRetypeEmailTooltip()
}
}
}
Tips.get("register-email").showTip()
});
Event.observe($("register-email2"), "focus", function(A) {
if ($F("register-email") == "") {
$("register-email").focus()
}
Tips.get("register-email").showTip()
});
Event.observe($("register-email2"), "blur", function(A) {
Tips.get("register-email").hideTip()
})
}
Event.observe($("registerform"), "submit", RegistrationForm.handleSubmit)
});
RegistrationForm = {
ageLimit: -1,
banHours: -1,
parentEmailAgeLimit: -1,
previousName: null,
passwordTooltipState: null,
emailTooltipState: null,
nameTooltipState: null,
elementFocused: null,
isCaptchaEnabled: false,
personalInfoDisabled: false,
nameSuggestionEnabled: false,
captchaPublicKey: "none",
registrationTipStyle: {
className: "bubbletip left",
title: " ",
hook: {
target: "topRight",
tip: "bottomRight"
},
fixed: true,
startEvent: "focus",
endEvent: "blur"
},
defaultPos: {
offset: {
x: 40,
y: -6
}
},
init: function(A) {
if (A) {
$("registration-overlay").style.display = "block";
RegistrationForm._toggleFormSection("register-section-3", true);
RegistrationForm.personalInfoDisabled = true;
RegistrationForm.createPersonalInfoDisabledTooltip();
if ($("register-name")) {
$("register-name").focus()
}
}
},
handleSubmit: function(A) {
if (!window.refreshingAvatars) {
if (!RegistrationForm.Validator.validate()) {
Event.stop(A);
Element.show("form-validation-error-box")
} else {
if (!RegistrationForm.isRegistrationAllowed()) {
Event.stop(A);
Cookie.set("rb", 1, RegistrationForm.banHours / 24);
RegistrationForm.showAgeLimitMessage()
} else {
if (!RegistrationForm.Validator._parentEmailOk && RegistrationForm.isParentEmailNeeded()) {
Event.stop(A);
RegistrationForm.showParentEmailCaptchaField();
$("register-parentEmail-bubble").focus()
} else {
if (!RegistrationForm.Validator._captchaOk && RegistrationForm.isCaptchaEnabled) {
Event.stop(A);
RegistrationForm.showParentEmailCaptchaField();
if ($("imagestring")) {
$("imagestring").focus()
} else {
if ($("recaptcha_response_field")) {
$("recaptcha_response_field").focus()
}
}
} else {
Event.stopObserving($("registerform"), "submit", RegistrationForm.handleSubmit);
Event.observe($("registerform"), "submit", function(B) {
return false
})
}
}
}
}
}
},
cancel: function(A) {
location.href = habboReqPath + "index.php" + (A || "")
},
isParentEmailNeeded: function() {
if (RegistrationForm.parentEmailAgeLimit > -1 && !! $("register-birthday")) {
var A = RegistrationForm._calculateAge();
if (A != -1) {
return A <= RegistrationForm.parentEmailAgeLimit
}
}
return false
},
showParentEmailCaptchaField: function() {
if (!$("register-parent-email")) {
Element.hide("form-validation-error-box");
var A = "";
if (RegistrationForm.isParentEmailNeeded()) {
A = A.concat(L10N.get("register.message.parent_email_js_form"))
}
if (RegistrationForm.isCaptchaEnabled) {
A = A.concat(L10N.get("register.message.captcha_js_form"))
}
RegistrationForm._showErrorBubble("register-parent-email", A, function() {
RegistrationForm._disableFormFields(true, ["register-button-continue", "register-parentEmail-bubble", "imagestring", "register-permission-bubble", "recaptcha_response_field"]);
if ($("captcha-reload")) {
Event.observe($("captcha-reload"), "click", function(B) {
Event.stop(B);
Utils.reloadCaptcha()
})
} else {
if ($("recaptcha-reload")) {
Event.observe($("recaptcha-reload"), "click", function(B) {
Event.stop(B);
Recaptcha.reload()
});
Utils.showRecaptcha("recaptcha_challenge", RegistrationForm.captchaPublicKey)
}
}
});
if ($("imagestring")) {
Event.observe($("imagestring"), "keyup", RegistrationForm.Validator.checkCapchaValidity)
}
if ($("recaptcha_response_field")) {
Event.observe($("recaptcha_response_field"), "keyup", RegistrationForm.Validator.checkCapchaValidity)
}
if ($("register-parentEmail-bubble")) {
if (Prototype.Browser.IE) {
$("bean_month").setStyle({
visibility: "hidden"
});
$("bean_year").setStyle({
visibility: "hidden"
})
}
Rounder.addCorners($("parentEmail-error-box-container"), 4, 4, "rounded-container");
Event.observe($("register-parentEmail-bubble"), "keypress", function(B) {
if (B.keyCode == Event.KEY_TAB || B.keyCode == Event.KEY_RETURN) {
RegistrationForm.Validator.checkParentEmailValidity()
} else {
RegistrationForm.Validator._lastCheckedParentEmail = "";
RegistrationForm.Validator._parentEmailOk = false;
RegistrationForm.Validator._resetErrorState($("register-parentEmail-bubble"));
$("parentEmail-error-box-content").innerHTML = L10N.get("register.tooltip.enteremail")
}
});
RegistrationForm._track("parentEmail")
}
} else {
if (RegistrationForm.isParentEmailNeeded()) {
RegistrationForm.Validator.checkParentEmailValidity()
}
}
},
showAgeLimitMessage: function() {
RegistrationForm._showErrorBubble("register-ageLimit", L10N.get("register.message.age_limit_ban"), function() {
RegistrationForm._disableFormFields(false, ["register-parentEmail-cancel"])
});
RegistrationForm._track("ageLimit")
},
isRegistrationAllowed: function() {
if (RegistrationForm.ageLimit > -1) {
var A = RegistrationForm._calculateAge();
if (A != -1) {
return A >= RegistrationForm.ageLimit
}
}
return true
},
createNameTooltip: function() {
new Tip("register-name", L10N.get("register.tooltip.name"), Object.extend({
target: $("register-section-2"),
offset: {
x: 155,
y: 3
}
}, RegistrationForm.registrationTipStyle))
},
createPasswordTooltip: function() {
RegistrationForm._createTooltip("register-password", "register.tooltip.password")
},
createRetypePasswordTooltip: function() {
RegistrationForm._createTooltip("register-password", "register.tooltip.retypepassword")
},
createCheckButtonTooltip: function() {
new Tip("register-name-check", L10N.get("register.tooltip.namecheck"), {
className: "bubbletip left",
title: " ",
hook: {
target: "topRight",
tip: "bottomRight"
},
offset: {
x: 130,
y: -3
},
startEvent: "focus",
endEvent: "blur"
})
},
createPersonalInfoDisabledTooltip: function() {
new Tip("registration-overlay", L10N.get("register.tooltip.personalinfo.disabled"), {
className: "bubbletip left",
title: " ",
hook: {
target: "topRight",
tip: "bottomRight"
},
fixed: true,
offset: {
x: 20,
y: 150
}
})
},
createNameSuccessTooltip: function() {
new Tip("register-name", L10N.get("register.tooltip.namechecksuccess"), Object.extend({
offset: {
x: 85,
y: -6
}
}, RegistrationForm.registrationTipStyle))
},
createPasswordSuccessTooltip: function() {
RegistrationForm._createTooltip("register-password", "register.tooltip.passwordsuccess")
},
createPasswordTooShortTooltip: function() {
RegistrationForm._createTooltip("register-password", "register.tooltip.passwordtooshort")
},
createRetypedPasswordNotSameTootip: function() {
RegistrationForm._createTooltip("register-password", "register.tooltip.passwordnotsame")
},
createPasswordInvalidTooltip: function() {
RegistrationForm._createTooltip("register-password", "register.tooltip.invalidpassword")
},
createEmailToolTip: function() {
RegistrationForm._createTooltip("register-email", "register.tooltip.email")
},
createRetypeEmailTooltip: function() {
RegistrationForm._createTooltip("register-email", "register.tooltip.retypeemail")
},
createInvalidEmailTooltip: function() {
RegistrationForm._createTooltip("register-email", "register.tooltip.invalidemail")
},
createEmailSuccessTooltip: function() {
RegistrationForm._createTooltip("register-email", "register.tooltip.emailsuccess")
},
createRetypedEmailNotSameTootip: function() {
RegistrationForm._createTooltip("register-email", "register.tooltip.emailnotsame")
},
createEnterPasswordTooltip: function() {
RegistrationForm._createTooltip("register-password", "register.tooltip.enterpassword")
},
createEnterNameToolTip: function() {
RegistrationForm._createTooltip("register-name", "register.tooltip.entername")
},
createEnterEmailTooltip: function() {
RegistrationForm._createTooltip("register-email", "register.tooltip.enteremail")
},
createEnterBirthdayTooltip: function() {
RegistrationForm._createTooltip("register-birthday", "register.tooltip.enterbirthday")
},
createEnterValidBirthdayTooltip: function() {
RegistrationForm._createTooltip("register-birthday", "register.tooltip.invalidbirthday")
},
_createTooltip: function(B, A) {
new Tip(B, L10N.get(A), Object.extend(RegistrationForm.defaultPos, RegistrationForm.registrationTipStyle))
},
updateNameFromBubble: function(A) {
var B = $("register-name");
B.value = A;
B.removeClassName("error");
B.addClassName("register-ok");
RegistrationForm.Validator._lastCheckedName = A;
RegistrationForm.Validator._nameCheckNeeded = false;
if (RegistrationForm.nameTooltipState != "success") {
RegistrationForm.nameTooltipState = "success";
RegistrationForm.createNameSuccessTooltip();
Tips.get("register-name-check").hideTip()
}
$("registration-overlay").style.display = "none";
RegistrationForm._toggleFormSection("register-section-3", false);
RegistrationForm.personalInfoDisabled = false;
RegistrationForm.nameSuggestionEnabled = false;
$("register-password").focus()
},
_showErrorBubble: function(G, B, E) {
var A = $("register-buttons");
var C = Builder.node("div", {
id: G,
className: "bubbletip"
}, [Builder.node("div", {
className: "title"
}), Builder.node("div", {
id: "error-bubble-content",
className: "content"
})]);
A.appendChild(C);
$("error-bubble-content").innerHTML = B;
Element.hide(C);
if (E) {
E()
}
var F = Element.getDimensions(C);
var D = Element.getDimensions(A);
C.style.left = (D.width - F.width / 2 - 50) + "px";
C.style.top = ($("register-button-continue").offsetTop - F.height - 50) + "px";
Element.show(C)
},
_calculateAge: function() {
var E = $F("bean_year");
var F = $F("bean_month");
var C = $F("bean_day");
if (E && F && C) {
var D = new Date();
var A = new Date();
A.setFullYear(E, F - 1, C);
var B = D.getFullYear() - A.getFullYear();
if ((A.getMonth() > D.getMonth()) || (A.getMonth() == D.getMonth() && A.getDate() > D.getDate())) {
B--
}
if (B >= 0) {
return B
}
}
return -1
},
_disableFormFields: function(D, C) {
var B = $("registerform");
var A = B.getElementsByTagName("*");
$A(A).each(function(F) {
if ((F.tagName.toLowerCase() == "select" || F.tagName.toLowerCase() == "input") && F.type != "hidden" && C.indexOf(F.id) == -1) {
F.disabled = true;
if (D) {
if (F.type != "button" && F.type != "submit") {
var G = F.value;
var E = F.name;
if ((F.type != "radio" && F.type != "checkbox") || (F.type == "radio" && F.checked) || (F.type == "checkbox" && F.checked)) {
B.appendChild(Builder.node("input", {
type: "hidden",
name: E,
value: G
}))
}
F.name = E + "Disabled"
}
}
}
})
},
_toggleFormSection: function(B, A) {
var D = $(B);
var C = D.getElementsByTagName("*");
$A(C).each(function(E) {
if (E.tagName.toLowerCase() == "select" || E.tagName.toLowerCase() == "input") {
E.disabled = A
}
})
},
_track: function(A) {
if (window.pageTracker) {
pageTracker._trackPageview("/register/" + A)
}
}
};
RegistrationForm.Validator = {
_lastCheckedName: null,
_lastCheckedPassword: null,
_lastCheckedEmail: null,
_lastCheckedParentEmail: null,
_lastCheckedCaptcha: null,
_nameCheckNeeded: true,
_captchaOk: false,
_parentEmailOk: false,
validate: function() {
var B = true;
var A = function(C, D) {
if (!D()) {
B = false;
RegistrationForm.Validator._showErrorState($(C), true);
RegistrationForm.elementFocused = C
}
};
RegistrationForm.elementFocused = "";
if (!RegistrationForm.personalInfoDisabled) {
if ( !! $("register-birthday")) {
A("register-birthday", function() {
if (!$F("bean_year") || !$F("bean_month") || !$F("bean_day")) {
return false
} else {
if (new Date().setFullYear($F("bean_year"), $F("bean_month") - 1, $F("bean_day")) > new Date()) {
return false
}
}
return true
})
}
if ( !! $("register-email")) {
A("register-email", function() {
if ($F("register-email") == "") {
RegistrationForm.emailTooltipState = "enter"
}
return RegistrationForm.Validator.validateEmail($F("register-email")) && !$("register-email").hasClassName("error")
});
A("register-email2", function() {
if (!$("register-email").hasClassName("error")) {
if ($F("register-email2") == "") {
RegistrationForm.emailTooltipState = "retype"
} else {
if ($F("register-email") != $F("register-email2")) {
RegistrationForm.emailTooltipState = "notsame";
RegistrationForm.createRetypedEmailNotSameTootip()
}
}
return RegistrationForm.Validator.validateEmail($F("register-email2")) && $F("register-email") == $F("register-email2")
}
return true
})
}
if ( !! $("register-password")) {
A("register-password", function() {
if ($F("register-password") == "") {
RegistrationForm.passwordTooltipState = "enter";
RegistrationForm.createEnterPasswordTooltip()
}
return !!$F("register-password") && !$("register-password").hasClassName("error")
});
A("register-password2", function() {
if (!$("register-password").hasClassName("error")) {
if ($F("register-password2") == "") {
RegistrationForm.passwordTooltipState = "retype";
RegistrationForm.createRetypePasswordTooltip()
} else {
if ($F("register-password") != $F("register-password2")) {
RegistrationForm.emailTooltipState = "notsame";
RegistrationForm.createRetypedPasswordNotSameTootip()
}
}
return !!$F("register-password2") && $F("register-password") == $F("register-password2")
}
return true
})
}
}
if ( !! $("register-name")) {
A("register-name", function() {
if ($F("register-name") == "") {
RegistrationForm.nameTooltipState = "enter";
RegistrationForm.createEnterNameToolTip()
}
return !!$F("register-name") && !$("register-name").hasClassName("error")
})
}
if ($("register-parentEmail")) {
A("parentEmail", function() {
RegistrationForm.Validator.checkParentEmailValidity();
return RegistrationForm.Validator._parentEmailOk
})
}
if ($("recaptcha_response_field")) {
A("recaptcha_response_field", function() {
var C = !! $F("recaptcha_response_field");
if (C) {
RegistrationForm.Validator._captchaOk = true
}
return !!$F("recaptcha_response_field")
})
}
RegistrationForm.Validator._showNonFieldTips();
return B
},
checkNameAvailability: function() {
Tips.get("register-name-check").hideTip();
var A = $F("register-name");
if (A != "" && RegistrationForm.Validator._nameCheckNeeded) {
$("register-name").addClassName("register-loading");
RegistrationForm.Validator._lastCheckedName = A;
new Ajax.Request(habboReqPath + "xmlhttp.php?action=username_availability", {
method: "post",
parameters: {
name: A
},
onComplete: function(C, D) {
$("register-name").removeClassName("register-loading");
if (D.registration_name_in_use || D.registration_name) {
$("register-name").removeClassName("register-ok");
$("register-name").addClassName("error");
var B;
if (D.registration_name_in_use && C.responseText != "") {
B = C.responseText;
RegistrationForm.nameSuggestionEnabled = true
} else {
B = (D.registration_name) ? D.registration_name : D.registration_name_in_use
}
new Tip("register-name", B, {
className: "bubbletip left",
title: " ",
hook: {
target: "topRight",
tip: "bottomRight"
},
offset: {
x: 85,
y: -3
},
fixed: true,
startEvent: "focus",
endEvent: null
});
RegistrationForm.Validator._boundNameClickObserver = RegistrationForm.Validator._nameClickObserver.bindAsEventListener(document);
RegistrationForm.Validator._nameCheckNeeded = true;
Event.observe(document, "click", RegistrationForm.Validator._boundNameClickObserver);
$("register-name").focus();
Tips.get("register-name").showTip()
} else {
RegistrationForm.Validator._showSuccessState($("register-name"));
if (RegistrationForm.nameTooltipState != "success") {
RegistrationForm.nameTooltipState = "success";
RegistrationForm.createNameSuccessTooltip()
}
$("name-error-box").hide();
RegistrationForm.Validator._nameCheckNeeded = false;
Event.stopObserving(document, "click", RegistrationForm.Validator._boundNameClickObserver);
$("registration-overlay").style.display = "none";
RegistrationForm._toggleFormSection("register-section-3", false);
RegistrationForm.personalInfoDisabled = false;
$("register-password").focus()
}
}
})
} else {
if (A == "") {
$("register-name").removeClassName("register-ok")
}
}
},
checkEmailValidity: function() {
var B = $F("register-email");
var A = $("register-email");
if (B != RegistrationForm.Validator._lastCheckedEmail && RegistrationForm.Validator.validateEmail(B)) {
RegistrationForm.Validator._lastCheckedEmail = B;
new Ajax.Request(habboReqPath + "xmlhttp.php?action=email_availability", {
method: "post",
parameters: {
email: B
},
onComplete: function(E, F) {
if (F == "emailOk") {
var D = $F("register-email2");
var C = $("register-email2");
if ( !! D && D == B) {
RegistrationForm.Validator._resetErrorState(C);
RegistrationForm.Validator._showSuccessState(C);
RegistrationForm.emailTooltipState = "success";
RegistrationForm.createEmailSuccessTooltip()
} else {
if ( !! D && D != "") {
RegistrationForm.Validator._showErrorState(C, false);
if (RegistrationForm.emailTooltipState != "notsame") {
RegistrationForm.emailTooltipState = "notsame";
RegistrationForm.createRetypedEmailNotSameTootip()
}
} else {
if (RegistrationForm.emailTooltipState != "retype") {
RegistrationForm.emailTooltipState = "retype";
RegistrationForm.createRetypeEmailTooltip()
}
}
}
A.removeClassName("error");
A.addClassName("register-ok")
} else {
RegistrationForm.Validator._showErrorState(A, false);
if (RegistrationForm.emailTooltipState != "invalid") {
RegistrationForm.emailTooltipState = "invalid";
RegistrationForm.createInvalidEmailTooltip()
}
}
Tips.get(A).showTip()
}
})
}
},
checkCapchaValidity: function(A) {
RegistrationForm.Validator._captchaOk = Event.element(A).value != ""
},
checkPasswordValidity: function() {
var A = $("register-password");
var B = $F("register-password");
if (B && B.length >= 6 && B != RegistrationForm.Validator._lastCheckedPassword) {
RegistrationForm.Validator._lastCheckedPassword = B;
new Ajax.Request(habboReqPath + "xmlhttp.php?action=complex_password", {
method: "post",
parameters: {
password: B
},
onComplete: function(D, F) {
if (F == "charOk") {
var E = $F("register-password2");
var C = $("register-password2");
if ( !! E && E == B) {
RegistrationForm.Validator._resetErrorState(C);
RegistrationForm.Validator._showSuccessState(C);
RegistrationForm.passwordTooltipState = "success";
RegistrationForm.createPasswordSuccessTooltip()
} else {
if ( !! E && E != "") {
RegistrationForm.Validator._showErrorState(C, false);
if (RegistrationForm.passwordTooltipState != "notsame") {
RegistrationForm.passwordTooltipState = "notsame";
RegistrationForm.createRetypedPasswordNotSameTootip()
}
} else {
if (RegistrationForm.passwordTooltipState != "retype") {
RegistrationForm.passwordTooltipState = "retype";
RegistrationForm.createRetypePasswordTooltip()
}
}
}
A.removeClassName("error");
A.addClassName("register-ok")
} else {
RegistrationForm.Validator._showErrorState(A, false);
RegistrationForm.passwordTooltipState = "error";
new Tip("register-password", D.responseText, Object.extend(RegistrationForm.defaultPos, RegistrationForm.registrationTipStyle))
}
Tips.get(A).showTip()
}
})
}
},
_showErrorState: function(B, A) {
B.removeClassName("register-ok");
B.addClassName("error");
if (A && !B.disabled) {
B.focus()
}
},
_showSuccessState: function(A) {
A.removeClassName("error");
A.addClassName("register-ok")
},
_resetErrorState: function(A) {
A.removeClassName("error");
A.removeClassName("register-ok")
},
validateEmail: function(A) {
return !!A && A.search(/[^@]+@[^@]+/i) != -1
},
_nameClickObserver: function(B) {
var A = Event.element(B);
if (A.className == "namelist-link") {
Event.stop(B);
RegistrationForm.updateNameFromBubble(A.name)
} else {
if (A.id != "register-name") {
Tips.get($("register-name")).hideTip()
}
}
},
_checkName: function() {
var A = $F("register-name");
if (A != "" && A != RegistrationForm.Validator._lastCheckedName) {
RegistrationForm.Validator._resetErrorState($("register-name"));
RegistrationForm.Validator.checkNameAvailability()
} else {
$("register-name").focus()
}
},
_showNonFieldTips: function() {
if (RegistrationForm.elementFocused == "register-birthday") {
Tips.get("register-birthday").showTip()
}
}
};
var HabboEditor = function() {
var D = true;
var A = null;
var B = null;
var C = [];
return {
addCallback: function(E, F) {
if (!C[E]) {
C[E] = []
}
C[E].push(F)
},
setGenderAndFigure: function(F, E) {
this.setGender(F);
this.setFigure(E)
},
setFigure: function(E) {
A = E;
if (C.setFigure) {
C.setFigure.each(function(F) {
F(E)
})
}
},
setGender: function(E) {
B = E;
if (C.setGender) {
C.setGender.each(function(F) {
F(E)
})
}
},
setAllowedToProceed: function(E) {
D = E;
if (C.setAllowedToProceed) {
C.setAllowedToProceed.each(function(F) {
F(E)
})
}
},
isAllowedToProceed: function() {
return D
},
showHabboClubNotice: function() {
if (C.showHabboClubNotice) {
C.showHabboClubNotice.each(function(E) {
E()
})
}
},
hideHabboClubNotice: function() {
if (C.hideHabboClubNotice) {
C.hideHabboClubNotice.each(function(E) {
E()
})
}
},
showOldFigureNotice: function() {
if (C.showOldFigureNotice) {
C.showOldFigureNotice.each(function(E) {
E()
})
}
},
hideOldFigureNotice: function() {
if (C.hideOldFigureNotice) {
C.hideOldFigureNotice.each(function(E) {
E()
})
}
},
setEditorState: function(E) {
if (C.setEditorState) {
C.setEditorState.each(function(F) {
F(E)
})
}
}
}
}();
- - - Updated - - -
Here is some code when registeration.js requests information
PHP Code:
if($mybb->input['action'] == "username_availability")
{
require_once MYBB_ROOT."inc/functions_user.php";
$username = $mybb->get_input('name'); // Fix bad characters
$username = trim_blank_chrs($username);
$username = str_replace(array(unichr(160), unichr(173), unichr(0xCA), dec_to_utf8(8238), dec_to_utf8(8237), dec_to_utf8(8203)), array(" ", "-", "", "", "", ""), $username); // Remove multiple spaces from the username
$username = preg_replace("#\s{2,}#", " ", $username); header("Content-type: application/json; charset={$charset}"); if(empty($username))
{
header('X-JSON: {"registration_name": "'.$lang->banned_characters_username.'"}');
exit;
} // Check if the username belongs to the list of banned usernames.
$banned_username = is_banned_username($username, true);
if($banned_username)
{
header('X-JSON: {"registration_name": "'.$lang->banned_username.'"}');
exit;
} // Check for certain characters in username (<, >, &, and slashes)
if(strpos($username, "<") !== false || strpos($username, ">") !== false || strpos($username, "&") !== false || my_strpos($username, "\\") !== false || strpos($username, ";") !== false || strpos($username, ",") !== false || !validate_utf8_string($username, false, false))
{
header('X-JSON: {"registration_name": "'.$lang->banned_characters_username.'"}');
exit;
} // Check if the username is actually already in use
$user = get_user_by_username($username); $plugins->run_hooks("xmlhttp_username_availability"); if($user['uid'])
{
$lang->username_taken = $lang->sprintf($lang->username_taken, htmlspecialchars_uni($username));
header('X-JSON: {"registration_name": "'.$lang->username_taken.'"}');
exit;
}
else
{
//$lang->username_available = $lang->sprintf($lang->username_available, htmlspecialchars_uni($username));
header('X-JSON: {}');
exit;
}
}
- - - Updated - - -
Here is the template for member_register
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->registration}</title>
<meta http-equiv="content-type" content="text/html; charset={$charset}" />
<script type="text/javascript">
var andSoItBegins = (new Date()).getTime();
</script>
<script src="{$theme['imgdir']}/static/js/visual.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/domready.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/libs.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/common.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/libs2.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/style.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/buttons.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/boxes.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/tooltips.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/process.css" type="text/css" />
<script type="text/javascript">
document.habboLoggedIn = false;
var habboName = null;
var habboReqPath = "";
var habboStaticFilePath = "{$theme['imgdir']}/";
var habboImagerUrl = "{$theme['imgdir']}/habbo-imaging/";
var habboPartner = "";
window.name = "habboMain";
</script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/registration.css" type="text/css">
<script src="{$theme['imgdir']}/static/js/registration.js" type="text/javascript"></script>
<script type="text/javascript">
L10N.put('register.tooltip.name', 'Your name can contain lowercase and uppercase letters, numbers and the characters -=?!@:.');
L10N.put('register.tooltip.password', 'Your password must have at least 6 characters and it must contain both letters and numbers.');
L10N.put('register.error.password_required', 'Please enter a password');
L10N.put('register.error.password_too_short', 'Your password should be at least six characters long');
L10N.put('register.error.retyped_password_required', 'Please re-enter your password');
L10N.put('register.error.retyped_password_notsame', 'Your passwords do not match, please try again');
L10N.put('register.error.retyped_email_required', 'Please type your email again');
L10N.put('register.error.retyped_email_notsame', 'Emails don\'t match');
L10N.put('register.tooltip.namecheck', 'Click here to check your name is free.');
L10N.put('register.tooltip.retypepassword', 'Please re-enter your password.');
L10N.put('register.tooltip.personalinfo.disabled', 'Please choose your name first.');
L10N.put('register.tooltip.namechecksuccess', 'Congratulations! The name is available.');
L10N.put('register.tooltip.passwordsuccess', 'Your password is now secure.');
L10N.put('register.tooltip.passwordtooshort', 'The password you have chosen is too short.');
L10N.put('register.tooltip.passwordnotsame', 'Password not the same, please re-type it.');
L10N.put('register.tooltip.invalidpassword', 'The password you have chosen is invalid, please choose a new password.');
L10N.put('register.tooltip.email', 'Please enter your email address. You need to activate your account using this address so please use your real address.');
L10N.put('register.tooltip.retypeemail', 'Please re-enter your email address.');
L10N.put('register.tooltip.invalidemail', 'Please enter a valid email address.');
L10N.put('register.tooltip.emailsuccess', 'You have provided a valid email address, thanks!');
L10N.put('register.tooltip.emailnotsame', 'Your retyped email doesn\'t match.');
L10N.put('register.tooltip.enterpassword', 'Please enter a password.');
L10N.put('register.tooltip.entername', 'Please enter a name for your name.');
L10N.put('register.tooltip.enteremail', 'Please enter your email address.');
L10N.put('register.tooltip.enterbirthday', 'Please give your date of birth - you need this later to get password reminders etc.');
L10N.put('register.tooltip.acceptterms', 'Please accept the Terms and Conditions');
L10N.put('register.tooltip.invalidbirthday', 'Please supply a valid birthdate');
L10N.put('register.tooltip.emailandparentemailsame','You parent\'s email and your email cannot be the same, please provide a different one.');
L10N.put('register.tooltip.entercaptcha','Enter the code.');
L10N.put('register.tooltip.captchavalid','Invalid code.');
L10N.put('register.tooltip.captchainvalid','Invalid code, please try again.');
L10N.put('register.error.parent_permission','You need to tell your parents about this service');
{$regimage}
L10N.put('register.message.age_limit_ban', '<div><p>Sorry but you cannot register, because you are too young. If you entered an incorrect date of birth by accident please try again in a few hours.</p><p style="text-align:right"><input type="button" class="submit" id="register-parentEmail-cancel" value="Cancel" onclick="RegistrationForm.cancel(\'?ageLimit=true\')" /></p></div>');
RegistrationForm.ageLimit = -1;
RegistrationForm.banHours = 24;
HabboView.add(function() {
Rounder.addCorners($('register-avatar-editor-title'), 4, 4, 'rounded-container');
RegistrationForm.init('The code that you filled in isn\'t right, please try again.');
});
HabboView.add(function() {
var swfobj = new SWFObject("{$theme['imgdir']}/flash/HabboRegistration.swf", "habboreg", "435", "400", "8");
swfobj.addParam("base", "{$theme['imgdir']}/flash/");
swfobj.addParam("wmode", "opaque");
swfobj.addParam("AllowScriptAccess", "always");
swfobj.addVariable("figuredata_url", "{$theme['imgdir']}/xml/figuredata.xml");
swfobj.addVariable("draworder_url", "{$theme['imgdir']}/xml/draworder.xml");
swfobj.addVariable("localization_url", "{$theme['imgdir']}/xml/figure_editor.xml");
swfobj.addVariable("habbos_url", "{$theme['imgdir']}/xml/promo_habbos.php");
swfobj.addVariable("figure", "");
swfobj.addVariable("gender", "");
swfobj.write("register-avatar-editor");
});
</script>
<meta name="description" content="{$mybb->settings['bbname']} is a virtual world where you can meet and make friends." />
<meta name="keywords" content="{$mybb->settings['bbname']}, virtual world, play games, enter competitions, make friends" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/ie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/ie6.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/pngfix.js" type="text/javascript"></script>
<script type="text/javascript">
try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
</script>
<style type="text/css">
body { behavior: url({$theme['imgdir']}/csshover.htc); }
</style>
<![endif]-->
<meta name="build" content="headerinclude" />
</head>
<body id="register" class="process-template secure-page">
<div id="overlay"></div>
<div id="container">
<div class="cbb process-template-box clearfix">
<div id="content">
<div id="header" class="clearfix">
<h1><a href="{$mybb->settings['bburl']}/index.php"></a></h1>
<ul class="stats">
<li class="stats-online">
<span class="stats-fig">{$count}</span> Users online now!
</li>
<li class="stats-visited">{$lang->welcome_current_time}</li>
</ul>
</div>
<div id="process-content">
<div id="column1" class="column">
<div class="habblet-container ">
<form action="{$mybb->settings['bburl']}/member.php" method="post" id="registerform" autocomplete="off">
<input type="hidden" name="regcheck1" value="" />
<input type="hidden" name="regcheck2" value="true" />
<input type="hidden" name="avatar" id="register-figure" value="" />
<input type="hidden" name="gender" id="register-gender" value="" />
<input type="hidden" name="editor" id="register-editor-state" value="" />
<input type="hidden" name="regtime" value="{$time}" />
<input type="hidden" name="step" value="registration" />
<input type="hidden" name="action" value="do_register" />
<div id="register-column-left">
{$regerrors}
<div id="register-section-2">
<div class="rounded rounded-blue">
<h2 class="heading"><span class="numbering white">1.</span>CHOOSE YOUR NAME</h2>
<fieldset id="register-fieldset-name">
<div class="register-label white">{$mybb->settings['bbname']} name</div>
<input type="text" name="username" id="register-name" class="register-text" value="{$username}" size="25" />
<span id="register-name-check-container" style="display:none">
<a class="new-button search-icon" href="#" id="register-name-check"><b><span></span></b><i></i></a>
</span>
</fieldset>
<div id="name-error-box"></div>
</div>
</div>
<div id="register-section-3">
<div id="registration-overlay"></div>
<div class="cbb clearfix gray">
<h2 class="title heading"><span class="numbering white">2.</span>Your Details</h2>
<div class="box-content">
{$passboxes}
<fieldset>
<div class="register-label">
<label>I was born on:</label>
</div>
<div id="register-birthday">
<select name="bday1" id="bean_day" class="dateselector">
<option value=""> </option>
{$bdaysel}
</select>
<select name="bday2" id="bean_month" class="dateselector">
<option value=""> </option>
<option value="1" {$bdaymonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$bdaymonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$bdaymonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$bdaymonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$bdaymonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$bdaymonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$bdaymonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$bdaymonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$bdaymonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$bdaymonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$bdaymonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$bdaymonthsel['12']}>{$lang->month_12}</option>
</select>
<input type="text" size="4" maxlength="4" name="bday3" value="{$birthday_year}" id="bean_year" class="dateselector" />
<div>{$lang->hide_dob}</div>
</div>
</fieldset>
<fieldset>
<div class="register-label">
<label for="register-email">And my email address is:</label>
</div>
<div class="register-label">
<input type="text" name="email" id="register-email" class="register-text" value="{$email}" size="25" maxlength="48" />
</div>
<div class="register-label">
<label for="register-email2">Retype your email address</label>
</div>
<div class="register-label">
<input type="text" name="email2" id="register-email2" class="register-text" value="{$email2}" size="25" maxlength="48" />
</div>
</fieldset>
{$hiddencaptcha}
{$requiredfields}
{$customfields}
{$questionbox}
</div>
</div>
<div id="form-validation-error-box" style="display:none">
<div class="register-error">
<div class="rounded rounded-red">Sorry, registration failed. Please check the information you gave in the red boxes.</div>
</div>
</div>
</div>
</div>
<div id="register-column-right">
<div id="register-avatar-editor-title">
<h2 class="heading"><span class="numbering white">3.</span>{$lang->account_prefs}</h2>
</div>
<div id="register-avatar-editor"><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="{$theme['imgdir']}/get_flash_player.png" alt="Get Adobe Flash player" title="Get Adobe Flash player" /></a></div>
<div id="register-buttons">
<input type="submit" name="regsubmit" value="Continue" class="continue" id="register-button-continue" />
<a href="{$mybb->settings['bburl']}index.php?registerCancel=true" class="cancel">Exit registration</a>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
if(!$(document.body).hasClassName('process-template')) {
Rounder.init();
}
</script>
<!--[if lt IE 7]>
<script type="text/javascript">
Pngfix.doPngImageFix();
</script>
<![endif]-->
{$validator_javascript}
{$footer}
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
</body>
</html>
- - - Updated - - -
I just made some minor changes to member_login, member_lostpw and member_register_agreement
- - - Updated - - -
There is still stuff to be done to member_register, but I want to catch up to the other 2006 theme, so I can start prioritising on both
- - - Updated - - -
Apparently this is the redirect template, personally I'm not a big fan with what Habbo did
http://i.imgur.com/7836cU5.png
- - - Updated - - -
Here is something more presentable, I wasn't happy with the redirect page that Habbo had, I think everyone will appreciate this too
http://i.imgur.com/ZrnUgPs.png
- - - Updated - - -
Adding the final touches
http://i.imgur.com/PsgUF8L.png
- - - Updated - - -
Redirect template
Code:
<html>
<head>
<title>{$title}</title>
<meta http-equiv="content-type" content="text/html; charset={$charset}" />
<meta http-equiv="refresh" content="2;URL={$url}" />
<script type="text/javascript">
var andSoItBegins = (new Date()).getTime();
</script>
<script src="{$theme['imgdir']}/static/js/visual.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/libs.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/common.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/fullcontent.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/libs2.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/style.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/buttons.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/boxes.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/tooltips.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/process.css" type="text/css" />
<style type="text/css">
body.process-template #process-content {
margin-top: 0;
padding-top: 1em;
}
div.box-content img {
margin-right: 1em;
}
</style>
<script type="text/javascript">
document.habboLoggedIn = false;
var habboName = null;
var habboReqPath = "";
var habboStaticFilePath = "{$theme['imgdir']}/";
var habboImagerUrl = "{$theme['imgdir']}/habbo-imaging/";
var habboPartner = "";
window.name = "habboMain";
</script>
<meta name="description" content="{$mybb->settings['bbname']} is a virtual world where you can meet and make friends." />
<meta name="keywords" content="{$mybb->settings['bbname']}, virtual world, play games, enter competitions, make friends" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/ie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/ie6.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/pngfix.js" type="text/javascript"></script>
<script type="text/javascript">
try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
</script>
<style type="text/css">
body { behavior: url({$theme['imgdir']}/csshover.htc); }
</style>
<![endif]-->
<meta name="build" content="headerinclude" />
</head>
<body id="landing" class="process-template">
<div id="overlay"></div>
<div id="container">
<div class="cbb process-template-box clearfix">
<div id="content">
<div id="process-content">
<div id="terms" class="box-content">
<div><strong>{$title}</strong></div>
<br />
<div>
<img src="{$theme['imgdir']}/images/frank/redirect.png" align="right" />
<p>{$message}</p>
<p><a href="{$url}">{$lang->click_no_wait}</a></p>
</div>
</div>
<!--[if lt IE 7]>
<script type="text/javascript">
Pngfix.doPngImageFix();
</script>
<![endif]-->
</div>
</div>
</div>
</div>
<script type="text/javascript">
HabboView.run();
</script>
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
</body>
</html>
- - - Updated - - -
Now I'll be working on the {$header} templates and {$index} templates to get "me.php" working, this may take some time.
I would also like to make a plugin for MYBB, so when the user has registered, they'll be redirected to misc.php?action=welcome (misc_welcome template) "welcome.php"
- - - Updated - - -
Modified {$headerinclude}, {$index} and {$header}, plenty of things that must be changed, but it's looking promising
http://i.imgur.com/UDRbuu3.png
- - - Updated - - -
Index template (Work in progress)
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/welcome.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/personal.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/group.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/group.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/rooms.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/rooms.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/moredata.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/habboclub.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/minimail.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/control.textarea.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/minimail.js" type="text/javascript"></script>
</head>
<body id="home">
{$header}
{$footer}
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
</body>
</html>
- - - Updated - - -
So I had to figure out what pieces of information goes in which template and here's the result:
Index (template; is basically me.php)
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/welcome.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/personal.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/group.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/group.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/rooms.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/rooms.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/moredata.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/habboclub.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/minimail.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/control.textarea.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/minimail.js" type="text/javascript"></script>
</head>
<body id="home">
{$header}
<div id="content-container">
<div id="navi2-container" class="pngbg">
<div id="navi2" class="pngbg clearfix">
<ul>
<li class="selected">Homepage</li>
<li class="">My Page</li>
<li class="">Account Settings</li>
<li class="last"><a href="{$mybb->settings['bburl']}/club.php">{$mybb->settings['bbname']} Club</a></li>
</ul>
</div>
</div>
</div>
{$footer}
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
</body>
</html>
Header (template; {$welcomeblock} will change the template whether you're a guest or a member)
Code:
<div id="overlay"></div>
<div id="header-container">
<div id="header" class="clearfix">
<h1><a href="{$mybb->settings['bburl']}/index.php"></a></h1>
{$welcomeblock}
<div id="habbos-online">
<div class="rounded"><span>1 Userss online now</span></div>
</div>
</div>
</div>
- - - Updated - - -
Here is the picture for template header_welcomeblock_guest
http://i.imgur.com/W0GRv1n.png
- - - Updated - - -
header_welcomeblock_guest template
Code:
<div id="subnavi">
<div id="subnavi-user">
<div class="clearfix"> </div>
<p><a href="client.php" id="enter-hotel-open-medium-link" target="client" onclick="openOrFocusHabbo(this); return false;">Enter {$mybb->settings['bbname']}</a></p>
</div>
<div id="subnavi-login">
<form action="index.php?anonymousLogin" method="post" id="login-form">
<input type="hidden" name="page" value="<?php echo $pageid; ?>" />
<ul>
<li>
<label for="login-username" class="login-text"><b>Username</b></label>
<input tabindex="1" type="text" class="login-field" name="username" id="login-username" />
<a href="#" id="login-submit-new-button" class="new-button" style="float: left; display:none"><b>Sign in</b><i></i></a>
<input type="submit" id="login-submit-button" value="Sign in" class="submit" />
</li>
<li>
<label for="login-password" class="login-text"><b>Password</b></label>
<input tabindex="2" type="password" class="login-field" name="password" id="login-password" />
<input tabindex="3" type="checkbox" name="_login_remember_me" value="true" id="login-remember-me" />
<label for="login-remember-me" class="left">Remember me</label>
</li>
</ul>
</form>
<div id="subnavi-login-help" class="clearfix">
<ul>
<li class="register"><a href="forgot.php" id="forgot-password"><span>I forgot my password/username</span></a></li>
<li><a href="register.php"><span>Register for free</span></a></li>
</ul>
</div>
<div id="remember-me-notification" class="bottom-bubble" style="display:none;">
<div class="bottom-bubble-t">
<div></div>
</div>
<div class="bottom-bubble-c">
By selecting 'remember me' you will stay signed in on this computer until you click 'Sign Out'. If this is a public computer please do not use this feature.
</div>
<div class="bottom-bubble-b">
<div></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
LoginFormUI.init();
RememberMeUI.init('right');
</script>
<ul id="navi">
<li id="tab-register-now"><a href="register.php" target="_self">Register now!</a><span></span></li>
</ul>
- - - Updated - - -
Inside *code* */code* tags, ragezone seems to have a jquery problem of sorts because it's adding its own *script**/script* lol
- - - Updated - - -
Reference code:
Code:
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
- - - Updated - - -
Login/guest/member functionality
http://i.imgur.com/yq7gwLu.gif
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Another plugin
http://i.imgur.com/EPXerpW.png
Index template
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/welcome.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/personal.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/group.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/group.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/rooms.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/rooms.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/moredata.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/habboclub.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/minimail.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/control.textarea.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/minimail.js" type="text/javascript"></script>
</head>
{$header}
<div id="content-container">
<div id="navi2-container" class="pngbg">
<div id="navi2" class="pngbg clearfix">
<ul>
<li class="selected">Homepage</li>
<li class="">My Page</li>
<li class="">Account Settings</li>
<li class="last">{$mybb->settings['bbname']} Club</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="content">
<div id="column1" class="column">
{$personalinfo}
</div>
{$footer}
</body>
</html>
- - - Updated - - -
Features:
* name, user title, board open/close, club offer, birthday, alerts, last visit
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
The revision of holocms that I've been using didn't have this feature, so I spent some time trying to get it to work, seems pretty trivial, but I wanted to showcase it, regardless lol
http://i.imgur.com/QC82rit.gif
Code:
var NewsPromo = function() {
var b = [];
var c = 0;
var e = false;
var a = false;
var d = function(f) {
if (!e && !a) {
a = true;
Effect.Fade(b[c], {
duration: 0.8,
from: 1,
to: 0
});
c = c + f;
if (c == b.length) {
c = 0
}
if (c == -1) {
c = b.length - 1
}
Effect.Appear(b[c], {
duration: 0.8,
from: 0,
to: 1,
afterFinish: function() {
a = false
}
});
if ($("topstories-nav")) {
$("topstories-nav").down("span").update(c + 1)
}
}
};
return {
init: function() {
b = $$("#topstories .topstory");
if (b.length < 2) {
return
}
Event.observe("topstories", "mouseover", function(g) {
e = true;
$$("#topstories-nav").each(Element.show)
});
Event.observe("topstories", "mouseout", function(g) {
e = false;
$$("#topstories-nav").each(Element.hide)
});
if ($("topstories-nav")) {
Event.observe($("topstories-nav").down("a.next"), "click", function(g) {
Event.stop(g);
e = false;
d(1);
e = true
});
Event.observe($("topstories-nav").down("a.prev"), "click", function(g) {
Event.stop(g);
e = false;
d(-1);
e = true
})
}
var f = 10000;
setInterval(function() {
d(1)
}, f)
}
}
}();
- - - Updated - - -
Another revision to redirect template
http://i.imgur.com/J7YeHdR.png
- - - Updated - - -
Online count now works properly, I had to create a plugin for it!
PHP Code:
<?phpif(!defined('IN_MYBB'))
{
die('This file cannot be accessed directly.');
}$plugins->add_hook('global_start', 'onlinecount');function onlinecount_info()
{
return array(
'name' => '(holo) Force Online Count',
'description' => 'Displays the amount of people who are currently online',
'website' => '',
'author' => '',
'authorsite' => '',
'version' => '1.0',
'compatibility' => '18*',
'codename' => 'onlinecount'
);
}function onlinecount_activate()
{
global $db; $templatearray = array(
'onlinecount' => '<span class="stats-fig">{$onlinecount}</span> Users online now'
); foreach($templatearray as $name => $code)
{
$template = array(
'title' => $db->escape_string($name),
'template' => $db->escape_string($code),
'version' => '1',
'sid' => '-2',
'dateline' => TIME_NOW
); $db->insert_query('templates', $template); unset($templates[$name]);
} rebuild_settings();
}function onlinecount_deactivate()
{
global $db; $db->delete_query('templates', 'title=\'onlinecount\'');
}function onlinecount()
{
global $db, $templates, $onlinecount;
$onlinecount = time() - 15*60;
$query = $db->simple_select("users", "lastactive", "lastactive > '$onlinecount'", array("limit" => 1));
if($db->num_rows($query) > 0)
{
$onlinecount = $db->num_rows($query);
}
else
{
$onlinecount = '0';
}
$onlinecount = eval($templates->render('onlinecount'));
}?>
- - - Updated - - -
I really do like the look of this maintenance template for the 2006 (7) theme, so I may implement this aswell, give the user the option to choose between this and the 2009 template inside admin cp.
http://i.imgur.com/2hLqhkY.png
- - - Updated - - -
Made a few tweaks to the design and I just need to implement individual backgrounds
http://i.imgur.com/rMFnsYv.gif
- - - Updated - - -
Since I tweaked the design, top_story images had to be altered, so I made a bunch for different occasions (if you want more, add them yourselves)
http://i.imgur.com/Bp1PuTG.png
- - - Updated - - -
I wanted to keep the same image/text as Holocms, so here's its tribute (plus this is when there are not posts made)
http://i.imgur.com/wXuyJ70.png
- - - Updated - - -
News articles have their own images, I'll come back to this once I'm on post templates
http://i.imgur.com/pvKZcIA.gif
- - - Updated - - -
Here is index_latestnews template:
Code:
<div class="habblet-container news-promo">
<div class="cbb clearfix notitle">
<div id="newspromo">
<div id="topstories">
{$topstories}
{$count}
</div>
</div>
<script type="text/javascript">
document.observe('dom:loaded', function() {
NewsPromo.init();
});
</script>
</div>
</div>
- - - Updated - - -
This is what Index template looks like now
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/personal.css" type="text/css" />
<script src="{$theme['imgdir']}/static/js/habboclub.js" type="text/javascript"></script>
</head>
{$header}
<div id="content-container">
<div id="navi2-container" class="pngbg">
<div id="navi2" class="pngbg clearfix">
<ul>
<li class="selected">Homepage</li>
<li class="">My Page</li>
<li class="">Account Settings</li>
<li class="last">{$mybb->settings['bbname']} Club</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="content">
<div id="column1" class="column">
{$personalinfo}
</div>
<div id="column2" class="column">
{$latestnews}
</div>
{$footer}
<script type="text/javascript">
this.blankwin = function(){
var dlists = new Array();
dlists[0] = 'forum.ragezone.com';
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
var dbopcount = 0;
if (href.indexOf("http://")!=-1)
{
for (jdi = 0; jdi <= dlists.length; jdi++)
{
if (href.indexOf(dlists[jdi]) == -1)
{
//alert("NO MATCH " + dlists[jdi] + " " + href);
dbopcount = dbopcount; //Do nothing
}
else
{
//alert("match " + dlists[jdi] + " " + href);
dbopcount++;
}
}
if (dbopcount > 0)
return true; //If this link URL was an internal URL
else //there were no matches to any internal domain, so leave it external
return false;
}
else
{
return false;
}
//return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? false : true;
};
this.set = function(obj){
obj.target = "_self";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>
</body>
</html>
- - - Updated - - -
Current list of active plugins, yey!
http://i.imgur.com/bZet64H.png
- - - Updated - - -
Minor tweak to latest news plugin, now you can deactive the plugin without losing any of the data inside your database. If you want to remove the data entirely, you would uninstall
http://i.imgur.com/0HLeqny.png
- - - Updated - - -
Here is index in all it's glory, I want to add 1 more thing before I priortise on something else
http://i.imgur.com/AijaDnn.png
- - - Updated - - -
http://i.imgur.com/f03NNMz.gif
- - - Updated - - -
Referral system fully functional!
http://i.imgur.com/gnppBrk.gif
- - - Updated - - -
All this functionality for the 2009 theme is making me wary of the 2006 theme, there aren't that many things going on in the 2006 theme :'(
- - - Updated - - -
This is just a reminder for myself:
* Referral input for register (add to member_register template)
* Recode jqeury for security question so it fits inline with the other input fields (it's functional, but I'm not happy)
* Recode captcha so it fits inline with the other input fields (it's functional, but I'm not happy)
* Language files need sorting out (tempted to scrap this altogether)
* Double check everything that I've done so far to make sure everything is working correctly
* Global templates need to be added to {$index}
* Quickmenu needs sorting out (buddy list, my groups and my rooms (May have to hold off since I don't have the emulator database))
* Pick out an emulator and start making it compatible with MYBB
* Check xml templates, make sure I haven't broke anything
I think that's it, I may edit this post if I remember something
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Worst idea ever, I spent so long on this :@
http://i.imgur.com/rxKTxM4.gif
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Most horrible code i've read in a while. Even Marcos' code is a step up from this. Please do PHP the right way.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Hoshiko
Most horrible code i've read in a while. Even Marcos' code is a step up from this. Please do
PHP the right way.
That's fine, I'm just following MyBB's documentation; which can be found here: https://docs.mybb.com/1.8/development/plugins/basics/
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Sabbo
Yeah, don't bother. Use different forum software which has actual competent developers behind it.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Hoshiko
Yeah, don't bother. Use different forum software which has actual competent developers behind it.
That's too bad, I think they're doing a great job with MyBB
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Hey bro, as always, love this so much and all the updates.:thumbup:
Is the code u are writing secure? or are u just messing around and not thinking about securing every line?
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Fibfbi
Hey bro, as always, love this so much and all the updates.:thumbup:
Is the code u are writing secure? or are u just messing around and not thinking about securing every line?
Yes all security is handled by MyBB, so I/we don't have to worry about it. As long as you don't edit the core files for MyBB you will be safe!
-
This took some time to get right, it's very cool though! The forum ID 2 will act as news articles, so anything outside of forum ID 2 will act as a normal thread/post on the forums. You will need to make sure that inside your forum permissions that only admins will be able to post in this forum otherwise you'll be having news articles showing up from users
http://i.imgur.com/KU60G7l.gif
- - - Updated - - -
Here is showthread_shownews template
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body id="news">
{$header}
<div id="content-container">
<div id="navi2-container" class="pngbg">
<div id="navi2" class="pngbg clearfix">
<ul>
<li class="selected last">Recent News</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="content">
<div id="column1" class="column">
<div class="habblet-container">
<div class="cbb clearfix default">
<h2 class="title">Recent News</h2>
<div id="article-archive">
{$latestnews}
</div>
</div>
</div>
<script type="text/javascript">
if(!$(document.body).hasClassName('process-template')) {
Rounder.init();
}
</script>
</div>
<div id="column2" class="column">
<div class="habblet-container">
<div class="cbb clearfix notitle">
<div id="article-wrapper">
{$shownews}
</div>
</div>
</div>
<script type="text/javascript">
if(!$(document.body).hasClassName('process-template')) {
Rounder.init();
}
</script>
</div>
{$footer}
</body>
</html>
- - - Updated - - -
This is what it looks like if you're not logged in
http://i.imgur.com/gMaHpoo.gif
- - - Updated - - -
There is a setting in MyBB to stop guests from accessing web pages, in case that's something you want to do!
- - - Updated - - -
Totally forgot to declare $footer inside showthread_shownews, fixed now though!
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Do you think you will do homes, groups, badgeshop, botshop, referral system, etc?
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Fibfbi
Do you think you will do homes, groups, badgeshop, botshop, referral system, etc?
Yes I plan on doing homes, groups and as for the referral system, it already works; I just need to add it into member_register.
Badge shop and bot shop; maybe they'll be future plugins?
MyBB already has it implemented :D
http://i.imgur.com/ptDVjgl.png
- - - Updated - - -
I said I would do it in an earlier post and here we are!
http://i.imgur.com/Cnjv6ur.gif
- - - Updated - - -
I'll probably make a couple of changes to the 2006 maintenance layout, it's not quite authentic
- - - Updated - - -
While under maintenance, users can still login, however if they don't have the correct permissions, they'll be sent back to the maintenance page. They can also use the contact form for any queries.
http://i.imgur.com/fEQ8JRg.png
http://i.imgur.com/zsnAZZW.png
- - - Updated - - -
I also changed the language in the backend, so it fits in
http://i.imgur.com/4d3zPik.png
- - - Updated - - -
Fixed a minor problem with latest news articles on index.php; they weren't displaying in the correct order on inital start up
- - - Updated - - -
Force Maintenance plugin no longer has a need to use a template, as the user has a choice which layout they want to use!
- - - Updated - - -
Fixed footer links
- - - Updated - - -
I'm not even going to align it properly.
The thought of using this template again will give me nightmares; I did it for lost password, but not again! I need inspiration at this point to make this mess something beautiful :'( (There is just too much white)
http://i.imgur.com/bcsjm7X.png
- - - Updated - - -
It's just so bad, even the captcha which is pretty ugly to look at, makes it a little better. :grr:
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Looks so cool. :D Well done.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Advertisements are a go!
Note: It won't display on login page, register, lost password and submitted forms for all listed
http://i.imgur.com/oWjJGsc.gif
- - - Updated - - -
Just noticed that the community tab ain't highlighted on showthread, it is now fixed!
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I have groups and homes for holocms 100% working if u want, but im sure theres plenty of releases on rz of that for holo/haddo... lmk
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Fibfbi
I have groups and homes for holocms 100% working if u want, but im sure theres plenty of releases on rz of that for holo/haddo... lmk
If I need anything, I'll be sure to ask you first!
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I think homes/groups always worked on Holo without any problems, except it had exploits in it if I'm not mistaken.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
As I said I would, referrals have been added to member_register
http://i.imgur.com/3OVUpGn.gif
- - - Updated - - -
When I was updating the registration.css I accidently deleted code below; so there's that
Code:
#registerform input.register-ok {
background: #FFF url(../images/registration/ok_icon.gif) no-repeat 99% 50%;
}
- - - Updated - - -
I don't think I'll need to make anymore changed to member_register, I still need to clean up registeration.js though
- - - Updated - - -
Compressed registration.js and resolved 100+ validation errors
Code:
HabboView.add(function(){HabboEditor.addCallback("setGender",function(e){$("register-gender").value=e}),HabboEditor.addCallback("setFigure",function(e){$("register-figure").value=e}),HabboEditor.addCallback("setEditorState",function(e){$("register-editor-state").value=e}),window.refreshingAvatars=!1,$("register-avatars-refresh")&&Event.observe($("register-avatars-refresh"),"click",function(e){window.refreshingAvatars=!0}),$("register-birthday")&&(RegistrationForm.createEnterValidBirthdayTooltip(),Event.observe($("register-birthday"),"click",function(){Tips.get("register-birthday")&&($("register-birthday").removeClassName("error"),Tips.get("register-birthday").hideTip())})),$("register-name")&&(RegistrationForm.createCheckButtonTooltip(),RegistrationForm.createNameTooltip(),RegistrationForm.previousName=$F("register-name"),Event.observe($("register-name"),"keydown",function(e){if(e.keyCode==Event.KEY_TAB||e.keyCode==Event.KEY_RETURN)Event.stop(e),RegistrationForm.Validator._checkName();else{var t=$F("register-name");t!=RegistrationForm.previousName&&(RegistrationForm.Validator._resetErrorState($("register-name")),RegistrationForm.previousName=t,RegistrationForm.Validator._lastCheckedName="",$("registration-overlay").style.display="block",RegistrationForm._toggleFormSection("register-section-3",!0),"create"!=RegistrationForm.nameTooltipState&&(RegistrationForm.nameTooltipState="create",RegistrationForm.createNameTooltip(),Tips.get($("register-name")).showTip())),RegistrationForm.Validator._nameCheckNeeded=!0}}),Event.observe($("register-name-check"),"click",function(e){Event.stop(e),RegistrationForm.Validator._checkName()}),$("register-name-check-container").show(),Event.observe($("register-name"),"blur",function(e){""!==$F("register-name")&&RegistrationForm.Validator._nameCheckNeeded&&(RegistrationForm.nameSuggestionEnabled||Tips.get("register-name-check").showTip(),RegistrationForm.Validator._showErrorState($("register-name")))}),Event.observe($("register-name"),"focus",function(e){Tips.get("register-name-check").hideTip()})),$("register-password")&&(RegistrationForm.createPasswordTooltip(),new Form.Element.Observer($("register-password"),.5,RegistrationForm.Validator.checkPasswordValidity),Event.observe($("register-password"),"keyup",function(e){var t=$("register-password"),r=$F("register-password");RegistrationForm.Validator._lastCheckedPassword="",Tips.get(t).hideTip(),""!==r&&r.length<6?(RegistrationForm.Validator._showErrorState(t,!0),"tooshort"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="tooshort",RegistrationForm.createPasswordTooShortTooltip())):""===r&&(RegistrationForm.Validator._resetErrorState(t),RegistrationForm.Validator._resetErrorState($("register-password2")),$("register-password2").value="","create"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="create",RegistrationForm.createPasswordTooltip())),Tips.get(t).showTip()}),Event.observe($("register-password2"),"focus",function(e){""===$F("register-password")&&$("register-password").focus(),Tips.get("register-password").showTip()}),Event.observe($("register-password2"),"blur",function(e){Tips.get("register-password").hideTip()}),Event.observe($("register-password2"),"keyup",function(e){var t=$("register-password2"),r=$F("register-password2");""!==r?$("register-password").hasClassName("error")?"invalid"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="invalid",RegistrationForm.createPasswordInvalidTooltip()):r==$F("register-password")?(RegistrationForm.Validator._showSuccessState(t),"success"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="success",RegistrationForm.createPasswordSuccessTooltip())):(RegistrationForm.Validator._showErrorState(t,!0),"notsame"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="notsame",RegistrationForm.createRetypedPasswordNotSameTootip())):""!==$F("register-password")&&(RegistrationForm.Validator._resetErrorState(t),"retype"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="retype",RegistrationForm.createRetypePasswordTooltip())),Tips.get("register-password").showTip()})),$("register-email")&&(RegistrationForm.createEmailToolTip(),new Form.Element.Observer($("register-email"),.5,RegistrationForm.Validator.checkEmailValidity),Event.observe($("register-email"),"keyup",function(e){var t=$F("register-email"),r=$("register-email");RegistrationForm.Validator._lastCheckedEmail="",Tips.get(r).hideTip(),""===t?(RegistrationForm.Validator._resetErrorState(r),RegistrationForm.Validator._resetErrorState($("register-email2")),$("register-email2").value="","create"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="create",RegistrationForm.createEmailToolTip())):RegistrationForm.Validator.validateEmail(t)||(RegistrationForm.Validator._showErrorState(r,!0),"invalid"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="invalid",RegistrationForm.createInvalidEmailTooltip())),Tips.get(r).showTip()}),Event.observe($("register-email2"),"keyup",function(e){var t=$("register-email2"),r=$F("register-email2");""!==r?$("register-email").hasClassName("error")?"invalid"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="invalid",RegistrationForm.createInvalidEmailTooltip()):r==$F("register-email")?(RegistrationForm.Validator._showSuccessState(t),"success"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="success",RegistrationForm.createEmailSuccessTooltip())):(RegistrationForm.Validator._showErrorState(t,!0),"notsame"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="notsame",RegistrationForm.createRetypedEmailNotSameTootip())):""!==$F("register-email")&&(RegistrationForm.Validator._resetErrorState(t),"retype"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="retype",RegistrationForm.createRetypeEmailTooltip())),Tips.get("register-email").showTip()}),Event.observe($("register-email2"),"focus",function(e){""===$F("register-email")&&$("register-email").focus(),Tips.get("register-email").showTip()}),Event.observe($("register-email2"),"blur",function(e){Tips.get("register-email").hideTip()})),Event.observe($("registerform"),"submit",RegistrationForm.handleSubmit)}),RegistrationForm={ageLimit:-1,banHours:-1,parentEmailAgeLimit:-1,previousName:null,passwordTooltipState:null,emailTooltipState:null,nameTooltipState:null,elementFocused:null,isCaptchaEnabled:!1,personalInfoDisabled:!1,nameSuggestionEnabled:!1,captchaPublicKey:"none",registrationTipStyle:{className:"bubbletip left",title:" ",hook:{target:"topRight",tip:"bottomRight"},fixed:!0,startEvent:"focus",endEvent:"blur"},defaultPos:{offset:{x:40,y:-6}},init:function(e){e&&($("registration-overlay").style.display="block",RegistrationForm._toggleFormSection("register-section-3",!0),RegistrationForm.personalInfoDisabled=!0,RegistrationForm.createPersonalInfoDisabledTooltip(),$("register-name")&&$("register-name").focus())},handleSubmit:function(e){window.refreshingAvatars||(RegistrationForm.Validator.validate()?RegistrationForm.isRegistrationAllowed()?!RegistrationForm.Validator._parentEmailOk&&RegistrationForm.isParentEmailNeeded()?(Event.stop(e),RegistrationForm.showParentEmailCaptchaField(),$("register-parentEmail-bubble").focus()):!RegistrationForm.Validator._captchaOk&&RegistrationForm.isCaptchaEnabled?(Event.stop(e),RegistrationForm.showParentEmailCaptchaField(),$("imagestring")?$("imagestring").focus():$("recaptcha_response_field")&&$("recaptcha_response_field").focus()):(Event.stopObserving($("registerform"),"submit",RegistrationForm.handleSubmit),Event.observe($("registerform"),"submit",function(e){return!1})):(Event.stop(e),Cookie.set("rb",1,RegistrationForm.banHours/24),RegistrationForm.showAgeLimitMessage()):(Event.stop(e),Element.show("form-validation-error-box")))},cancel:function(e){location.href=habboReqPath+"index.php"+(e||"")},isParentEmailNeeded:function(){if(-1<RegistrationForm.parentEmailAgeLimit&&$("register-birthday")){var e=RegistrationForm._calculateAge();if(-1!=e)return e<=RegistrationForm.parentEmailAgeLimit}return!1},showParentEmailCaptchaField:function(){if($("register-parent-email"))RegistrationForm.isParentEmailNeeded()&&RegistrationForm.Validator.checkParentEmailValidity();else{Element.hide("form-validation-error-box");var e="";RegistrationForm.isParentEmailNeeded()&&(e=e.concat(L10N.get("register.message.parent_email_js_form"))),RegistrationForm.isCaptchaEnabled&&(e=e.concat(L10N.get("register.message.captcha_js_form"))),RegistrationForm._showErrorBubble("register-parent-email",e,function(){RegistrationForm._disableFormFields(!0,["register-button-continue","register-parentEmail-bubble","imagestring","register-permission-bubble","recaptcha_response_field"]),$("captcha-reload")?Event.observe($("captcha-reload"),"click",function(e){Event.stop(e),Utils.reloadCaptcha()}):$("recaptcha-reload")&&(Event.observe($("recaptcha-reload"),"click",function(e){Event.stop(e),Recaptcha.reload()}),Utils.showRecaptcha("recaptcha_challenge",RegistrationForm.captchaPublicKey))}),$("imagestring")&&Event.observe($("imagestring"),"keyup",RegistrationForm.Validator.checkCapchaValidity),$("recaptcha_response_field")&&Event.observe($("recaptcha_response_field"),"keyup",RegistrationForm.Validator.checkCapchaValidity),$("register-parentEmail-bubble")&&(Prototype.Browser.IE&&($("bean_month").setStyle({visibility:"hidden"}),$("bean_year").setStyle({visibility:"hidden"})),Rounder.addCorners($("parentEmail-error-box-container"),4,4,"rounded-container"),Event.observe($("register-parentEmail-bubble"),"keypress",function(e){e.keyCode==Event.KEY_TAB||e.keyCode==Event.KEY_RETURN?RegistrationForm.Validator.checkParentEmailValidity():(RegistrationForm.Validator._lastCheckedParentEmail="",RegistrationForm.Validator._parentEmailOk=!1,RegistrationForm.Validator._resetErrorState($("register-parentEmail-bubble")),$("parentEmail-error-box-content").innerHTML=L10N.get("register.tooltip.enteremail"))}),RegistrationForm._track("parentEmail"))}},showAgeLimitMessage:function(){RegistrationForm._showErrorBubble("register-ageLimit",L10N.get("register.message.age_limit_ban"),function(){RegistrationForm._disableFormFields(!1,["register-parentEmail-cancel"])}),RegistrationForm._track("ageLimit")},isRegistrationAllowed:function(){if(-1<RegistrationForm.ageLimit){var e=RegistrationForm._calculateAge();if(-1!=e)return e>=RegistrationForm.ageLimit}return!0},createNameTooltip:function(){new Tip("register-name",L10N.get("register.tooltip.name"),Object.extend({target:$("register-section-2"),offset:{x:155,y:3}},RegistrationForm.registrationTipStyle))},createPasswordTooltip:function(){RegistrationForm._createTooltip("register-password","register.tooltip.password")},createRetypePasswordTooltip:function(){RegistrationForm._createTooltip("register-password","register.tooltip.retypepassword")},createCheckButtonTooltip:function(){new Tip("register-name-check",L10N.get("register.tooltip.namecheck"),{className:"bubbletip left",title:" ",hook:{target:"topRight",tip:"bottomRight"},offset:{x:130,y:-3},startEvent:"focus",endEvent:"blur"})},createPersonalInfoDisabledTooltip:function(){new Tip("registration-overlay",L10N.get("register.tooltip.personalinfo.disabled"),{className:"bubbletip left",title:" ",hook:{target:"topRight",tip:"bottomRight"},fixed:!0,offset:{x:20,y:150}})},createNameSuccessTooltip:function(){new Tip("register-name",L10N.get("register.tooltip.namechecksuccess"),Object.extend({offset:{x:85,y:-6}},RegistrationForm.registrationTipStyle))},createPasswordSuccessTooltip:function(){RegistrationForm._createTooltip("register-password","register.tooltip.passwordsuccess")},createPasswordTooShortTooltip:function(){RegistrationForm._createTooltip("register-password","register.tooltip.passwordtooshort")},createRetypedPasswordNotSameTootip:function(){RegistrationForm._createTooltip("register-password","register.tooltip.passwordnotsame")},createPasswordInvalidTooltip:function(){RegistrationForm._createTooltip("register-password","register.tooltip.invalidpassword")},createEmailToolTip:function(){RegistrationForm._createTooltip("register-email","register.tooltip.email")},createRetypeEmailTooltip:function(){RegistrationForm._createTooltip("register-email","register.tooltip.retypeemail")},createInvalidEmailTooltip:function(){RegistrationForm._createTooltip("register-email","register.tooltip.invalidemail")},createEmailSuccessTooltip:function(){RegistrationForm._createTooltip("register-email","register.tooltip.emailsuccess")},createRetypedEmailNotSameTootip:function(){RegistrationForm._createTooltip("register-email","register.tooltip.emailnotsame")},createEnterPasswordTooltip:function(){RegistrationForm._createTooltip("register-password","register.tooltip.enterpassword")},createEnterNameToolTip:function(){RegistrationForm._createTooltip("register-name","register.tooltip.entername")},createEnterEmailTooltip:function(){RegistrationForm._createTooltip("register-email","register.tooltip.enteremail")},createEnterBirthdayTooltip:function(){RegistrationForm._createTooltip("register-birthday","register.tooltip.enterbirthday")},createEnterValidBirthdayTooltip:function(){RegistrationForm._createTooltip("register-birthday","register.tooltip.invalidbirthday")},_createTooltip:function(e,t){new Tip(e,L10N.get(t),Object.extend(RegistrationForm.defaultPos,RegistrationForm.registrationTipStyle))},updateNameFromBubble:function(e){var t=$("register-name");t.value=e,t.removeClassName("error"),t.addClassName("register-ok"),RegistrationForm.Validator._lastCheckedName=e,RegistrationForm.Validator._nameCheckNeeded=!1,"success"!=RegistrationForm.nameTooltipState&&(RegistrationForm.nameTooltipState="success",RegistrationForm.createNameSuccessTooltip(),Tips.get("register-name-check").hideTip()),$("registration-overlay").style.display="none",RegistrationForm._toggleFormSection("register-section-3",!1),RegistrationForm.personalInfoDisabled=!1,RegistrationForm.nameSuggestionEnabled=!1,$("register-password").focus()},_showErrorBubble:function(e,t,r){var i=$("register-buttons"),o=Builder.node("div",{id:e,className:"bubbletip"},[Builder.node("div",{className:"title"}),Builder.node("div",{id:"error-bubble-content",className:"content"})]);i.appendChild(o),$("error-bubble-content").innerHTML=t,Element.hide(o),r&&r();var a=Element.getDimensions(o),s=Element.getDimensions(i);o.style.left=s.width-a.width/2-50+"px",o.style.top=$("register-button-continue").offsetTop-a.height-50+"px",Element.show(o)},_calculateAge:function(){var e=$F("bean_year"),t=$F("bean_month"),r=$F("bean_day");if(e&&t&&r){var i=new Date,o=new Date;o.setFullYear(e,t-1,r);var a=i.getFullYear()-o.getFullYear();if((o.getMonth()>i.getMonth()||o.getMonth()==i.getMonth()&&o.getDate()>i.getDate())&&a--,0<=a)return a}return-1},_disableFormFields:function(i,o){var a=$("registerform"),e=a.getElementsByTagName("*");$A(e).each(function(e){if(("select"==e.tagName.toLowerCase()||"input"==e.tagName.toLowerCase())&&"hidden"!=e.type&&-1==o.indexOf(e.id)&&(e.disabled=!0,i&&"button"!=e.type&&"submit"!=e.type)){var t=e.value,r=e.name;("radio"!=e.type&&"checkbox"!=e.type||"radio"==e.type&&e.checked||"checkbox"==e.type&&e.checked)&&a.appendChild(Builder.node("input",{type:"hidden",name:r,value:t})),e.name=r+"Disabled"}})},_toggleFormSection:function(e,t){var r=$(e).getElementsByTagName("*");$A(r).each(function(e){"select"!=e.tagName.toLowerCase()&&"input"!=e.tagName.toLowerCase()||(e.disabled=t)})},_track:function(e){window.pageTracker&&pageTracker._trackPageview("/register/"+e)}},RegistrationForm.Validator={_lastCheckedName:null,_lastCheckedPassword:null,_lastCheckedEmail:null,_lastCheckedParentEmail:null,_lastCheckedCaptcha:null,_nameCheckNeeded:!0,_captchaOk:!1,_parentEmailOk:!1,validate:function(){var r=!0,e=function(e,t){t()||(r=!1,RegistrationForm.Validator._showErrorState($(e),!0),RegistrationForm.elementFocused=e)};return RegistrationForm.elementFocused="",RegistrationForm.personalInfoDisabled||($("register-birthday")&&e("register-birthday",function(){return!!($F("bean_year")&&$F("bean_month")&&$F("bean_day"))&&!((new Date).setFullYear($F("bean_year"),$F("bean_month")-1,$F("bean_day"))>new Date)}),$("register-email")&&(e("register-email",function(){return""===$F("register-email")&&(RegistrationForm.emailTooltipState="enter"),RegistrationForm.Validator.validateEmail($F("register-email"))&&!$("register-email").hasClassName("error")}),e("register-email2",function(){return!!$("register-email").hasClassName("error")||(""===$F("register-email2")?RegistrationForm.emailTooltipState="retype":$F("register-email")!=$F("register-email2")&&(RegistrationForm.emailTooltipState="notsame",RegistrationForm.createRetypedEmailNotSameTootip()),RegistrationForm.Validator.validateEmail($F("register-email2"))&&$F("register-email")==$F("register-email2"))})),$("register-password")&&(e("register-password",function(){return""===$F("register-password")&&(RegistrationForm.passwordTooltipState="enter",RegistrationForm.createEnterPasswordTooltip()),!!$F("register-password")&&!$("register-password").hasClassName("error")}),e("register-password2",function(){return!!$("register-password").hasClassName("error")||(""===$F("register-password2")?(RegistrationForm.passwordTooltipState="retype",RegistrationForm.createRetypePasswordTooltip()):$F("register-password")!=$F("register-password2")&&(RegistrationForm.emailTooltipState="notsame",RegistrationForm.createRetypedPasswordNotSameTootip()),!!$F("register-password2")&&$F("register-password")==$F("register-password2"))}))),$("register-name")&&e("register-name",function(){return""===$F("register-name")&&(RegistrationForm.nameTooltipState="enter",RegistrationForm.createEnterNameToolTip()),!!$F("register-name")&&!$("register-name").hasClassName("error")}),$("register-parentEmail")&&e("parentEmail",function(){return RegistrationForm.Validator.checkParentEmailValidity(),RegistrationForm.Validator._parentEmailOk}),$("recaptcha_response_field")&&e("recaptcha_response_field",function(){return!!$F("recaptcha_response_field")&&(RegistrationForm.Validator._captchaOk=!0),!!$F("recaptcha_response_field")}),RegistrationForm.Validator._showNonFieldTips(),r},checkNameAvailability:function(){Tips.get("register-name-check").hideTip();var e=$F("register-name");""!==e&&RegistrationForm.Validator._nameCheckNeeded?($("register-name").addClassName("register-loading"),RegistrationForm.Validator._lastCheckedName=e,new Ajax.Request(habboReqPath+"xmlhttp.php?action=username_availability",{method:"post",parameters:{name:e},onComplete:function(e,t){var r;($("register-name").removeClassName("register-loading"),t.registration_name_in_use||t.registration_name)?($("register-name").removeClassName("register-ok"),$("register-name").addClassName("error"),t.registration_name_in_use&&""!==e.responseText?(r=e.responseText,RegistrationForm.nameSuggestionEnabled=!0):r=t.registration_name?t.registration_name:t.registration_name_in_use,new Tip("register-name",r,{className:"bubbletip left",title:" ",hook:{target:"topRight",tip:"bottomRight"},offset:{x:85,y:-3},fixed:!0,startEvent:"focus",endEvent:null}),RegistrationForm.Validator._boundNameClickObserver=RegistrationForm.Validator._nameClickObserver.bindAsEventListener(document),RegistrationForm.Validator._nameCheckNeeded=!0,Event.observe(document,"click",RegistrationForm.Validator._boundNameClickObserver),$("register-name").focus(),Tips.get("register-name").showTip()):(RegistrationForm.Validator._showSuccessState($("register-name")),"success"!=RegistrationForm.nameTooltipState&&(RegistrationForm.nameTooltipState="success",RegistrationForm.createNameSuccessTooltip()),$("name-error-box").hide(),RegistrationForm.Validator._nameCheckNeeded=!1,Event.stopObserving(document,"click",RegistrationForm.Validator._boundNameClickObserver),$("registration-overlay").style.display="none",RegistrationForm._toggleFormSection("register-section-3",!1),RegistrationForm.personalInfoDisabled=!1,$("register-password").focus())}})):""===e&&$("register-name").removeClassName("register-ok")},checkEmailValidity:function(){var o=$F("register-email"),a=$("register-email");o!=RegistrationForm.Validator._lastCheckedEmail&&RegistrationForm.Validator.validateEmail(o)&&(RegistrationForm.Validator._lastCheckedEmail=o,new Ajax.Request(habboReqPath+"xmlhttp.php?action=email_availability",{method:"post",parameters:{email:o},onComplete:function(e,t){if("emailOk"==t){var r=$F("register-email2"),i=$("register-email2");r&&r==o?(RegistrationForm.Validator._resetErrorState(i),RegistrationForm.Validator._showSuccessState(i),RegistrationForm.emailTooltipState="success",RegistrationForm.createEmailSuccessTooltip()):r&&""!==r?(RegistrationForm.Validator._showErrorState(i,!1),"notsame"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="notsame",RegistrationForm.createRetypedEmailNotSameTootip())):"retype"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="retype",RegistrationForm.createRetypeEmailTooltip()),a.removeClassName("error"),a.addClassName("register-ok")}else RegistrationForm.Validator._showErrorState(a,!1),"invalid"!=RegistrationForm.emailTooltipState&&(RegistrationForm.emailTooltipState="invalid",RegistrationForm.createInvalidEmailTooltip());Tips.get(a).showTip()}}))},checkCapchaValidity:function(e){RegistrationForm.Validator._captchaOk=""!==Event.element(e).value},checkPasswordValidity:function(){var o=$("register-password"),a=$F("register-password");a&&6<=a.length&&a!=RegistrationForm.Validator._lastCheckedPassword&&(RegistrationForm.Validator._lastCheckedPassword=a,new Ajax.Request(habboReqPath+"xmlhttp.php?action=complex_password",{method:"post",parameters:{password:a},onComplete:function(e,t){if("charOk"==t){var r=$F("register-password2"),i=$("register-password2");r&&r==a?(RegistrationForm.Validator._resetErrorState(i),RegistrationForm.Validator._showSuccessState(i),RegistrationForm.passwordTooltipState="success",RegistrationForm.createPasswordSuccessTooltip()):r&&""!==r?(RegistrationForm.Validator._showErrorState(i,!1),"notsame"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="notsame",RegistrationForm.createRetypedPasswordNotSameTootip())):"retype"!=RegistrationForm.passwordTooltipState&&(RegistrationForm.passwordTooltipState="retype",RegistrationForm.createRetypePasswordTooltip()),o.removeClassName("error"),o.addClassName("register-ok")}else RegistrationForm.Validator._showErrorState(o,!1),RegistrationForm.passwordTooltipState="error",new Tip("register-password",e.responseText,Object.extend(RegistrationForm.defaultPos,RegistrationForm.registrationTipStyle));Tips.get(o).showTip()}}))},_showErrorState:function(e,t){e.removeClassName("register-ok"),e.addClassName("error"),t&&!e.disabled&&e.focus()},_showSuccessState:function(e){e.removeClassName("error"),e.addClassName("register-ok")},_resetErrorState:function(e){e.removeClassName("error"),e.removeClassName("register-ok")},validateEmail:function(e){return!!e&&-1!=e.search(/[^@]+@[^@]+/i)},_nameClickObserver:function(e){var t=Event.element(e);"namelist-link"==t.className?(Event.stop(e),RegistrationForm.updateNameFromBubble(t.name)):"register-name"!=t.id&&Tips.get($("register-name")).hideTip()},_checkName:function(){var e=$F("register-name");""!==e&&e!=RegistrationForm.Validator._lastCheckedName?(RegistrationForm.Validator._resetErrorState($("register-name")),RegistrationForm.Validator.checkNameAvailability()):$("register-name").focus()},_showNonFieldTips:function(){"register-birthday"==RegistrationForm.elementFocused&&Tips.get("register-birthday").showTip()}};var HabboEditor=function(){var e=!0,r=[];return{addCallback:function(e,t){r[e]||(r[e]=[]),r[e].push(t)},setGenderAndFigure:function(e,t){this.setGender(e),this.setFigure(t)},setFigure:function(t){t,r.setFigure&&r.setFigure.each(function(e){e(t)})},setGender:function(t){t,r.setGender&&r.setGender.each(function(e){e(t)})},setAllowedToProceed:function(t){e=t,r.setAllowedToProceed&&r.setAllowedToProceed.each(function(e){e(t)})},isAllowedToProceed:function(){return e},showHabboClubNotice:function(){r.showHabboClubNotice&&r.showHabboClubNotice.each(function(e){e()})},hideHabboClubNotice:function(){r.hideHabboClubNotice&&r.hideHabboClubNotice.each(function(e){e()})},showOldFigureNotice:function(){r.showOldFigureNotice&&r.showOldFigureNotice.each(function(e){e()})},hideOldFigureNotice:function(){r.hideOldFigureNotice&&r.hideOldFigureNotice.each(function(e){e()})},setEditorState:function(t){r.setEditorState&&r.setEditorState.each(function(e){e(t)})}}}();
- - - Updated - - -
Language files will be on my todo list, I'll just attach them onto existing plugins and go from there
- - - Updated - - -
This is the best you're going to get it, unless you make a plugin (like I did on my first attempt), but then you'll be wasting code since you'll have to rewrite everything in the plugin to get the same results but maybe with your avatar. Honestly, it's not that bad, it serves its purpose and offers functionality
http://i.imgur.com/4R1SM2M.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Super easy to implement! I just need to add a couple of queries to update some fields and add some stickers into the database for the store/inventory to work
http://i.imgur.com/TatMYn3.gif
Will probably spend some time deleting the trash and keeping the good one's
http://i.imgur.com/5adLBME.png
Here is the new table that will be added when you activate/install the member profile plugin (if you uninstall this plugin, the table and all of its data will be removed)
http://i.imgur.com/zDu7o5U.png
I am not looking forward to cataloguing these stickers
- - - Updated - - -
Made slight changes to some columns
http://i.imgur.com/Qsbd7bb.png
- - - Updated - - -
Here is the template for member_profile (still work in progress)
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/myhabbo.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/skins.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/dialogs.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/buttons.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/control.textarea.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/boxes.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/myhabbo.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/assets.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/group.css" type="text/css" />
{$navi2}
<script src="{$theme['imgdir']}/static/js/homeview.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/homeauth.js" type="text/javascript"></script>
<script src="{$theme['imgdir']}/static/js/homeedit.js" type="text/javascript"></script>
<script type="text/javascript">
document.observe('dom:loaded', function() {
initView({$id}, {$id});
});
function cancelEditing(expired) {
location.replace('member.php?action=profile&uid={$id}');
}
</script>
</head>
<body id="{$mode}">
{$header}
<div id="content-container">
<div id="navi2-container" class="pngbg">
<div id="navi2" class="pngbg clearfix">
<ul>
<li><a href="{$mybb->settings['bburl']}/index.php">Homepage</a></li>
<li class="selected">My Page</li>
<li>Account Settings</li>
<li class="last">{$mybb->settings['bbname']} Club</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="content" style="position: relative;" class="clearfix">
<div id="mypage-wrapper" class="cbb blue">
<div class="box-tabs-container box-tabs-left clearfix">
{$edit}
<h2 class="page-owner">{$formattedname}</h2>
<ul class="box-tabs"></ul>
</div>
<div id="mypage-content">
{$editpage}
<div id="mypage-bg" class="{$background}{">
<div id="playground-outer">
<div id="playground">
{$display}
</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
initEditToolbar();
initMovableItems();
document.observe('dom:loaded', initDraggableDialogs);
</script>
<div id="edit-save" style="display:none;"></div>
{$footer}
</body>
</html>
- - - Updated - - -
I'll be pausing development for a couple of days as I have other projects that need priotising! Thanks for understanding
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
No images today just stuff I've done in my spare time
* Reporting profiles implemented (this was a lost feature that I had to reengineer as the revision of holocms I'm using doesn't have this implemented)
* Saving profile, checks are made to make sure that you're the user saving the profile and that all information is secured and not empty.
* Add/remove/edit widgets, stickers and stickies
* habboauth.js, habboedit.js and habboview.js have revision changes
* If user doesn't have profile widget, they are given one and the webpage is refreshed using <meta />. If profile doesn't exist, we throw error
* Checks are made to make sure only relevant files/information is being shown if user is logged in and is their profile (E.G. user can't report a profile if its their own or they are not logged in)
*
member_profile template
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/myhabbo.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/skins.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/dialogs.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/buttons.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/control.textarea.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/boxes.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/styles/myhabbo/assets.css" type="text/css" />
<link rel="stylesheet" href="{$theme['imgdir']}/v2/styles/myhabbo.css" type="text/css" />
{$profileincludes}
</head>
<body id="{$profilemode}">
{$header}
<div id="content-container">
<div id="navi2-container" class="pngbg">
<div id="navi2" class="pngbg clearfix">
<ul>
<li><a href="{$mybb->settings['bburl']}/index.php">Homepage</a></li>
<li class="selected">My Page</li>
<li>Account Settings</li>
<li class="last">{$mybb->settings['bbname']} Club</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="content" class="clearfix">
<div id="mypage-wrapper" class="cbb blue">
<div class="box-tabs-container box-tabs-left clearfix">
{$editbutton}
<h2 class="page-owner">{$formattedname}</h2>
<ul class="box-tabs"></ul>
</div>
<div id="mypage-content">
{$toptoolbar}
<div id="mypage-bg" class="{$profilebackground}">
<div id="playground-outer">
<div id="playground">
{$profilecontents}
</div>
</div>
</div>
</div>
</div>
{$footer}
</body>
</html>
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
http://i.imgur.com/S8NGPmJ.gif
What have I done with the web store? I've removed it entirely.
Why have you removed it? You monster! The web store served no purpose, all it did was use up more resources.
How does this inventory work then? Pretty simple, whatever you add into profileinventory will be in everybodys inventory, there is no set amount and you can change the amount limit of stickers/stickies/widgets in admin cp.
Future plans? I want to add more quality of life updates to enhance the back end and offer the user a better experience overall
There is a couple of more things I want to do with homes before I prioritise something else
- - - Updated - - -
Changes made to profilestickers
http://i.imgur.com/Y2PgKZo.png
- - - Updated - - -
My mistake, all columns have been set as unsigned
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Showcasing some quality of life updates for homes!
http://i.imgur.com/qqt1EFR.gif
- - - Updated - - -
Fixed some alignment issues, especially with the footer
- - - Updated - - -
http://i.imgur.com/gbVwKT9.gifvBackend functionality: Sticker/widget/stickie/background limit and advertisements
http://i.imgur.com/gbVwKT9.gif
Advertisement plugin works for both the entire website and profiles
http://i.imgur.com/NLm9zZ5.gif
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Minor tweaks with the advertisement plugin and memberprofile plugin.
http://i.imgur.com/QjTnbxD.gif
Fixed the gap that advertisement positioning had
Advertisement no longer displays on the about page (it could, but then we'd be making box-content even more tiny than they already are)
- - - Updated - - -
As always, feedback is welcome
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
http://i.imgur.com/LrSOmGR.png
As always, it's work in progress but I wanted to share my thoughts on this.
Initially I was just going to throw 1K+ (ballpark figure) stickers into the stickers category, but then realised that wouldn't be a great idea. Instead I'll add other categories that'll hold an array of stickers for their specific grouping. Any unsorted stickers will just be added into the stickers category.
I would like to add more admin cp features, adding your own categories and stickers
Feedback is welcome
- - - Updated - - -
I would love some constructive feedback on this piece of code!
PHP Code:
global $db;
$mode = $mybb->get_input('key');
$type = $mybb->get_input('type');
$widget = $db->escape_string($mybb->get_input('itemId', MyBB::INPUT_INT));
// $noteText = $mybb->get_input('noteText');
// $newskin = $mybb->get_input('skin', MyBB::INPUT_INT);
$stickerid = $db->escape_string($mybb->get_input('selectedStickerId', MyBB::INPUT_INT));
$z = $db->escape_string($mybb->get_input('zindex', MyBB::INPUT_INT));
if(empty($type) && empty($widget) && empty($stickerid) && empty($z) != "")
{
error_no_permission();
exit;
}
if($mode == 'inventory')
{
$query = $db->simple_select("profileinventory", "message", "type = '1'", array("limit" => 1));
if($db->num_rows($query) > 0)
{
$results = $db->fetch_array($query);
header('X-JSON: [["Inventory", "Webstore"], ["'.$results['message'].'_pre", "'.$results['message'].'", "'.$results['message'].'", "Sticker", null, 1]]');
}
else
{
header('X-JSON: [["Inventory", "Webstore"], []]');
}
echo '
<div style="position: relative;">
<div id="inventory-categories-container">
<h4>Categories:</h4>
<div id="inventory-categories">
<ul class="purchase-main-category">
<li id="inv-cat-stickers" class="selected-main-category-no-subcategories"><div><strong>Stickers</strong></div></li>
<li id="inv-cat-bling" class="main-category-no-subcategories"><div>∟ Alpha Bling</div></li>
<li id="inv-cat-plastic" class="main-category-no-subcategories"><div>∟ Alpha Platic</div></li>
<li id="inv-cat-wood" class="main-category-no-subcategories"><div>∟ Alpha Wood</div></li>
<li id="inv-cat-buttons" class="main-category-no-subcategories"><div>∟ Buttons</div></li>
<li id="inv-cat-backgrounds" class="main-category-no-subcategories"><div><strong>Backgrounds</strong></div></li>
<li id="inv-cat-widgets" class="main-category-no-subcategories"><div><strong>Widgets</strong></div></li>
<li id="inv-cat-notes" class="main-category-no-subcategories"><div><strong>Notes</strong></div></li>
</ul>
</div>
</div>
<div id="inventory-content-container">
<div id="inventory-items-container">
<h4>Click an item to select it:</h4>
<div id="inventory-items">
<ul id="inventory-item-list">';
$query = $db->simple_select("profileinventory", "fid, message", "type = '1'");
$number = $db->num_rows($query);
if($number > 0)
{
while($results = $db->fetch_array($query))
{
echo '
<li id="inventory-item-'.$results['fid'].'" title="'.$results['message'].'">
<div class="webstore-item-preview '.$results['message'].'_pre">
<div class="webstore-item-mask"><div class="webstore-item-count"><div>∞</div></div></div>
</div>
</li>';
}
if($number < 20)
{
$number = 20 - $number;
for($count = 1; $count <= $number; $count++)
{
echo '<li class="webstore-item-empty"></li>';
}
}
}
else
{
echo '
<div class="webstore-frank">
<div class="blackbubble">
<div class="blackbubble-body">
<p><strong>Your inventory for this category is completely empty!</strong></p>
<br class="clear" />
</div>
</div>
<div class="blackbubble-bottom">
<div class="blackbubble-bottom-body"><img src="'.$bburl.'/web-gallery/images/box-scale/bubble_tail_small.gif" alt="" class="invitation-tail" /></div>
</div>
<div class="webstore-frank-image"><img src="'.$bburl.'/web-gallery/images/frank/sorry.gif" alt="" /></div>
</div>';
}
echo '
</ul>
</div>
</div>
<div id="inventory-preview-container">
<div id="inventory-preview-default"></div>
<div id="inventory-preview">
<h4> </h4>
<div id="inventory-preview-box"></div>
<div id="inventory-preview-place" class="clearfix">
<div class="clearfix">
<a href="#" class="new-button" id="inventory-place"><b>Place</b><i></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="webstore-close-container">
<div class="clearfix"><a href="#" id="webstore-close" class="new-button"><b>Close</b><i></i></a></div>
</div>';
}
elseif($mode == 'inventory_items')
{
if($type == 'stickers')
{
$typeset = 1;
}
else if($type == 'widgets')
{
$typeset = 2;
}
else if($type == 'notes')
{
$typeset = 3;
}
else if($type == 'backgrounds')
{
$typeset = 4;
}
if($typeset != 2)
{
$query = $db->simple_select("profileinventory", "fid, message", "type = '".$typeset."'");
$number = $db->num_rows($query);
echo '
<ul id="webstore-item-list">';
if($number > 0)
{
while($results = $db->fetch_array($query))
{
echo '
<li id="inventory-item-'.$results['fid'].'" title="'.$results['message'].'">
<div class="webstore-item-preview '.$inventorytype.$results['message'].'_pre">
<div class="webstore-item-mask"><div class="webstore-item-count"><div>∞</div></div></div>
</div>
</li>';
}
if($number < 20)
{
$number = 20 - $number;
for($count = 1; $count <= $number; $count++)
{
echo '<li class="webstore-item-empty"></li>';
}
}
}
else
{
echo '
<div class="webstore-frank">
<div class="blackbubble">
<div class="blackbubble-body">
<p><strong>Your inventory for this category is completely empty!</strong></p>
<br class="clear" />
</div>
</div>
<div class="blackbubble-bottom">
<div class="blackbubble-bottom-body"><img src="'.$bburl.'/web-gallery/images/box-scale/bubble_tail_small.gif" alt="" class="invitation-tail" /></div>
</div>
<div class="webstore-frank-image"><img src="'.$bburl.'/web-gallery/images/frank/sorry.gif" alt="" /></div>
</div>';
}
echo '
</ul>';
}
else
{
echo '
<ul id="inventory-item-list">
<li id="inventory-item-p-1" title="Guestbook" class="webstore-widget-item '.webstorewidgetdisabled(2).'">
<div class="webstore-item-preview w_guestbookwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>Guestbook</h3>
<p>Guestbook</p>
</div>
</li>
<li id="inventory-item-p-2" title="My Friends" class="webstore-widget-item '.webstorewidgetdisabled(3).'">
<div class="webstore-item-preview w_friendswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Friends</h3>
<p>Display all your friends</p>
</div>
</li>
<li id="inventory-item-p-3" title="My Badges" class="webstore-widget-item '.webstorewidgetdisabled(4).'">
<div class="webstore-item-preview w_badgeswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Badges</h3>
<p>Show your badges on your page.</p>
</div>
</li>
<li id="inventory-item-p-4" title="My Video" class="webstore-widget-item '.webstorewidgetdisabled(5).'">
<div class="webstore-item-preview w_movieswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Video</h3>
<p>Lights, camera and action.</p>
</div>
</li>
<li id="inventory-item-p-5" title="My Ratings" class="webstore-widget-item '.webstorewidgetdisabled(6).'">
<div class="webstore-item-preview w_ratingwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Ratings</h3>
<p>Let other people rate your page.</p>
</div>
</li>
<li id="inventory-item-p-6" title="My Trax" class="webstore-widget-item '.webstorewidgetdisabled(7).'">
<div class="webstore-item-preview w_traxplayerwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Trax</h3>
<p>Listen to music on your page.</p>
</div>
</li>
</ul>';
}
}
else if($mode == 'inventory_preview')
{
header('X-JSON: ["'.inventorypreview($widget, $type).'_pre", "'.inventorypreview($widget, $type).'", "'.inventorypreview($widget, $type).'", "'.$type.'", null, 1]');
echo '
<h4> </h4>
<div id="inventory-preview-box"></div>
<div id="inventory-preview-place" class="clearfix">
<div class="clearfix"><a href="#" class="new-button" id="inventory-place"><b>Place</b><i></i></a></div>
</div>';
}
else if($mode == 'place_sticker')
{
$query = $db->simple_select("profileinventory", "*", "fid = '".$stickerid."' AND type = '1'", array("limit" => 1));
if($db->num_rows($query) > 0)
{
$results = $db->fetch_array($query);
$insert = array(
'message' => $results['message'],
'type' => '1',
'subtype' => '0',
'pid' => $myid,
'x' => '10',
'y' => '10',
'z' => $z
);
$db->insert_query("profilestickers", $insert);
$query = $db->simple_select("profilestickers", "*", "pid = '".$myid."' AND message = '".$results['message']."' AND type = '1'", array("order_by" => "fid DESC", "limit" => 1));
$results = $db->fetch_array($query);
header('X-JSON: ['.$results['fid'].','.$results['fid'].']');
echo '<div class="movable sticker '.$results['message'] . '" style="left: 10px; top: 10px; z-index: '.$results['z'].'" id="sticker-'.$results['fid'].'">
<img src="'.$bburl.'/web-gallery/images/myhabbo/icon_edit.gif" class="edit-button" id="sticker-' . $results['fid'] . '-edit" />
<script language="JavaScript" type="text/javascript">
Event.observe(\'sticker-'.$results['fid'].'-edit\', \'click\', function(e) { openEditMenu(e, '.$results['fid'].', \'sticker\', \'sticker-'.$results['fid'].'-edit\'); }, false);
</script>
</div>';
}
- - - Updated - - -
Here is an updated revision
PHP Code:
global $db;
$mode = $mybb->get_input('key');
$type = $mybb->get_input('type');
$widget = $db->escape_string($mybb->get_input('itemId', MyBB::INPUT_INT));
// $noteText = $mybb->get_input('noteText');
// $newskin = $mybb->get_input('skin', MyBB::INPUT_INT);
$stickerid = $db->escape_string($mybb->get_input('selectedStickerId', MyBB::INPUT_INT));
$z = $db->escape_string($mybb->get_input('zindex', MyBB::INPUT_INT));
if(empty($type) && empty($widget) && empty($stickerid) && empty($z) != "")
{
error_no_permission();
exit;
}
if($mode == 'inventory')
{
$query = $db->simple_select("profileinventory", "message", "type = '1'", array("limit" => 1));
if($db->num_rows($query) > 0)
{
$results = $db->fetch_array($query);
header('X-JSON: [["Inventory", "Webstore"], ["'.$results['message'].'_pre", "'.$results['message'].'", "'.$results['message'].'", "Sticker", null, 1]]');
}
else
{
header('X-JSON: [["Inventory", "Webstore"], []]');
}
echo '
<div style="position: relative;">
<div id="inventory-categories-container">
<h4>Categories:</h4>
<div id="inventory-categories">
<ul class="purchase-main-category">
<li id="inv-cat-stickers" class="selected-main-category-no-subcategories"><div><strong>Stickers</strong></div></li>
<li id="inv-cat-bling" class="main-category-no-subcategories"><div>∟ Alpha Bling</div></li>
<li id="inv-cat-plastic" class="main-category-no-subcategories"><div>∟ Alpha Platic</div></li>
<li id="inv-cat-wood" class="main-category-no-subcategories"><div>∟ Alpha Wood</div></li>
<li id="inv-cat-buttons" class="main-category-no-subcategories"><div>∟ Buttons</div></li>
<li id="inv-cat-backgrounds" class="main-category-no-subcategories"><div><strong>Backgrounds</strong></div></li>
<li id="inv-cat-widgets" class="main-category-no-subcategories"><div><strong>Widgets</strong></div></li>
<li id="inv-cat-notes" class="main-category-no-subcategories"><div><strong>Notes</strong></div></li>
</ul>
</div>
</div>
<div id="inventory-content-container">
<div id="inventory-items-container">
<h4>Click an item to select it:</h4>
<div id="inventory-items">
<ul id="inventory-item-list">';
getitems(1);
echo '
</ul>
</div>
</div>
<div id="inventory-preview-container">
<div id="inventory-preview-default"></div>
<div id="inventory-preview">
<h4> </h4>
<div id="inventory-preview-box"></div>
<div id="inventory-preview-place" class="clearfix">
<div class="clearfix">
<a href="#" class="new-button" id="inventory-place"><b>Place</b><i></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="webstore-close-container">
<div class="clearfix"><a href="#" id="webstore-close" class="new-button"><b>Close</b><i></i></a></div>
</div>';
}
elseif($mode == 'inventory_items')
{
if($type == 'stickers')
{
$typeset = 1;
}
else if($type == 'widgets')
{
$typeset = 2;
}
else if($type == 'notes')
{
$typeset = 3;
}
else if($type == 'backgrounds')
{
$typeset = 4;
}
if($typeset != 2)
{
echo '
<ul id="webstore-item-list">';
getitems($typeset);
echo '
</ul>';
}
else
{
echo '
<ul id="inventory-item-list">
<li id="inventory-item-p-1" title="Guestbook" class="webstore-widget-item '.webstorewidgetdisabled(2).'">
<div class="webstore-item-preview w_guestbookwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>Guestbook</h3>
<p>Guestbook</p>
</div>
</li>
<li id="inventory-item-p-2" title="My Friends" class="webstore-widget-item '.webstorewidgetdisabled(3).'">
<div class="webstore-item-preview w_friendswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Friends</h3>
<p>Display all your friends</p>
</div>
</li>
<li id="inventory-item-p-3" title="My Badges" class="webstore-widget-item '.webstorewidgetdisabled(4).'">
<div class="webstore-item-preview w_badgeswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Badges</h3>
<p>Show your badges on your page.</p>
</div>
</li>
<li id="inventory-item-p-4" title="My Video" class="webstore-widget-item '.webstorewidgetdisabled(5).'">
<div class="webstore-item-preview w_movieswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Video</h3>
<p>Lights, camera and action.</p>
</div>
</li>
<li id="inventory-item-p-5" title="My Ratings" class="webstore-widget-item '.webstorewidgetdisabled(6).'">
<div class="webstore-item-preview w_ratingwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Ratings</h3>
<p>Let other people rate your page.</p>
</div>
</li>
<li id="inventory-item-p-6" title="My Trax" class="webstore-widget-item '.webstorewidgetdisabled(7).'">
<div class="webstore-item-preview w_traxplayerwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Trax</h3>
<p>Listen to music on your page.</p>
</div>
</li>
</ul>';
}
}
else if($mode == 'inventory_preview')
{
header('X-JSON: ["'.inventorypreview($widget, $type).'_pre", "'.inventorypreview($widget, $type).'", "'.inventorypreview($widget, $type).'", "'.$type.'", null, 1]');
echo '
<h4> </h4>
<div id="inventory-preview-box"></div>
<div id="inventory-preview-place" class="clearfix">
<div class="clearfix"><a href="#" class="new-button" id="inventory-place"><b>Place</b><i></i></a></div>
</div>';
}
else if($mode == 'place_sticker')
{
$query = $db->simple_select("profileinventory", "*", "fid = '".$stickerid."' AND type = '1'", array("limit" => 1));
if($db->num_rows($query) > 0)
{
$results = $db->fetch_array($query);
$insert = array(
'message' => $results['message'],
'type' => '1',
'subtype' => '0',
'pid' => $myid,
'x' => '10',
'y' => '10',
'z' => $z
);
$db->insert_query("profilestickers", $insert);
$query = $db->simple_select("profilestickers", "*", "pid = '".$myid."' AND message = '".$results['message']."' AND type = '1'", array("order_by" => "fid DESC", "limit" => 1));
$results = $db->fetch_array($query);
header('X-JSON: ['.$results['fid'].','.$results['fid'].']');
echo '<div class="movable sticker '.$results['message'] . '" style="left: 10px; top: 10px; z-index: '.$results['z'].'" id="sticker-'.$results['fid'].'">
<img src="'.$bburl.'/web-gallery/images/myhabbo/icon_edit.gif" class="edit-button" id="sticker-' . $results['fid'] . '-edit" />
<script language="JavaScript" type="text/javascript">
Event.observe(\'sticker-'.$results['fid'].'-edit\', \'click\', function(e) { openEditMenu(e, '.$results['fid'].', \'sticker\', \'sticker-'.$results['fid'].'-edit\'); }, false);
</script>
</div>';
}
}
- - - Updated - - -
I just noticed that
PHP Code:
$query = $db->simple_select("profileinventory", "*", "fid = '".$stickerid."' AND type = '1'", array("limit" => 1));
PHP Code:
$query = $db->simple_select("profileinventory", "message", "fid = '".$stickerid."' AND type = '1'", array("limit" => 1));
So there's that updated
- - - Updated - - -
Same goes for
PHP Code:
$query = $db->simple_select("profilestickers", "*", "pid = '".$myid."' AND message = '".$results['message']."' AND type = '1'", array("order_by" => "fid DESC", "limit" => 1));
to:
PHP Code:
$query = $db->simple_select("profilestickers", "fid, message, z", "pid = '".$myid."' AND message = '".$results['message']."' AND type = '1'", array("order_by" => "fid DESC", "limit" => 1));
But besides that, I think it's looking pretty good
- - - Updated - - -
There is some deprecated html inside this code too, but again this is all work in progress!
- - - Updated - - -
This is kind of great, I'm spotting more mistakes that I had made
Updated!
PHP Code:
$db->insert_query("profilestickers", array('message' => $results['message'], 'type' => '1', 'subtype' => '0', 'pid' => $myid, 'x' => '10', 'y' => '10', 'z' => $z));
- - - Updated - - -
Pretty happy with the results, thanks guys :lol:
- - - Updated - - -
No longer need this:
Code:
["Inventory", "Webstore"]
Now I can just have:
- - - Updated - - -
Removed from integer values. $mybb->get_input() is enough.
Code:
$db->escape_string()
Added htmlspecialchars_uni() to $results['message'] before outputting it
- - - Updated - - -
Removed exit; before error_no_permission() as it's already called from another function that uses it
- - - Updated - - -
Here is the updated revision:
PHP Code:
$mode = $mybb->get_input('key');
$type = $mybb->get_input('type');
$widget = $mybb->get_input('itemId', MyBB::INPUT_INT);
// $noteText = $mybb->get_input('noteText');
// $newskin = $mybb->get_input('skin', MyBB::INPUT_INT);
$stickerid = $mybb->get_input('selectedStickerId', MyBB::INPUT_INT);
$z = $mybb->get_input('zindex', MyBB::INPUT_INT);
if(empty($type) && empty($widget) && empty($stickerid) && empty($z) != "")
{
error_no_permission();
}
global $db;
if($mode == 'inventory')
{
$query = $db->simple_select("profileinventory", "message", "type = '1'", array("limit" => 1));
if($db->num_rows($query) > 0)
{
$results = $db->fetch_array($query);
header('X-JSON: [["Inventory"], ["'.$results['message'].'_pre", "'.$results['message'].'", "'.$results['message'].'", "Sticker", null, 1]]');
}
else
{
header('X-JSON: [["Inventory"], []]');
}
echo '
<div style="position: relative;">
<div id="inventory-categories-container">
<h4>Categories:</h4>
<div id="inventory-categories">
<ul class="purchase-main-category">
<li id="inv-cat-stickers" class="selected-main-category-no-subcategories"><div><strong>Stickers</strong></div></li>
<li id="inv-cat-bling" class="main-category-no-subcategories"><div>∟ Alpha Bling</div></li>
<li id="inv-cat-plastic" class="main-category-no-subcategories"><div>∟ Alpha Platic</div></li>
<li id="inv-cat-wood" class="main-category-no-subcategories"><div>∟ Alpha Wood</div></li>
<li id="inv-cat-buttons" class="main-category-no-subcategories"><div>∟ Buttons</div></li>
<li id="inv-cat-backgrounds" class="main-category-no-subcategories"><div><strong>Backgrounds</strong></div></li>
<li id="inv-cat-widgets" class="main-category-no-subcategories"><div><strong>Widgets</strong></div></li>
<li id="inv-cat-notes" class="main-category-no-subcategories"><div><strong>Notes</strong></div></li>
</ul>
</div>
</div>
<div id="inventory-content-container">
<div id="inventory-items-container">
<h4>Click an item to select it:</h4>
<div id="inventory-items">
<ul id="inventory-item-list">';
getitems(1);
echo '
</ul>
</div>
</div>
<div id="inventory-preview-container">
<div id="inventory-preview-default"></div>
<div id="inventory-preview">
<h4> </h4>
<div id="inventory-preview-box"></div>
<div id="inventory-preview-place" class="clearfix">
<div class="clearfix">
<a href="#" class="new-button" id="inventory-place"><b>Place</b><i></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="webstore-close-container">
<div class="clearfix"><a href="#" id="webstore-close" class="new-button"><b>Close</b><i></i></a></div>
</div>';
}
elseif($mode == 'inventory_items')
{
if($type == 'stickers')
{
$typeset = 1;
}
else if($type == 'widgets')
{
$typeset = 2;
}
else if($type == 'notes')
{
$typeset = 3;
}
else if($type == 'backgrounds')
{
$typeset = 4;
}
if($typeset != 2)
{
echo '
<ul id="webstore-item-list">';
getitems($typeset);
echo '
</ul>';
}
else
{
echo '
<ul id="inventory-item-list">
<li id="inventory-item-p-1" title="Guestbook" class="webstore-widget-item '.webstorewidgetdisabled(2).'">
<div class="webstore-item-preview w_guestbookwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>Guestbook</h3>
<p>Guestbook</p>
</div>
</li>
<li id="inventory-item-p-2" title="My Friends" class="webstore-widget-item '.webstorewidgetdisabled(3).'">
<div class="webstore-item-preview w_friendswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Friends</h3>
<p>Display all your friends</p>
</div>
</li>
<li id="inventory-item-p-3" title="My Badges" class="webstore-widget-item '.webstorewidgetdisabled(4).'">
<div class="webstore-item-preview w_badgeswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Badges</h3>
<p>Show your badges on your page.</p>
</div>
</li>
<li id="inventory-item-p-4" title="My Video" class="webstore-widget-item '.webstorewidgetdisabled(5).'">
<div class="webstore-item-preview w_movieswidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Video</h3>
<p>Lights, camera and action.</p>
</div>
</li>
<li id="inventory-item-p-5" title="My Ratings" class="webstore-widget-item '.webstorewidgetdisabled(6).'">
<div class="webstore-item-preview w_ratingwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Ratings</h3>
<p>Let other people rate your page.</p>
</div>
</li>
<li id="inventory-item-p-6" title="My Trax" class="webstore-widget-item '.webstorewidgetdisabled(7).'">
<div class="webstore-item-preview w_traxplayerwidget_pre">
<div class="webstore-item-mask"></div>
</div>
<div class="webstore-widget-description">
<h3>My Trax</h3>
<p>Listen to music on your page.</p>
</div>
</li>
</ul>';
}
}
else if($mode == 'inventory_preview')
{
if(empty($widget))
{
exit;
}
header('X-JSON: ["'.inventorypreview($widget, $type).'_pre", "'.inventorypreview($widget, $type).'", "'.inventorypreview($widget, $type).'", "'.$type.'", null, 1]');
echo '
<h4> </h4>
<div id="inventory-preview-box"></div>
<div id="inventory-preview-place" class="clearfix">
<div class="clearfix"><a href="#" class="new-button" id="inventory-place"><b>Place</b><i></i></a></div>
</div>';
}
else if($mode == 'place_sticker')
{
$query = $db->simple_select("profileinventory", "message", "fid = '".$stickerid."' AND type = '1'", array("limit" => 1));
if($db->num_rows($query) > 0)
{
$results = $db->fetch_array($query);
$db->insert_query("profilestickers", array('message' => htmlspecialchars_uni($results['message']), 'type' => '1', 'subtype' => '0', 'pid' => $myid, 'x' => '10', 'y' => '10', 'z' => $z));
$query = $db->simple_select("profilestickers", "fid, message, z", "pid = '".$myid."' AND message = '".htmlspecialchars_uni($results['message'])."' AND type = '1'", array("order_by" => "fid DESC", "limit" => 1));
$results = $db->fetch_array($query);
header('X-JSON: ['.$results['fid'].','.$results['fid'].']');
echo '<div class="movable sticker '.$results['message'].'" style="left: 10px; top: 10px; z-index: '.$results['z'].'" id="sticker-'.$results['fid'].'">
<img src="'.$bburl.'/web-gallery/images/myhabbo/icon_edit.gif" class="edit-button" id="sticker-' . $results['fid'] . '-edit" />
<script type="text/javascript">
Event.observe(\'sticker-'.$results['fid'].'-edit\', \'click\', function(e) { openEditMenu(e, '.$results['fid'].', \'sticker\', \'sticker-'.$results['fid'].'-edit\'); }, false);
</script>
</div>';
}
}
- - - Updated - - -
Made one slight change
- - - Updated - - -
10000% performance increase :lol:
http://i.imgur.com/FubNY5u.gif
- - - Updated - - -
Here's something different, it actually turned out better than I expected. The green does "pop"
http://i.imgur.com/NyRavLZ.png
- - - Updated - - -
I'm just going to leave this here, it's for my own personal use as the revision of holocms I was using to get information from, didn't have this
Code:
<div class="habblet-container">
<div class="cbb clearfix red">
<h2 class="title">What's going on?</h2>
<div id="hotcampaigns-habblet-list-container">
<ul id="hotcampaigns-habblet-list">
<li class="">
<div class="hotcampaign-container">
<a href="">
<img src="" align="left" alt="" /></a>
<h3>'</h3>
<p></p>
<p class="link"><a href="">Go there »</a></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">if (!$(document.body).hasClassName('process-template')) { Rounder.init(); }</script>
#hotcampaigns-habblet-list-container {
padding:5px 5px 0 5px;
}
#hotcampaigns-habblet-list-container p {
padding:5px
}
#hotcampaigns-habblet-list {
list-style-type:none;
margin:0;
padding:0
}
#hotcampaigns-habblet-list li {
float:left;
clear:both;
width:100%
}
#hotcampaigns-habblet-list li div.hotcampaign-container {
padding:5px 10px
}
#hotcampaigns-habblet-list li.even:hover {background-color:#dceafa}#hotcampaigns-habblet-list li.odd:hover{background-color:#f1f8ff}#hotcampaigns-habblet-list li p.link{margin:0;padding:0;text-align:right}#hotcampaigns-habblet-list li p.link a{color:#399001}#hotcampaigns-habblet-list li p{margin:0;padding:0}#hotcampaigns-habblet-list li h3{font-size:13px;margin:5px 0 0 0;padding:0}#hotcampaigns-habblet-list li img{margin:5px 5px 5px 0}#avatar-selector-habblet{padding-top:5px}#avatar-selector-habblet li{height:64px}
- - - Updated - - -
I'm also going to leave this link here to remind myself what I'm going to use this for!
https://github.com/mybb/mybb/blob/mybb_1820/admin/modules/user/group_promotions.php#L37
- - - Updated - - -
I've just made an executive decision for this project, I am removing the credits tab
- - - Updated - - -
I needed more colour tabs
http://i.imgur.com/LKOZXWU.png
- - - Updated - - -
I've asked myself, do I really want tags and the answer was no
- - - Updated - - -
I haven't downloaded the plugin, but this will probably be the plugin for habbo club:
https://community.mybb.com/mods.php?action=view&pid=458 (It looks very promising from the description). Plus it saves me writing up my own plugin, why reinvent the wheel when it's already done for you (something along those lines)
- - - Updated - - -
This also looks promising, as a contender for habbo club subscriptions
https://community.mybb.com/mods.php?action=view&pid=35
- - - Updated - - -
I don't think I'll need to make anymore changes to the memeber profiles javascript files, I am pretty happy with them, one less thing to do
- - - Updated - - -
My intention was that I wasn't going to add boardstats/birthdays/who's online to the personal page, but it is personal information for the user. Plus it fills out the webpage more :tongue:
http://i.imgur.com/rBEjsXv.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I will be removing tags in its entirety from the build, that means everything tag related (html, js, css) will be removed because tags do not exist in Habbo's current format.
I won't be implementing groups because Habbo's current format there is no way to access the group page on their website
Initially I was going to implement groups, but it doesn't make sense if I'm aiming to use this cms/mybb on current Habbo emulation
Before I continue the project for the 2009 theme/templates, I am going to remove any code that isn't/or won't be used to save up resources and performance
Once I'm satisfied with the results I'll continue the push on with development
Updates!
When I changed the theme over from the default mybb theme, I broke a script that would redirect you back to the page you were on when logging in, I have now fixed that and it's working as intended.
I have updated boardstats/forum statistics/who's online/birthdays to this:
http://i.imgur.com/l7lJRCO.png
If someone could hook me up with icons for board statistics, that would be great. I'd just need them to be relatively small (10x10 to 15x15) and them all being the same size.
- - - Updated - - -
http://i.imgur.com/Z0JonCQ.png
Subnavi looking tiny
- - - Updated - - -
Things to remove:
Code:
<li id="mygroups"><a href="#"><span>My Groups</span></a><span class="r"></span></li>
<li id="myrooms"><a href="#"><span>My Rooms</span></a><span class="r"></span></li>
- - - Updated - - -
Things to remove and fix:
Code:
<a onclick="openOrFocusHelp(this); return false" href="http://192.168.1.219/mybb/misc.php?action=help" target="habbohelp">Help</a>
- - - Updated - - -
CSS (ill check if the images are used anywhere else, otherwise they're taking a hike)
Code:
#qtab-container-myrooms p.create-room, #qtab-container-mygroups p.create-group,
#qtab-container-myrooms p.create-room a, #qtab-container-mygroups p.create-group a {
padding: 0 21px 2px 0;
background: transparent url(../images/myhabbo_icons.png) no-repeat 100% -236px;
}
div.favourite-group, div.owned-group, div.admin-group, #quickmenu-groups li a.group-room,
#promogroups-habblet-list-container a.group-room {
display: block;
float: right;
width: 16px;
height: 16px;
background: transparent url(../images/info_icons.png) no-repeat;
}
div.favourite-group { background-position: 100% -433px; }
div.owned-group { background-position: 100% -480px; }
div.admin-group { background-position: 100% -528px; }
#quickmenu-groups li a.group-room, #promogroups-habblet-list-container a.group-room { background-position: 0 -800px; width: 19px; }
#promogroups-habblet-list-container a.group-room { margin-top: 15px; width: 24px; }
- - - Updated - - -
I figured I'd post this boring stuff because it's a part of the development and you should all be aware how much effort I'm putting into this development and
hopefully it'll inspire at least one of you
- - - Updated - - -
Need editing: You thought you were safe?! HA!!!!!!
Code:
HabboView.add(function() {
if (document.habboLoggedIn && $("subnavi-user")) {
var B = new QuickMenu();
var A = $A([
["myfriends", "habblet/quickmenu.php?key=friends_all"],
["mygroups", "habblet/quickmenu.php?key=groups"],
["myrooms", "habblet/quickmenu.php?key=rooms"]
]);
A.each(function(C) {
B.add($(C[0]), function(D) {
var E = C[1];
Element.wait(D);
new Ajax.Updater(D, E, {
onComplete: function() {
new QuickMenuListPaging(C[0], E)
}
})
})
});
Event.observe(document.body, "click", function(C) {
B.closeContainer()
})
}
});
HabboView.add(function() {
if (document.habboLoggedIn && $("subnavi-user")) {
var B = new QuickMenu();
var A = $A([
["myfriends", "habblet/ajax_habblet/quickmenu.php?key=friends_all"],
["mygroups", "habblet/ajax_habblet/quickmenu.php?key=groups"],
["myrooms", "habblet/ajax_habblet/quickmenu.php?key=rooms"]
]);
A.each(function(C) {
B.add($(C[0]), function(D) {
var E = C[1];
Element.wait(D);
new Ajax.Updater(D, E, {
onComplete: function() {
new QuickMenuListPaging(C[0], E)
}
})
})
});
Event.observe(document.body, "click", function(C) {
B.closeContainer()
})
}
});
- - - Updated - - -
I'll leave the script as an array, incase people want to add other quickmenus in the future
- - - Updated - - -
This also needs removing
Code:
function openOrFocusHelp(C) {
var E = (C.href ? C.href : C);
var D = HabboClient._openEmptyHabboWindow("habbohelp");
var B = false;
try {
B = (D.habboHelp)
} catch (A) {}
if (B) {
D.focus()
} else {
D.location.href = E;
D.focus()
}
}
- - - Updated - - -
No longer need this as it was used for quickmenu
Code:
function roomForward(C, B, A) {
HabboClient.roomForward(C, B, A)
}
- - - Updated - - -
Anyway you guys get the point :lol:
- - - Updated - - -
I can't help myself, here's a juicy script that needs removing: tags
Code:
var TagHelper = Class.create();
TagHelper.initialized = false;
TagHelper.init = function(A) {
if (TagHelper.initialized) {
return
}
TagHelper.initialized = true;
TagHelper.loggedInAccountId = A;
TagHelper.bindEventsToTagLists()
};
TagHelper.addFormTagToMe = function() {
var A = $("add-tag-input");
TagHelper.addThisTagToMe($F(A), true);
Form.Element.clear(A)
};
TagHelper.bindEventsToTagLists = function() {
var A = function(B) {
TagHelper.tagListClicked(B, TagHelper.loggedInAccountId)
};
$$(".tag-list.make-clickable").each(function(B) {
Event.observe(B, "click", A);
Element.removeClassName(B, "make-clickable")
})
};
TagHelper.setTexts = function(A) {
TagHelper.options = A
};
TagHelper.tagListClicked = function(E) {
var D = Event.element(E);
var B = Element.hasClassName(D, "tag-add-link");
var A = Element.hasClassName(D, "tag-remove-link");
if (B || A) {
var F = Element.up(D, ".tag-list li");
if (!F) {
return
}
var C = TagHelper.findTagNameForContainer(F);
Event.stop(E);
if (B) {
TagHelper.addThisTagToMe(C, true)
} else {
TagHelper.removeThisTagFromMe(C)
}
}
};
TagHelper.findTagNameForContainer = function(A) {
var B = Element.down(A, ".tag");
if (!B) {
return null
}
return B.innerHTML.strip()
};
TagHelper.addThisTagToMe = function(B, C, A) {
if (typeof(A) == "undefined") {
A = {}
}
new Ajax.Request("/myhabbo/tag/add", {
parameters: "accountId=" + encodeURIComponent(TagHelper.loggedInAccountId) + "&tagName=" + encodeURIComponent(B),
onSuccess: function(E) {
var D = E.responseText;
if (D == "valid" && C) {
$$(".tag-list li").each(function(F) {
if (TagHelper.findTagNameForContainer(F) == B) {
var H = Element.down(F, ".tag-add-link");
var G = $$(".tag-remove-link").first();
H.title = G ? G.title : "";
H.removeClassName("tag-add-link").addClassName("tag-remove-link")
}
})
} else {
if (D == "taglimit") {
Dialog.showInfoDialog("tag-error-dialog", TagHelper.options.tagLimitText, TagHelper.options.buttonText, null)
} else {
if (D == "invalidtag") {
Dialog.showInfoDialog("tag-error-dialog", TagHelper.options.invalidTagText, TagHelper.options.buttonText, null)
}
}
}
if (D == "valid" || D == "") {
if (C) {
TagHelper.reloadMyTagsList()
} else {
TagHelper.reloadSearchBox(B, 1)
}
if (typeof(A.onSuccess) == "function") {
A.onSuccess()
}
}
}
})
};
TagHelper.reloadSearchBox = function(A, B) {
if ($("tag-search-habblet-container")) {
new Ajax.Updater($("tag-search-habblet-container"), "/habblet/ajax/tagsearch", {
method: "post",
parameters: "tag=" + A + "&pageNumber=" + B,
evalScripts: true
})
}
};
TagHelper.removeThisTagFromMe = function(A) {
new Ajax.Request("/myhabbo/tag/remove", {
parameters: "accountId=" + encodeURIComponent(TagHelper.loggedInAccountId) + "&tagName=" + encodeURIComponent(A),
onSuccess: function(C) {
var B = function(D) {
$$(".tag-list li").each(function(E) {
if (TagHelper.findTagNameForContainer(E) == A) {
var G = Element.down(E, ".tag-remove-link");
var F = $$(".tag-add-link").first();
if (F) {
G.title = F.title || "";
G.removeClassName("tag-remove-link").addClassName("tag-add-link")
}
}
})
};
TagHelper.reloadMyTagsList({
onSuccess: B
})
}
})
};
TagHelper.reloadMyTagsList = function(B) {
var A = {
evalScripts: true
};
Object.extend(A, B);
new Ajax.Updater($("my-tags-list"), "/habblet/mytagslist", A)
};
TagHelper.matchFriend = function() {
var A = $F("tag-match-friend");
if (A) {
new Ajax.Updater($("tag-match-result"), habboReqPath + "/habblet/ajax/tagmatch", {
parameters: {
friendName: A
},
onComplete: function(D) {
var C = $("tag-match-value");
if (C) {
var B = parseInt(C.innerHTML, 10);
if (typeof TagHelper.CountEffect == "undefined") {
$("tag-match-value-display").innerHTML = B + " %";
Element.show("tag-match-slogan")
} else {
var E;
if (B > 0) {
E = 1.5
} else {
E = 0.1
}
new TagHelper.CountEffect("tag-match-value-display", {
duration: E,
transition: Effect.Transitions.sinoidal,
from: 0,
to: B,
afterFinish: function() {
Effect.Appear("tag-match-slogan", {
duration: 1
})
}
})
}
}
}
})
}
};
var TagFight = Class.create();
TagFight.init = function() {
if ($F("tag1") && $F("tag2")) {
TagFight.start()
} else {
return false
}
};
TagFight.start = function() {
$("fightForm").style.display = "none";
$("tag-fight-button").style.display = "none";
$("fightanimation").src = habboStaticFilePath + "/images/tagfight/tagfight_loop.gif";
$("fight-process").style.display = "block";
setTimeout("TagFight.run()", 3000)
};
TagFight.run = function() {
new Ajax.Updater("fightResults", "/habblet/ajax/tagfight", {
method: "post",
parameters: "tag1=" + $F("tag1") + "&tag2=" + $F("tag2"),
onComplete: function() {
$("fight-process").style.display = "none";
$("fightForm").style.display = "none";
$("tag-fight-button-new").style.display = "block"
}
})
};
TagFight.newFight = function() {
$("fight-process").style.display = "none";
$("fightForm").style.display = "block";
$("fightResultCount").style.display = "none";
$("tag-fight-button").style.display = "block";
$("tag-fight-button-new").style.display = "none";
$("fightanimation").src = habboStaticFilePath + "/images/tagfight/tagfight_start.gif";
$("tag1").value = "";
$("tag2").value = ""
};
- - - Updated - - -
Removing:
Code:
var HabbletGroupPaging = Class.create(HabbletPaging, {
initialize: function($super, A) {
this.setOptions({
contentElementId: "groups-habblet-list-container",
pagingElementId: "groups-habblet-list-container-list-paging",
pagingListLinkClass: "groups-habblet-list-container-list-paging-link"
});
$super(A)
}
});
Code:
var HighscoreHabblet = Class.create();
HighscoreHabblet.prototype = {
initialize: function(A) {
this.habbletId = A;
this.containerEl = $("highscores-habblet-list-container-" + A);
this._setupPaging();
this._setupGameLinks()
},
_setupPaging: function() {
if ($("habblet-paging-" + this.habbletId)) {
Event.observe($("habblet-paging-" + this.habbletId), "click", function(A) {
Event.stop(A);
this._handlePagingClick(A)
}.bind(this))
}
},
_handlePagingClick: function(D) {
var C = Event.findElement(D, "a");
if (Element.hasClassName(C, "list-paging-link")) {
var A = $F(this.habbletId + "-pageNumber");
var B = $F(this.habbletId + "-gameId");
switch (C.id.split("-").last()) {
case "next":
A++;
break;
case "previous":
A--;
break
}
this._updateContent(A, B)
}
},
_setupGameLinks: function() {
Event.observe($("highscores-habblet-games-" + this.habbletId), "click", function(A) {
Event.stop(A);
this._handleGameLinkClick(A)
}.bind(this))
},
_handleGameLinkClick: function(C) {
var B = Event.findElement(C, "a");
if (Element.hasClassName(B, "highscores-habblet-game-link")) {
var A = B.id.split("-").last();
this._updateContent(0, A)
}
},
_updateContent: function(A, B) {
new Ajax.Updater(this.containerEl, habboReqPath + "/habblet/personalhighscores", {
method: "post",
parameters: {
pageNumber: A,
gameId: B,
hid: this.habbletId
},
onComplete: function() {
this._setupPaging();
this._setupGameLinks()
}.bind(this)
})
}
};
var BestExpsHabblet = Class.create();
BestExpsHabblet.prototype = {
initialize: function(A) {
this.habbletId = A;
this.containerEl = $("best-exps-habblet-list-container-" + A);
this._setupTypeLinks();
this._setupOffsetLinks()
},
_setupTypeLinks: function() {
Event.observe($("best-exps-habblet-types-" + this.habbletId), "click", function(A) {
Event.stop(A);
this._handleTypeLinkClick(A)
}.bind(this))
},
_setupOffsetLinks: function() {
var A = $F(this.habbletId + "-type");
if (A == "alltime") {
return
}
Event.observe($("best-exps-habblet-offset-" + this.habbletId), "click", function(B) {
Event.stop(B);
this._handleOffsetLinkClick(B)
}.bind(this))
},
_handleTypeLinkClick: function(C) {
var B = Event.findElement(C, "a");
if (Element.hasClassName(B, "best-exps-habblet-type-link")) {
var A = B.id.split("-").last();
this._updateContent(A, 0)
}
},
_handleOffsetLinkClick: function(C) {
var B = Event.findElement(C, "a");
if (Element.hasClassName(B, "best-exps-habblet-offset-link")) {
var D = B.id.split("-").last();
var A = $F(this.habbletId + "-type");
this._updateContent(A, -D)
}
},
_updateContent: function(A, B) {
new Ajax.Updater(this.containerEl, habboReqPath + "/habblet/bestexps", {
method: "post",
parameters: {
type: A,
offset: B,
hid: this.habbletId
},
onComplete: function() {
this._setupTypeLinks();
this._setupOffsetLinks()
}.bind(this)
})
}
};
var HallOfFameHabblet = Class.create();
HallOfFameHabblet.prototype = {
initialize: function(A) {
this.habbletId = A;
this.containerEl = $("hall-of-fame-habblet-list-container-" + A);
this._setupGameLinks()
},
_setupGameLinks: function() {
Event.observe($("hall-of-fame-habblet-games-" + this.habbletId), "click", function(A) {
Event.stop(A);
this._handleGameLinkClick(A)
}.bind(this))
},
_handleGameLinkClick: function(C) {
var B = Event.findElement(C, "a");
if (Element.hasClassName(B, "hall-of-fame-habblet-game-link")) {
var A = B.id.split("-").last();
this._updateContent(A, 0)
}
},
_updateContent: function(A) {
new Ajax.Updater(this.containerEl, habboReqPath + "/habblet/halloffame", {
method: "post",
parameters: {
game: A,
hid: this.habbletId
},
onComplete: function() {
this._setupGameLinks()
}.bind(this)
})
}
};
Code:
var RoomSelectionHabblet = {
initClosableHabblet: function() {
$("habblet-close-roomselection").observe("click", function(A) {
RoomSelectionHabblet.showConfirmation()
})
},
hideHabblet: function() {
new Ajax.Request(habboReqPath + "habblet/ajax_roomselectionHide.php");
Effect.Fade("roomselection", {
afterFinish: function() {
$("roomselection").remove()
}
})
},
showConfirmation: function() {
Overlay.show();
var A = Dialog.createDialog("roomselection-dialog", L10N.get("roomselection.hide.title"), false, false, false, RoomSelectionHabblet.hideConfirmation);
Dialog.setAsWaitDialog(A);
Dialog.makeDialogDraggable(A);
Dialog.moveDialogToCenter(A);
new Ajax.Request(habboReqPath + "habblet/ajax_roomselectionConfirm.php", {
onComplete: function(B) {
$("roomselection-dialog-body").update(B.responseText);
$("roomselection-cancel").observe("click", function(C) {
Event.stop(C);
RoomSelectionHabblet.hideConfirmation()
});
if ( !! $("roomselection-hide")) {
$("roomselection-hide").observe("click", function(C) {
Event.stop(C);
RoomSelectionHabblet.hideConfirmation();
RoomSelectionHabblet.hideHabblet()
})
}
}
})
},
hideConfirmation: function() {
$("roomselection-dialog").remove();
Overlay.hide()
},
create: function(B, D) {
var A = false;
try {
A = window.habboClient
} catch (C) {}
if (A) {
window.location.href = B;
return false
}
if (document.habboLoggedIn) {
new Ajax.Request(habboReqPath + "habblet/ajax_roomselectionCreate.php", {
parameters: {
roomType: D
}
})
}
HabboClient.openOrFocus(B);
if ($("roomselection-plp-intro")) {
$("roomselection-plp", "habblet-close-roomselection").invoke("hide");
$("roomselection-plp-intro").update(L10N.get("roomselection.old_user.done"))
}
return false
}
};
Code:
var GiftQueueHabblet = {
init: function(A) {
GiftQueueHabblet.container = $("gift-countdown");
if ( !! GiftQueueHabblet.container) {
new PrettyTimer(A, function(B) {
GiftQueueHabblet.container.update(B)
}, {
showDays: false,
showMeaningfulOnly: false,
localizations: {
hours: L10N.get("time.hours") + " ",
minutes: L10N.get("time.minutes") + " ",
seconds: L10N.get("time.seconds")
},
endCallback: function() {
GiftQueueHabblet.reload()
}
})
}
},
initClosableHabblet: function() {
$("habblet-close-giftqueue").setStyle({
display: "inline"
});
$("habblet-close-giftqueue").observe("click", function(A) {
GiftQueueHabblet.hide()
})
},
reload: function() {
new Ajax.Request(habboReqPath + "habblet/ajax_nextgift.php", {
onComplete: function(B, A) {
$("gift-container").update(B.responseText);
GiftQueueHabblet.init(parseInt(A))
}
})
},
hide: function() {
new Ajax.Request(habboReqPath + "habblet/ajax_roomselectionHide.php");
Effect.Fade("giftqueue", {
afterFinish: function() {
$("giftqueue").remove()
}
})
}
};
var CurrentRoomEvents = {
init: function() {
$("event-category").observe("change", function(A) {
Element.wait($("event-list"));
new Ajax.Updater("event-list", "habblet/ajax_load_events.php", {
parameters: {
eventTypeId: $F("event-category")
},
onComplete: function() {
CurrentRoomEvents.initListItems()
}
})
});
CurrentRoomEvents.initListItems()
},
initListItems: function() {
$$("#current-events ul.habblet-list").each(function(A) {
Event.observe(A, "click", function(C) {
var D = Event.element(C);
if (D.tagName.toUpperCase() == "A") {
return
}
Event.stop(C);
if (!$(D).match("li")) {
D = $(D).up("li")
}
var B = $(D).readAttribute("roomid");
if (B) {
HabboClient.roomForward("client.php?forwardId=2&roomId=" + B, B, "private")
}
})
})
}
};
Code:
HabboView.add(HabbletTabber.init);
var TagHelper = Class.create();
TagHelper.initialized = false;
TagHelper.init = function(A) {
if (TagHelper.initialized) {
return
}
TagHelper.initialized = true;
TagHelper.loggedInAccountId = A;
TagHelper.bindEventsToTagLists()
};
TagHelper.addFormTagToMe = function() {
var A = $("add-tag-input");
TagHelper.addThisTagToMe($F(A), true);
Form.Element.clear(A)
};
TagHelper.bindEventsToTagLists = function() {
var A = function(B) {
TagHelper.tagListClicked(B, TagHelper.loggedInAccountId)
};
$$(".tag-list.make-clickable").each(function(B) {
Event.observe(B, "click", A);
Element.removeClassName(B, "make-clickable")
})
};
TagHelper.setTexts = function(A) {
TagHelper.options = A
};
TagHelper.tagListClicked = function(E) {
var D = Event.element(E);
var B = Element.hasClassName(D, "tag-add-link");
var A = Element.hasClassName(D, "tag-remove-link");
if (B || A) {
var F = Element.up(D, ".tag-list li");
if (!F) {
return
}
var C = TagHelper.findTagNameForContainer(F);
Event.stop(E);
if (B) {
TagHelper.addThisTagToMe(C, true)
} else {
TagHelper.removeThisTagFromMe(C)
}
}
};
TagHelper.findTagNameForContainer = function(A) {
var B = Element.down(A, ".tag");
if (!B) {
return null
}
return B.innerHTML.strip()
};
TagHelper.addThisTagToMe = function(B, C, A) {
if (typeof(A) == "undefined") {
A = {}
}
new Ajax.Request("habblet/tags_ajax.php?key=add", {
parameters: "accountId=" + encodeURIComponent(TagHelper.loggedInAccountId) + "&tagName=" + encodeURIComponent(B),
onSuccess: function(E) {
var D = E.responseText;
if (D == "valid" && C) {
$$(".tag-list li").each(function(F) {
if (TagHelper.findTagNameForContainer(F) == B) {
var H = Element.down(F, ".tag-add-link");
var G = $$(".tag-remove-link").first();
H.title = G ? G.title : "";
H.removeClassName("tag-add-link").addClassName("tag-remove-link")
}
})
} else {
if (D == "taglimit") {
Dialog.showInfoDialog("tag-error-dialog", TagHelper.options.tagLimitText, TagHelper.options.buttonText, null)
} else {
if (D == "invalidtag") {
Dialog.showInfoDialog("tag-error-dialog", TagHelper.options.invalidTagText, TagHelper.options.buttonText, null)
}
}
} if (D == "valid" || D == "") {
if (C) {
TagHelper.reloadMyTagsList()
} else {
TagHelper.reloadSearchBox(B, 1)
} if (typeof(A.onSuccess) == "function") {
A.onSuccess()
}
}
}
})
};
TagHelper.reloadSearchBox = function(A, B) {
if ($("tag-search-habblet-container")) {
new Ajax.Updater($("tag-search-habblet-container"), "/habblet/ajax/tagsearch", {
method: "post",
parameters: "tag=" + A + "&pageNumber=" + B,
evalScripts: true
})
}
};
TagHelper.removeThisTagFromMe = function(A) {
new Ajax.Request("habblet/tags_ajax.php?key=remove", {
parameters: "accountId=" + encodeURIComponent(TagHelper.loggedInAccountId) + "&tagName=" + encodeURIComponent(A),
onSuccess: function(C) {
var B = function(D) {
$$(".tag-list li").each(function(E) {
if (TagHelper.findTagNameForContainer(E) == A) {
var G = Element.down(E, ".tag-remove-link");
var F = $$(".tag-add-link").first();
if (F) {
G.title = F.title || "";
G.removeClassName("tag-remove-link").addClassName("tag-add-link")
}
}
})
};
TagHelper.reloadMyTagsList({
onSuccess: B
})
}
})
};
TagHelper.reloadMyTagsList = function(B) {
var A = {
evalScripts: true
};
Object.extend(A, B);
new Ajax.Updater($("my-tags-list"), "habblet/tags_ajax.php?key=mytagslist", A)
};
TagHelper.matchFriend = function() {
var A = $F("tag-match-friend");
if (A) {
new Ajax.Updater($("tag-match-result"), habboReqPath + "/habblet/ajax/tagmatch", {
parameters: {
friendName: A
},
onComplete: function(D) {
var C = $("tag-match-value");
if (C) {
var B = parseInt(C.innerHTML, 10);
if (typeof TagHelper.CountEffect == "undefined") {
$("tag-match-value-display").innerHTML = B + " %";
Element.show("tag-match-slogan")
} else {
var E;
if (B > 0) {
E = 1.5
} else {
E = 0.1
}
new TagHelper.CountEffect("tag-match-value-display", {
duration: E,
transition: Effect.Transitions.sinoidal,
from: 0,
to: B,
afterFinish: function() {
Effect.Appear("tag-match-slogan", {
duration: 1
})
}
})
}
}
}
})
}
};
var TagFight = Class.create();
TagFight.init = function() {
if ($F("tag1") && $F("tag2")) {
TagFight.start()
} else {
return false
}
};
TagFight.start = function() {
$("fightForm").style.display = "none";
$("tag-fight-button").style.display = "none";
$("fightanimation").src = habboStaticFilePath + "/images/tagfight/tagfight_loop.gif";
$("fight-process").style.display = "block";
setTimeout("TagFight.run()", 3000)
};
TagFight.run = function() {
new Ajax.Updater("fightResults", "habblet/ajax_tagfight.php", {
method: "post",
parameters: "tag1=" + $F("tag1") + "&tag2=" + $F("tag2"),
onComplete: function() {
$("fight-process").style.display = "none";
$("fightForm").style.display = "none";
$("tag-fight-button-new").style.display = "block"
}
})
};
TagFight.newFight = function() {
$("fight-process").style.display = "none";
$("fightForm").style.display = "block";
$("fightResultCount").style.display = "none";
$("tag-fight-button").style.display = "block";
$("tag-fight-button-new").style.display = "none";
$("fightanimation").src = habboStaticFilePath + "/images/tagfight/tagfight_start.gif";
$("tag1").value = "";
$("tag2").value = ""
};
Code:
var GroupUtils = {
validateGroupElements: function(C, A, E) {
var D = $(C);
if (D.value.length >= A) {
D.value = D.value.substring(0, A);
$(C + "_message_error").innerHTML = E;
$(C + "_message_error").style.display = "block"
} else {
$(C + "_message_error").innerHTML = "";
$(C + "_message_error").style.display = "none"
} if ($(C + "-counter")) {
var B = A - D.value.length;
$(C + "-counter").value = B
}
}
};
var GroupPurchase = function() {
var A = null;
var C = null;
var B = function(D) {
Dialog.setAsWaitDialog(A);
new Ajax.Request("habblet/ajax_grouppurchase.php" + D, {
parameters: C,
onComplete: function(F, E) {
Dialog.setDialogBody(A, F.responseText)
}
})
};
return {
open: function() {
A = Dialog.createDialog("group_purchase_form", L10N.get("purchase.group.title"), 9001, 0, -1000, GroupPurchase.close);
Dialog.setAsWaitDialog(A);
Dialog.moveDialogToCenter(A);
Dialog.makeDialogDraggable(A);
Overlay.show();
new Ajax.Request("habblet/ajax_grouppurchase.php", {
onComplete: function(E, D) {
Dialog.setDialogBody(A, E.responseText)
}
})
},
close: function(D) {
if ( !! D) {
Event.stop(D)
}
$("group_purchase_form").remove();
Overlay.hide();
A = null;
C = null
},
confirm: function() {
C = {
name: $F("group_name"),
description: $F("group_description")
};
B("?do=purchase_confirmation")
},
purchase: function() {
B("purchase_ajax")
}
}
}();
When removing scripts/code, you need to becareful, cause if you remove something you shouldn't, everything will break!
- - - Updated - - -
When deleting code that could potentitally break your website, do it in tiny steps, don't go crazy like me and delete everything you see in sight :D
- - - Updated - - -
Ok next step would be for me to review the css/html/images I don't need.
Now this part is a lot more difficult than just deleting scripts because these pieces of code may not be used on any pages that I've worked on so far, but they may be used on others - So this can be time consuming!
This is why you should always comment on your code :D
- - - Updated - - -
A good place to start is to find things what you're deleting, as you can see I've already found lots of information that's critical for me to remove everything regarding groups/tags/etc
http://i.imgur.com/lpEwaba.png
- - - Updated - - -
Don't just delete everything, write down the names of files and folders that you will be deleting, then review the names and files with other files that you think may have used said files
- - - Updated - - -
I hope you guys have been inspired and maybe have learnt something today! :P:
- - - Updated - - -
I have made some changes to the referral/search plugin
The script was fairly pointless for referring a friend, you clicked a button and the textarea appeared. Let's just get straight to the point.
I've made some some CSS changes to search users, as you can see
http://i.imgur.com/JUCthiD.gif
- - - Updated - - -
When turning off referrals, we now get this:
http://i.imgur.com/V3q5Ml4.png
- - - Updated - - -
New icons! I mean (thanks for your contributions :lol:)
http://i.imgur.com/DVxelkW.png
- - - Updated - - -
Frank saves the day
http://i.imgur.com/S9YEdO9.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Habborator has some nice icons.
Small: https://www.habborator.org/archive/nav_1.php
Medium: https://www.habborator.org/archive/nav_2.php
Loving all the work you're doing. Keep it up
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Have to say that this development is activly worked on for weeks now and everytime with new exciting stuff to discover.
Keep it up @Sabbo
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I wanted to showcase this yesterday, but I messed it up.
http://i.imgur.com/ELPCZKj.gif
Interactive staff team page
Showcases all your staff members
Create silly messages to reveal who they are and what they do
Only administrators can modify the page
If the user is in the correct usergroup, they will automatically be added to the staff page, you will just have to align them to how you see fit and add a stickie next to their name (or dont)
This is kind of like a group, but isn't
Administrators will always be in edit mode when browsing forum team
- - - Updated - - -
I may introduce a staff category into the store, so staff members get limited stickers/backgrounds that only they can use for the staff page
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Sabbo
Create silly messages to reveal who they are and what they do
Can everyone edit their own message, or is it just a textbox that needs to be filled in by an admin?
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Joorren
Can everyone edit their own message, or is it just a textbox that needs to be filled in by an admin?
As of right now, the administrator would have to add the messages (or don't), administrators have full control how they showcase their content
- - - Updated - - -
When searching for usernames, you now will be able to see the users formated username (admins get a crown)
CAUSE WHY NOT!
http://i.imgur.com/4gj5aRp.png
- - - Updated - - -
When comparing the 2006 theme/template to the 2009 theme/template, well the 2006 template/theme doesn't even compare to the functionality the 2009 theme/template has, so for today I will be doing the following:
* Creating a copy of current 2009 stylesheets and making a second theme for the 2009 templates.
* I'll be redesinging the 2009 theme to make it look like the 2006 theme while keeping the 2009 template the same. This way both themes get the same functionality, but looking totally different. I believe this is possible without having to changing any of the templates.
This is a good thing because I won't have to be working on 2 separate templates at the same time, which means a faster release and I'll still be releasing a 2006 theme and a 2009 theme as I said I would.
The downfall is that all current work on the 2006 theme/template is kind of redundant, but I can use the work I done so far to reference how I go about theming the 2006 theme.
Feedback is welcome and your input may change the way I do things
- - - Updated - - -
I found this in the revision of holocms I was using, this gives me an idea how 2006 homes looks (mainly the buttons and the store)
http://i.imgur.com/lU0aGMS.png
- - - Updated - - -
This is a development after all, so expect ugly. It gives you an idea how I process things and work through them though.
http://i.imgur.com/seEpUT1.png
- - - Updated - - -
I have 0 modifications to the template, as you can see I was correct to think that it woruld work out :D
- - - Updated - - -
Now it's just a matter of tidying up the header, footer and making the content (plugins) match 2006 theme which should be easy to do!
http://i.imgur.com/ECtcUbA.png
- - - Updated - - -
Compromises:
Header won't be exactly like habbo's 2006 layout
- - - Updated - - -
Once I'm done editing the theme, no one would have ever known the difference :lol:
- - - Updated - - -
Functionality still the same; also stress testing with all those stickers :D
http://i.imgur.com/GKWliMX.gif
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
This header is posing a great challenge for me
http://i.imgur.com/vR9kTUj.png
- - - Updated - - -
Maybe it's just an alignment issue, maybe I just need to spread everything out a little more :?:
- - - Updated - - -
Pretty happy with the results, considering the limitations that have been put on me
I just need to redo buttons, change some colours to the appropriate 2006 theme and I'll probably leave it at that for the time being
Feedback is welcome!
http://i.imgur.com/U1NaBpl.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
As someone who's never touched any kind of forum software before; I'm impressed with how much you've been able to do, and that it's even possible in what seems like a very old platform.
It's cool and unique :thumbup:
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Quote:
Originally Posted by
Konquer
As someone who's never touched any kind of forum software before; I'm impressed with how much you've been able to do, and that it's even possible in what seems like a very old platform.
It's cool and unique :thumbup:
The time I've spent using MYBB I have learnt a lot about the platform and my experience with coding has changed.
The things I dislike about MyBB is how you manage the themes (right now I'm not using the theme manager as it doesn't work for what I want it to do). In a couple of months though MyBB will be releasing 1.9 which will update their themes manager and a couple of other interesting things that I look forward to, hopefully they'll become relevant.
The template manager/plugins are amazing, I wouldn't change anything about them as they work pretty well (as you can see from my development)
The language system is very limiting, the mybb team know this as I've spoken to some of them and they want to overhaul it, which is a good thing.
The system itself is very stable, it's relatively fast, it doesn't slow down and it's secure.
The best thing about MyBB is that it's got an active community and it's FREE! The only limitation is yourself
- - - Updated - - -
I'm sick of trying to find things in this /web-gallery/ so I've made things much simpler and more organised.
I spend more time trying to find a javascript file, it's like playing cat and mouse, is it in /static/js/ or /js/, same with images/v2/styles/blababa
http://i.imgur.com/jrTI9C2.png
- - - Updated - - -
We lost a lot of stylesheets along the way, lets all give a moment of silence
http://i.imgur.com/Ccrq2V0.png
- - - Updated - - -
Assets.css needs work (205KB!!!!)
- - - Updated - - -
Visual.js, libs.js and libs2.js should never be modified
http://i.imgur.com/qHN1KVK.png
- - - Updated - - -
727 of those files are /images/stickers/ lol
http://i.imgur.com/fGUd4jE.png
- - - Updated - - -
Minor adjustment to who's online
http://i.imgur.com/oRelcMD.png
- - - Updated - - -
I would also like to change every .gif or any other terrible format into .png, eventually
- - - Updated - - -
HTML markup needs changing too into..
<header>
<nav>
<main>
<section>
<footer>
- - - Updated - - -
Do I really want to continue supporting internet explorer? IE6? :lol:
- - - Updated - - -
Sorry to those internet explorer users, you no longer are being supported by my project
- - - Updated - - -
I said not to modify visual.js, libs.js and libs2.js, but I am anyway
- - - Updated - - -
The removal van has come back
Code:
if (Prototype.Browser.Opera) {
Element.Methods.getStyle = Element.Methods.getStyle.wrap(function(D, B, C) {
switch (C) {
case "left":
case "top":
case "right":
case "bottom":
if (D(B, "position") === "static") {
return null
}
case "height":
case "width":
if (!Element.visible(B)) {
return null
}
var E = parseInt(D(B, C), 10);
if (E !== B["offset" + C.capitalize()]) {
return E + "px"
}
var A;
if (C === "height") {
A = ["border-top-width", "padding-top", "padding-bottom", "border-bottom-width"]
} else {
A = ["border-left-width", "padding-left", "padding-right", "border-right-width"]
}
return A.inject(E, function(F, G) {
var H = D(B, G);
return H === null ? F : F - parseInt(H, 10)
}) + "px";
default:
return D(B, C)
}
});
Element.Methods.readAttribute = Element.Methods.readAttribute.wrap(function(C, A, B) {
if (B === "title") {
return A.title
}
return C(A, B)
})
} else {
if (Prototype.Browser.IE) {
Element.Methods.getOffsetParent = Element.Methods.getOffsetParent.wrap(function(C, B) {
B = $(B);
var A = B.getStyle("position");
if (A !== "static") {
return C(B)
}
B.setStyle({
position: "relative"
});
var D = C(B);
B.setStyle({
position: A
});
return D
});
$w("positionedOffset viewportOffset").each(function(A) {
Element.Methods[A] = Element.Methods[A].wrap(function(E, C) {
C = $(C);
var B = C.getStyle("position");
if (B !== "static") {
return E(C)
}
var D = C.getOffsetParent();
if (D && D.getStyle("position") === "fixed") {
D.setStyle({
zoom: 1
})
}
C.setStyle({
position: "relative"
});
var F = E(C);
C.setStyle({
position: B
});
return F
})
});
Element.Methods.getStyle = function(A, B) {
A = $(A);
B = (B == "float" || B == "cssFloat") ? "styleFloat" : B.camelize();
var C = A.style[B];
if (!C && A.currentStyle) {
C = A.currentStyle[B]
}
if (B == "opacity") {
if (C = (A.getStyle("filter") || "").match(/alpha\(opacity=(.*)\)/)) {
if (C[1]) {
return parseFloat(C[1]) / 100
}
}
return 1
}
if (C == "auto") {
if ((B == "width" || B == "height") && (A.getStyle("display") != "none")) {
return A["offset" + B.capitalize()] + "px"
}
return null
}
return C
};
Element.Methods.setOpacity = function(B, E) {
function F(G) {
return G.replace(/alpha\([^\)]*\)/gi, "")
}
B = $(B);
var A = B.currentStyle;
if ((A && !A.hasLayout) || (!A && B.style.zoom == "normal")) {
B.style.zoom = 1
}
var D = B.getStyle("filter"),
C = B.style;
if (E == 1 || E === "") {
(D = F(D)) ? C.filter = D: C.removeAttribute("filter");
return B
} else {
if (E < 0.00001) {
E = 0
}
}
C.filter = F(D) + "alpha(opacity=" + (E * 100) + ")";
return B
};
Element._attributeTranslations = {
read: {
names: {
"class": "className",
"for": "htmlFor"
},
values: {
_getAttr: function(A, B) {
return A.getAttribute(B, 2)
},
_getAttrNode: function(A, C) {
var B = A.getAttributeNode(C);
return B ? B.value : ""
},
_getEv: function(A, B) {
B = A.getAttribute(B);
return B ? B.toString().slice(23, -2) : null
},
_flag: function(A, B) {
return $(A).hasAttribute(B) ? B : null
},
style: function(A) {
return A.style.cssText.toLowerCase()
},
title: function(A) {
return A.title
}
}
}
};
Element._attributeTranslations.write = {
names: Object.extend({
cellpadding: "cellPadding",
cellspacing: "cellSpacing"
}, Element._attributeTranslations.read.names),
values: {
checked: function(A, B) {
A.checked = !!B
},
style: function(A, B) {
A.style.cssText = B ? B : ""
}
}
};
Element._attributeTranslations.has = {};
$w("colSpan rowSpan vAlign dateTime accessKey tabIndex encType maxLength readOnly longDesc").each(function(A) {
Element._attributeTranslations.write.names[A.toLowerCase()] = A;
Element._attributeTranslations.has[A.toLowerCase()] = A
});
(function(A) {
Object.extend(A, {
href: A._getAttr,
src: A._getAttr,
type: A._getAttr,
action: A._getAttrNode,
disabled: A._flag,
checked: A._flag,
readonly: A._flag,
multiple: A._flag,
onload: A._getEv,
onunload: A._getEv,
onclick: A._getEv,
ondblclick: A._getEv,
onmousedown: A._getEv,
onmouseup: A._getEv,
onmouseover: A._getEv,
onmousemove: A._getEv,
onmouseout: A._getEv,
onfocus: A._getEv,
onblur: A._getEv,
onkeypress: A._getEv,
onkeydown: A._getEv,
onkeyup: A._getEv,
onsubmit: A._getEv,
onreset: A._getEv,
onselect: A._getEv,
onchange: A._getEv
})
})(Element._attributeTranslations.read.values)
} else {
if (Prototype.Browser.Gecko && /rv:1\.8\.0/.test(navigator.userAgent)) {
Element.Methods.setOpacity = function(A, B) {
A = $(A);
A.style.opacity = (B == 1) ? 0.999999 : (B === "") ? "" : (B < 0.00001) ? 0 : B;
return A
}
} else {
if (Prototype.Browser.WebKit) {
Element.Methods.setOpacity = function(A, B) {
A = $(A);
A.style.opacity = (B == 1 || B === "") ? "" : (B < 0.00001) ? 0 : B;
if (B == 1) {
if (A.tagName == "IMG" && A.width) {
A.width++;
A.width--
} else {
try {
var D = document.createTextNode(" ");
A.appendChild(D);
A.removeChild(D)
} catch (C) {}
}
}
return A
};
Element.Methods.cumulativeOffset = function(B) {
var A = 0,
C = 0;
do {
A += B.offsetTop || 0;
C += B.offsetLeft || 0;
if (B.offsetParent == document.body) {
if (Element.getStyle(B, "position") == "absolute") {
break
}
}
B = B.offsetParent
} while (B);
return Element._returnOffset(C, A)
}
}
}
}
}
if (Prototype.Browser.IE || Prototype.Browser.Opera) {
Element.Methods.update = function(B, C) {
B = $(B);
if (C && C.toElement) {
C = C.toElement()
}
if (Object.isElement(C)) {
return B.update().insert(C)
}
C = Object.toHTML(C);
var A = B.tagName.toUpperCase();
if (A in Element._insertionTranslations.tags) {
$A(B.childNodes).each(function(D) {
B.removeChild(D)
});
Element._getContentFromAnonymousElement(A, C.stripScripts()).each(function(D) {
B.appendChild(D)
})
} else {
B.innerHTML = C.stripScripts()
}
C.evalScripts.bind(C).defer();
return B
}
}
- - - Updated - - -
To be fair, I shouldn't be removing webkit
- - - Updated - - -
Updated SWFOBJECT from v1.5 to 2.3!
- - - Updated - - -
I'm pretty satisifed with the folder structure
A lot of irrelevant code has been removed, which was something I initially planned to do
Markup language, changing imagges from gif to png, sorting out /stickers/ is something I need to do, but is not a priority. The sooner I do them though, the better
- - - Updated - - -
Probably my imagination, but the website seems to load faster :lol:
- - - Updated - - -
No errors when validating the html markup :drool:
http://i.imgur.com/JRTFJ5s.png
- - - Updated - - -
Removing
Code:
<script>var andSoItBegins = (new Date()).getTime();</script>
Not sure why it wasn't removed sooner...
-
1 Attachment(s)
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
We now only have 350 stickers, which is still a crazy amount to catalogue and they're all gifs :lol: :scared:
- - - Updated - - -
If someone wants to convert all of these images into .PNG, feel free to do so! Attachment:
http://i.imgur.com/w3hJHtl.png
- - - Updated - - -
I expect someone to do this for me, as I can't do everything by myself! As an incentive, if this doesn't get completed, I won't be releasing the project :lol:
- - - Updated - - -
Background and widgets in assets.css have been completed. They're all .PNG
Stickers are next, I'll be waiting for them to be zipped :lol:
Code:
div.b_bg_colour_01 {
background-image: url(../images/backgrounds/bg_colour_01.png);
}
div.b_bg_colour_01_pre {
background-image: url(../images/backgrounds/bg_colour_01.png);
}
div.b_bg_colour_08 {
background-image: url(../images/backgrounds/bg_colour_08.png);
}
div.b_bg_colour_08_pre {
background-image: url(../images/backgrounds/bg_colour_08.png);
}
div.b_bg_colour_12 {
background-image: url(../images/backgrounds/bg_colour_12.png);
}
div.b_bg_colour_12_pre {
background-image: url(../images/backgrounds/bg_colour_12.png);
}
div.b_bg_colour_16 {
background-image: url(../images/backgrounds/bg_colour_16.png);
}
div.b_bg_colour_16_pre {
background-image: url(../images/backgrounds/bg_colour_16.png);
}
div.b_bg_pattern_denim {
background-image: url(../images/backgrounds/bg_pattern_denim.png);
}
div.b_bg_pattern_denim_pre {
background-image: url(../images/backgrounds/bg_pattern_denim.png);
}
div.b_bg_pattern_lace {
background-image: url(../images/backgrounds/bg_pattern_lace.png);
}
div.b_bg_pattern_lace_pre {
background-image: url(../images/backgrounds/bg_pattern_lace.png);
}
div.b_bg_pattern_stitched {
background-image: url(../images/backgrounds/bg_pattern_stitched.png);
}
div.b_bg_pattern_stitched_pre {
background-image: url(../images/backgrounds/bg_pattern_stitched.png);
}
div.b_bg_pattern_wood {
background-image: url(../images/backgrounds/bg_pattern_wood.png);
}
div.b_bg_pattern_wood_pre {
background-image: url(../images/backgrounds/bg_pattern_wood.png);
}
div.b_bg_pattern_cork {
background-image: url(../images/backgrounds/bg_pattern_cork.png);
}
div.b_bg_pattern_cork_pre {
background-image: url(../images/backgrounds/bg_pattern_cork.png);
}
div.b_bg_pattern_stone {
background-image: url(../images/backgrounds/bg_pattern_stone.png);
}
div.b_bg_pattern_stone_pre {
background-image: url(../images/backgrounds/bg_pattern_stone.png);
}
div.b_bg_pattern_bricks {
background-image: url(../images/backgrounds/bg_pattern_bricks.png);
}
div.b_bg_pattern_bricks_pre {
background-image: url(../images/backgrounds/bg_pattern_bricks.png);
}
div.b_bg_pattern_ruledpaper {
background-image: url(../images/backgrounds/bg_pattern_ruledpaper.png);
}
div.b_bg_pattern_ruledpaper_pre {
background-image: url(../images/backgrounds/bg_pattern_ruledpaper.png);
}
div.b_bg_pattern_grass {
background-image: url(../images/backgrounds/bg_pattern_grass.png);
}
div.b_bg_pattern_grass_pre {
background-image: url(../images/backgrounds/bg_pattern_grass.png);
}
div.b_bg_pattern_bubbles {
background-image: url(../images/backgrounds/bg_pattern_bubbles.png);
}
div.b_bg_pattern_bubbles_pre {
background-image: url(../images/backgrounds/bg_pattern_bubbles.png);
}
div.b_bg_pattern_bobbaskulls1 {
background-image: url(../images/backgrounds/bg_pattern_bobbaskulls1.png);
}
div.b_bg_pattern_bobbaskulls1_pre {
background-image: url(../images/backgrounds/bg_pattern_bobbaskulls1.png);
}
div.b_bg_pattern_space {
background-image: url(../images/backgrounds/bg_pattern_space.png);
}
div.b_bg_pattern_space_pre {
background-image: url(../images/backgrounds/bg_pattern_space.png);
}
div.b_bg_image_submarine {
background-image: url(../images/backgrounds/bg_image_submarine.png);
}
div.b_bg_image_submarine_pre {
background-image: url(../images/backgrounds/bg_image_submarine.png);
}
div.b_bg_pattern_metal {
background-image: url(../images/backgrounds/metal.png);
}
div.b_bg_pattern_metal2_pre {
background-image: url(../images/backgrounds/metal.png);
}
div.b_bg_pattern_brokenglass {
background-image: url(../images/backgrounds/bg_pattern_brokenglass.png);
}
div.b_bg_pattern_brokenglass_pre {
background-image: url(../images/backgrounds/bg_pattern_brokenglass.png);
}
div.b_bg_pattern_clouds {
background-image: url(../images/backgrounds/bg_pattern_clouds.png);
}
div.b_bg_pattern_clouds_pre {
background-image: url(../images/backgrounds/bg_pattern_clouds.png);
}
div.b_bg_pattern_floral_01 {
background-image: url(../images/backgrounds/bg_pattern_floral_01.png);
}
div.b_bg_pattern_floral_01_pre {
background-image: url(../images/backgrounds/bg_pattern_floral_01.png);
}
div.b_bg_pattern_floral_02 {
background-image: url(../images/backgrounds/bg_pattern_floral_02.png);
}
div.b_bg_pattern_floral_02_pre {
background-image: url(../images/backgrounds/bg_pattern_floral_02.png);
}
div.b_bg_pattern_floral_03 {
background-image: url(../images/backgrounds/bg_pattern_floral_03.png);
}
div.b_bg_pattern_floral_03_pre {
background-image: url(../images/backgrounds/bg_pattern_floral_03.png);
}
div.b_bg_pattern_bulb {
background-image: url(../images/backgrounds/bg_pattern_bulb.png);
}
div.b_bg_pattern_bulb_pre {
background-image: url(../images/backgrounds/bg_pattern_bulb.png);
}
div.b_bg_pattern_cars {
background-image: url(../images/backgrounds/bg_pattern_cars.png);
}
div.b_bg_pattern_cars_pre {
background-image: url(../images/backgrounds/bg_pattern_cars.png);
}
div.b_bg_pattern_carpants {
background-image: url(../images/backgrounds/bg_pattern_carpants.png);
}
div.b_bg_pattern_carpants_pre {
background-image: url(../images/backgrounds/bg_pattern_carpants.png);
}
div.b_bg_pattern_plasto {
background-image: url(../images/backgrounds/bg_pattern_plasto.png);
}
div.b_bg_pattern_plasto_pre {
background-image: url(../images/backgrounds/bg_pattern_plasto.png);
}
div.b_bg_pattern_tinyroom {
background-image: url(../images/backgrounds/bg_pattern_tinyroom.png);
}
div.b_bg_pattern_tinyroom_pre {
background-image: url(../images/backgrounds/bg_pattern_tinyroom.png);
}
div.b_bg_pattern_hearts {
background-image: url(../images/backgrounds/bg_pattern_hearts.png);
}
div.b_bg_pattern_hearts_pre {
background-image: url(../images/backgrounds/bg_pattern_hearts.png);
}
div.b_bg_pattern_abstract {
background-image: url(../images/backgrounds/bg_pattern_abstract.png);
}
div.b_bg_pattern_abstract_pre {
background-image: url(../images/backgrounds/bg_pattern_abstract.png);
}
div.b_bg_pattern_tile {
background-image: url(../images/backgrounds/bg_pattern_tile.png);
}
div.b_bg_pattern_tile_pre {
background-image: url(../images/backgrounds/bg_pattern_tile.png);
}
div.b_bg_pattern_fish {
background-image: url(../images/backgrounds/bg_pattern_fish.png);
}
div.b_bg_pattern_fish_pre {
background-image: url(../images/backgrounds/bg_pattern_fish.png);
}
div.b_bg_pattern_deepred {
background-image: url(../images/backgrounds/bg_pattern_deepred.png);
}
div.b_bg_pattern_deepred_pre {
background-image: url(../images/backgrounds/bg_pattern_deepred.png);
}
div.b_bg_colour_02 {
background-image: url(../images/backgrounds/bg_colour_02.png);
}
div.b_bg_colour_02_pre {
background-image: url(../images/backgrounds/bg_colour_02.png);
}
div.b_bg_colour_03 {
background-image: url(../images/backgrounds/bg_colour_03.png);
}
div.b_bg_colour_03_pre {
background-image: url(../images/backgrounds/bg_colour_03.png);
}
div.b_bg_colour_04 {
background-image: url(../images/backgrounds/bg_colour_04.png);
}
div.b_bg_colour_04_pre {
background-image: url(../images/backgrounds/bg_colour_04.png);
}
div.b_bg_colour_05 {
background-image: url(../images/backgrounds/bg_colour_05.png);
}
div.b_bg_colour_05_pre {
background-image: url(../images/backgrounds/bg_colour_05.png);
}
div.b_bg_colour_06 {
background-image: url(../images/backgrounds/bg_colour_06.png);
}
div.b_bg_colour_06_pre {
background-image: url(../images/backgrounds/bg_colour_06.png);
}
div.b_bg_colour_07 {
background-image: url(../images/backgrounds/bg_colour_07.png);
}
div.b_bg_colour_07_pre {
background-image: url(../images/backgrounds/bg_colour_07.png);
}
div.b_bg_colour_09 {
background-image: url(../images/backgrounds/bg_colour_09.png);
}
div.b_bg_colour_09_pre {
background-image: url(../images/backgrounds/bg_colour_09.png);
}
div.b_bg_colour_10 {
background-image: url(../images/backgrounds/bg_colour_10.png);
}
div.b_bg_colour_10_pre {
background-image: url(../images/backgrounds/bg_colour_10.png);
}
div.b_bg_colour_11 {
background-image: url(../images/backgrounds/bg_colour_11.png);
}
div.b_bg_colour_11_pre {
background-image: url(../images/backgrounds/bg_colour_11.png);
}
div.b_bg_colour_13 {
background-image: url(../images/backgrounds/bg_colour_13.png);
}
div.b_bg_colour_13_pre {
background-image: url(../images/backgrounds/bg_colour_13.png);
}
div.b_bg_colour_14 {
background-image: url(../images/backgrounds/bg_colour_14.png);
}
div.b_bg_colour_14_pre {
background-image: url(../images/backgrounds/bg_colour_14.png);
}
div.b_bg_colour_15 {
background-image: url(../images/backgrounds/bg_colour_15.png);
}
div.b_bg_colour_15_pre {
background-image: url(../images/backgrounds/bg_colour_15.png);
}
div.b_bg_colour_17 {
background-image: url(../images/backgrounds/bg_colour_17.png);
}
div.b_bg_colour_17_pre {
background-image: url(../images/backgrounds/bg_colour_17.png);
}
div.b_bg_pattern_rose {
background-image: url(../images/backgrounds/bg_pattern_rose.png);
}
div.b_bg_pattern_rosepre {
background-image: url(../images/backgrounds/bg_pattern_rose.png);
}
div.b_bg_pattern_skull {
background-image: url(../images/backgrounds/bg_pattern_skull.png);
}
div.b_bg_pattern_skull_pre {
background-image: url(../images/backgrounds/bg_pattern_skull.png);
}
div.b_bg_pattern_goth {
background-image: url(../images/backgrounds/bg_pattern_goth.png);
}
div.b_bg_pattern_goth_pre {
background-image: url(../images/backgrounds/goth_pattern.png);
}
div.b_bg_pattern_hcmachine {
background-image: url(../images/backgrounds/bg_pattern_HCmachine.png);
}
div.b_bg_pattern_hcmachine_pre {
background-image: url(../images/backgrounds/bg_pattern_HCmachine.png);
}
div.b_bg_pattern_hcpillow {
background-image: url(../images/backgrounds/bg_pattern_HCpillow.png);
}
div.b_bg_pattern_hcpillow_pre {
background-image: url(../images/backgrounds/bg_pattern_HCpillow.png);
}
div.b_bg_pattern_hcroyal {
background-image: url(../images/backgrounds/bg_pattern_HCroyal.png);
}
div.b_bg_pattern_hcroyal_pre {
background-image: url(../images/backgrounds/bg_pattern_HCroyal.png);
}
div.b_bg_pattern_xmas {
background-image: url(../images/backgrounds/bg_pattern_xmas.png);
}
div.b_bg_pattern_xmas_pre {
background-image: url(../images/backgrounds/bg_pattern_xmas.png);
}
div.b_bg_image_fireworks {
background-image: url(../images/backgrounds/bg_image_fireworks.png);
}
div.b_bg_image_fireworks_pre {
background-image: url(../images/backgrounds/bg_image_fireworks.png);
}
div.b_bg_image_tutorial {
background-image: url(../images/backgrounds/bg_image_tutorial.png);
}
div.b_bg_image_tutorial_pre {
background-image: url(../images/backgrounds/bg_image_tutorial.png);
}
div.b_bg_image_grouptutorial {
background-image: url(../images/backgrounds/bg_image_grouptutorial.png);
}
div.b_bg_image_grouptutorial_pre {
background-image: url(../images/backgrounds/bg_image_grouptutorial.png);
}
div.b_bg_pattern_rain {
background-image: url(../images/backgrounds/bg_pattern_rain.png);
}
div.b_bg_pattern_rain_pre {
background-image: url(../images/backgrounds/bg_pattern_rain.png);
}
div.b_bg_image_groups {
background-image: url(../images/backgrounds/bg_image_groups.png);
}
div.b_bg_image_groups_pre {
background-image: url(../images/backgrounds/bg_image_groups.png);
}
div.b_bg_pattern_exec {
background-image: url(../images/backgrounds/bg_pattern_exec.png);
}
div.b_bg_pattern_exec_pre {
background-image: url(../images/backgrounds/bg_pattern_exec.png);
}
div.b_bg_image_x {
background-image: url(../images/backgrounds/bg_image_x.png);
}
div.b_bg_image_x_pre {
background-image: url(../images/backgrounds/bg_image_x.png);
}
div.b_bg_image_toolbar {
background-image: url(../images/backgrounds/bg_image_toolbar.png);
}
div.b_bg_image_toolbar_pre {
background-image: url(../images/backgrounds/bg_image_toolbar.png);
}
div.b_bg_image_inked_inked {
background-image: url(../images/backgrounds/bg_image_inked.png);
}
div.b_bg_image_inked_pre {
background-image: url(../images/backgrounds/bg_image_inked.png);
}
div.b_bg_image_guidesgroup {
background-image: url(../images/backgrounds/bg_image_guidesgroup.png);
}
div.b_bg_image_guidesgroup_pre {
background-image: url(../images/backgrounds/bg_image_guidesgroup.png);
}
div.b_bg_image_chalkboard {
background-image: url(../images/backgrounds/bg_image_chalkboard.png);
}
div.b_bg_image_chalkboard_pre {
background-image: url(../images/backgrounds/bg_image_chalkboard.png);
}
div.w_highscoreswidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/hiscores_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_profilewidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/profilewidget.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_friendswidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/friends_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_roomswidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/rooms_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_guestbookwidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/guestbook_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_groupinfowidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/groupinfowidget.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_groupswidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/groupswidget.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_memberwidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/member_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_ratingwidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/rating_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_traxplayerwidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/trax_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_highscorelistwidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/highscorelistwidget.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_userexpswidget_pre {
background-image: url(../images/../web-gallery/images/myhabbo/widgets/hiscores_preview.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
div.w_badgeswidget_pre {
background-image:url(../images/../web-gallery/images/myhabbo/widgets/badges_preview.png);
background-repeat:no-repeat;
background-position:50% 50%;
}
div.w_movieswidget_pre {
background-image:url(../images/../web-gallery/images/myhabbo/widgets/movies_preview.png);
background-repeat:no-repeat;
background-position:50% 50%;
}
- - - Updated - - -
You're probably wondering why we have the same information twice, I'm wondering the same thing too :lol:
_pre is for preview and the other is for the inventory. Do we really need _pre? Sadly yes
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Very basic account settings page, may revise it more in the future
http://i.imgur.com/bBlYlDu.png
- - - Updated - - -
Plenty of work needed to be done with this theme, but here is account settings using the 2006 theme
http://i.imgur.com/VfD4xxI.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Development is going great, thread hasn't been active for past couple of days.
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
I have been neglecting this thread, here's something
http://i.imgur.com/In3RLcr.png
Explanation:
Inside MyBB there is an option that allows you to promote users with certain requirements, when these requirements are met, they will be promoted. If no promotions are active, then active campaigns will not showcase on index.php. All I have done is implemented hot campaigns with MyBB's promotion manager. Very cool feature and makes hot campaigns relevant and no longer static information.
- - - Updated - - -
http://i.imgur.com/8qYYpGL.png
-
Re: Remaster 2006 Habbo Layout [release][work-in-progress]
Here is a visual example how campaigns/referrals/search users work for those who don't like to read
http://i.imgur.com/PhBYydR.gif
- - - Updated - - -
If you want to remove search users and the other tabs entirely, you would deactive it's plugin
- - - Updated - - -
I will no longer be posting development updates on this thread, as this threads purpose was to release a 2006 remaster of the original 2006 template which I succeeded in doing. The development with MyBB, well I would consider it spam as it's not relevant to the opening post.
I did request for this thread to be moved to development forum (earlier on in development) but it got ignored. Which is fine, it doesn't matter now
Whether I make a development thread in the future is whatever. Thanks for supporting this project thus far with likes and questions
