Custom Remaster 2006 Habbo Layout [release][work-in-progress]

Sabbo · Apr 2, 2019

Latest Revision:

ajm3nql - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

You must be registered to see links

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:

[LEFT][COLOR=#222222]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;}

[/COLOR][/LEFT]
[LEFT]

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";
  }
 }
}

[/LEFT]

The General · Apr 3, 2019

Waybackmachine

Emily · Apr 3, 2019

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.

Sabbo · Apr 3, 2019

The General said:
Waybackmachine

Emily said:
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

Laynester · Apr 5, 2019

if you need help, i’ve already recreated this in css, using none of the original images

Sabbo · Apr 6, 2019

Laynester said:
if you need help, i’ve already recreated this in css, using none of the original images

Feel free to contribute on however you see fit

Revision 8:

You must be registered to see links

(contains images)

Refer back to the latest post to see if it's on a later revision

Sabbo · Apr 18, 2019

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

Cw5Ag0P - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

Gx1JRYb - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

I will not be compromising on any features that MyBB has and will eventually release everything in 1 entity.

Laynester · Apr 18, 2019

Sabbo said:
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

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.

Sabbo · Apr 18, 2019

Laynester said:
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

Sabbo · Apr 18, 2019

dJmmWuU - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

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;
}

Sabbo · Apr 20, 2019

SDlqKe5 - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

So, I finished with the Navigation Templates and started messing around with the Forum Bit templates. Feedback is welcome

Sabbo · Apr 20, 2019

9KIo0ZV - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

Did some tweaking with the padding, it wasn't correctly aligned!

ylrIl3K - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

Forum Display, work in proggress

Update

Originally I was using this image:

D9lSmh7 - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

I did some tweaking and recreated the animation into this image:

WdfOxO3 - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

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

6BYiO1Q - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

Decided to enable everything on the website and this is the result, so crazy!

ukpqc3M - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

This is how the MyBB theme/template originally looks, crazy how much has changed in such short time span!

Feedback is welcome!

Sabbo · Apr 21, 2019

6zkaZtj - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

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

Sabbo · Apr 21, 2019

iAVzcsU - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

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>

Sabbo · Apr 22, 2019

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!

RSX3GAS - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

vMvVYjM - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

PHP:

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

The General · Apr 22, 2019

Would you be able to make it work with Arcturus? If you have questions feel free to message me.

Sabbo · Apr 23, 2019

The General said:
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)

I believe these changes would make it compatible with MyBB!

Ah, it feels like it was only yesterday that I started this project

Old

New

ZgQPnmw - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

Sabbo · Apr 24, 2019

1 whole day has past and I haven't posted anything...

Feedback is welcome

0MbTYLQ - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

YFwyMle - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

cF27JIB - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

PuAspJq - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

m.tiago · Apr 24, 2019

Please think about change the squares to the original boxes borders

Sabbo · Apr 25, 2019

m.tiago said:
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

eMphCdr - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

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;
}

eUMDv7L - Remaster 2006 Habbo Layout [release][work-in-progress] - RaGEZONE Forums

Changed some of the css to fix alignment issues
Showcasing some templates (error, error_inline, error_nopermission_loggedin, global_bannedwarning and others)

Welcome!

Custom Remaster 2006 Habbo Layout [release][work-in-progress]

Newbie Spellweaver

Attachments

Developer

Custom Title Activated

Newbie Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Attachments

Newbie Spellweaver

Attachments

Newbie Spellweaver

Newbie Spellweaver

Attachments

Newbie Spellweaver

Attachments

Newbie Spellweaver

Attachments

Newbie Spellweaver

Attachments

Newbie Spellweaver

Attachments

Newbie Spellweaver

Attachments

Developer

Newbie Spellweaver

Attachments

Newbie Spellweaver

Attachments

Skilled Illusionist

Newbie Spellweaver

Attachments

About Us

Online statistics

Forum statistics

RaGEZONE Sponsor