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'));
}?>
