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

Page 1 of 6 123456 LastLast
Results 1 to 15 of 85
  1. #1
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

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

    Latest Revision:


    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";
      }
     }
    }
    Last edited by Sabbo; 10-04-19 at 08:40 PM. Reason: Revision 9


  2. #2
    Check http://arcturus.pw The General is offline
    DeveloperRank
    Aug 2011 Join Date
    7,607Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]

    Waybackmachine

  3. #3
    Alpha Member Emily is offline
    MemberRank
    Oct 2012 Join Date
    The NetherlandsLocation
    2,408Posts

    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.

  4. #4
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]

    Quote Originally Posted by The General View Post
    Waybackmachine
    Quote Originally Posted by Emily View Post
    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

  5. #5
    Enthusiast Laynester is offline
    MemberRank
    Nov 2018 Join Date
    37Posts

    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

  6. #6
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]

    Quote Originally Posted by Laynester View Post
    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

  7. #7
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    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





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

  8. #8
    Enthusiast Laynester is offline
    MemberRank
    Nov 2018 Join Date
    37Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]

    Quote Originally Posted by Sabbo View Post
    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.


    Sent from my iPhone using Tapatalk

  9. #9
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]

    Quote Originally Posted by Laynester View Post
    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

  10. #10
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]



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


  11. #11
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]



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

  12. #12
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]



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



    Forum Display, work in proggress

    Update

    Originally I was using this image:



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



    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


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


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

    Feedback is welcome!

    Last edited by Sabbo; 20-04-19 at 08:44 PM. Reason: Crazy notes

  13. #13
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]



    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

  14. #14
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    Re: Remaster 2006 Habbo Layout [release][work-in-progress]



    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>
    Last edited by Sabbo; 21-04-19 at 07:33 PM. Reason: Update

  15. #15
    Account Upgraded | Title Enabled! Sabbo is offline
    MemberRank
    Mar 2007 Join Date
    163Posts

    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!




    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'] == || $permissions[$i]['canviewthreads'] == ))
      {
       
    $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'));
    }
    ?>




Page 1 of 6 123456 LastLast

Advertisement