1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Making a XenForo PAGE from PHP/HTML?

Discussion in 'Styling and Customization Questions' started by MichaelCS, Dec 8, 2014.

  1. MichaelCS

    MichaelCS Member

    I'm looking to integrate something in to the site that I've been working on. Can the code below be added to a page? The Stylesheet information isn't important since I am assuming that the site itself would provide that through the XenForo page system but the rest?

    Code:
    <!doctype html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>MWO - Quirks - v1.3.349(pdf) - Nov. 4th, 2014</title>
    <style>
    body {
       background-color:#222;
       background-image: url('https://static.mwomercs.com/img/theme/newsbg.jpg');
       color:#eee;
       font-family: Helvetica,Arial;
       font-weight: 300;
       font-size:13px;
       line-height:1.2em;
    }
    a {
       color:#fda;
       text-decoration:none;
    }
    a:hover {
       color:#fda;
       text-decoration:underline;
    }
    .page {
       min-width:360px;
       width:25%;
       max-width:650px;
       float:left;
       margin:10px 0;
       padding:0;
       clear:right;
    }
    span {
       display:block;
       width:68%;
       overflow:hidden ;
    }
    span.note{
       text-indent:10px;
       font-size:80%;
       color:#999;
    }
    span.move{
       color:#6a6;
    }
    span.armor{
       color:#66a;
    }
    span.special{
       color:#f66;
    }
    span:hover{
       background-color:#222;
       color:#fff;
    }
    em{
       float:right;
    }
    img{
       float:right;
       bottom:15px;
       right:-5px;
       position:absolute;
       max-height:100%;
    }
    .page div, .box{
       position:relative;
       min-height:15px;
       background-color:#000;
       background-color:rgba(0,0,0,.7);
       padding:0 0 10px 10px;
       border:1px solid #ccc;
       margin:0 10px 15px 10px;
    }
    .page div div {
       background:none;
       border:none;
       padding:0;
    }
    h2 {
       float:left;
       margin-left:10px;
    }
    h4 {
       margin:10px 0 0 0;
    }
    button {
       color:#eee;
       background-color:#333;
       border:1px solid #666;
       width:60px;
       padding:3px;
       margin:10px 10px 0 0;
       float:right;
    }
    .dull {
       opacity:.1;
    }
    .dull:hover {
       opacity:1;
    }
    hr{
       border:none;
       border-bottom:1px solid #999;
    }
    .right{
       float:right;
    }
    .left{
       float:left;
    }
    .center{
       text-align:center;
    }
    .w25 {
       width:25%;
       min-width:350px;
    }
    label {
       width:300px;
       display:block;
    }
    label input {
       width:200px;
       height:17px;
       float:right;
       padding:1px;
       border:none;
       border-bottom:1px solid #666;
       background-color:#111;
       color:#eee;
    }
    form button {
       width:25px;
       height:20px;
       padding:0;
       margin:0 15px;
       font-size:11px;
    }
    @media (min-width: 751px) and (max-width: 1500px) {
       .page {width:50%;}
    }
    @media (max-width: 750px) {
       .page {width:100%;}
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
       $(".page div div").hide();
       $(".page div").click(function() {$(this).find('div').slideToggle(100)});
       //$("input[type='text']").keyup(function() {if (timerID>0) {clearTimeout(timerID);timerID=0;}; timerID = setTimeout(filter_list,1000,$(this).attr('name'),$(this).val())}).blur(function() {$(this).keyup()});
       $("input[type='text']").keyup(function() {if (timerID>0) {clearTimeout(timerID);timerID=0;}; timerID = setTimeout('filter_list("'+$(this).attr('name')+'","'+$(this).val()+'")',1000)}).blur(function() {$(this).keyup()});
    });
    var timerID = 0;
    var lastFilter = "";
    function filter_list(typ,value){
       timerID = 0;
       if (value==lastFilter){
         return;
       }
       if (value=="") {
         $(".page div").show();
         return;
       }
       lastFilter = value;
       $(".page div").hide();
       if (typ=='mf') {
         var values = value.toLowerCase().split(' ');
         $(".page > div").filter(function(){return _findIn(values, $(this).find('h3').html());}).show();
       } else {
         var values = value.toLowerCase().split(',');
         $(".page > div").filter(function(){return _findIn(values, $(this).find('div').html());}).show();
       }
    }
    
    function _findIn(vals,match){
       match = match.toLowerCase();
       for(var i=0;i<vals.length;i++){
         if (vals[i]!="" && match.indexOf(vals[i]) != -1){
           return true;
         }
       }
       return false;
    }
    </script>
    </head>
    <body>
    <div class="center"><a href="https://www.mechspecs.com">-- RETURN TO MECHSPECS --</a></div>
    
    <form name="filter">
       <div class="box left w25">
         <h4>Filter:</h4>
         <br><label>Mech: <input type="text" name="mf"></label>
         <br><label>Quirk: <input type="text" name="qf"></label>
         <br>
       </div>
    </form>
    
    <br clear="all">
    <div class="page"><h2>LIGHT</h2>
    <button onClick="$(this).siblings('div').find('div').show()">show</button>
    <button onClick="$(this).siblings('div').find('div').hide()">hide</button>
    <br clear="all"><br>
    <div><h3>LCT-1E</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-1e.png" /><div>
    <span class="armor">Armor Strength L/R Arm<em>50%</em></span>
    <span class="armor">Additional Structure L/R Leg<em>8</em></span>
    <span>Small Laser Heat Generation<em>-20%</em></span>
    <span class="note">Energy Weapon Heat Generation<em>-10%</em></span>
    <span>Small Laser Range<em>60%</em></span>
    <span class="note">Energy Weapon Range<em>30%</em></span>
    <span class="move">Acceleration<em>25%</em></span>
    <span class="move">Deceleration<em>50%</em></span>
    </div></div>
    <div><h3>LCT-1M</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-1m.png" /><div>
    <span class="armor">Armor Strength L/R Arm<em>50%</em></span>
    <span class="armor">Additional Structure L/R Leg<em>8</em></span>
    <span>Medium Laser Cooldown<em>25%</em></span>
    <span class="note">Energy Weapon Cooldown<em>12.5%</em></span>
    <span>Medium Laser Heat Generation<em>-25%</em></span>
    <span class="note">Energy Weapon Heat Generation<em>-12.5%</em></span>
    <span>Medium Laser Range<em>25%</em></span>
    <span class="note">Energy Weapon Range<em>12.5%</em></span>
    <span>Missile Weapon Cooldown<em>15%</em></span>
    <span>Missile Weapon Heat Generation<em>-15%</em></span>
    <span class="move">Acceleration<em>25%</em></span>
    <span class="move">Deceleration<em>50%</em></span>
    </div></div>
    <div><h3>LCT-1V</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-1v.png" /><div>
    <span class="armor">Armor Strength L/R Arm<em>50%</em></span>
    <span class="armor">Additional Structure L/R Leg<em>8</em></span>
    <span>Ballistic Weapon Range<em>15%</em></span>
    <span>ER-Large Laser Cooldown<em>50%</em></span>
    <span class="note">Energy Weapon Cooldown<em>25%</em></span>
    <span>Energy Weapon Range<em>15%</em></span>
    <span>ER-Large Laser Duration<em>-25%</em></span>
    <span class="note">Laser Duration<em>-12.5%</em></span>
    <span class="move">Acceleration<em>25%</em></span>
    <span class="move">Deceleration<em>50%</em></span>
    </div></div>
    <div><h3>LCT-1V(P)</h3><div>
    <span class="armor">Armor Strength L/R Arm<em>50%</em></span>
    <span class="armor">Additional Structure L/R Leg<em>8</em></span>
    <span>Ballistic Weapon Range<em>15%</em></span>
    <span>ER-Large Laser Cooldown<em>50%</em></span>
    <span class="note">Energy Weapon Cooldown<em>25%</em></span>
    <span>Energy Weapon Range<em>15%</em></span>
    <span>ER-Large Laser Duration<em>-25%</em></span>
    <span class="note">Laser Duration<em>-12.5%</em></span>
    <span class="move">Acceleration<em>25%</em></span>
    <span class="move">Deceleration<em>50%</em></span>
    </div></div>
    <div><h3>LCT-3M</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-3m.png" /><div>
    <span class="armor">Armor Strength L/R Arm<em>50%</em></span>
    <span class="armor">Additional Structure L/R Leg<em>8</em></span>
    <span>Small Pulse Laser Cooldown<em>20%</em></span>
    <span class="note">Energy Weapon Cooldown<em>10%</em></span>
    <span>Small Pulse Laser Range<em>60%</em></span>
    <span class="note">Energy Weapon Range<em>30%</em></span>
    <span class="move">Acceleration<em>25%</em></span>
    <span class="move">Deceleration<em>50%</em></span>
    </div></div>
    <div><h3>LCT-3S</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-3s.png" /><div>
    <span class="armor">Armor Strength L/R Arm<em>50%</em></span>
    <span class="armor">Additional Structure L/R Leg<em>8</em></span>
    <span>Medium Laser Cooldown<em>25%</em></span>
    <span class="note">Energy Weapon Cooldown<em>12.5%</em></span>
    <span>Medium Laser Range<em>25%</em></span>
    <span class="note">Energy Weapon Range<em>12.5%</em></span>
    <span>Missile Weapon Cooldown<em>15%</em></span>
    <span>Missile Weapon Range<em>30%</em></span>
    <span class="move">Acceleration<em>25%</em></span>
    <span class="move">Deceleration<em>50%</em></span>
    </div></div>
    <div><h3>COM-1B</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-1b.png" /><div>
    <span class="armor">Additional Structure L/R Leg<em>6</em></span>
    <span>Medium Laser Cooldown<em>20%</em></span>
    <span class="note">Energy Weapon Cooldown<em>10%</em></span>
    <span>Energy Weapon Heat Generation<em>-12.5%</em></span>
    <span>Large Laser Range<em>20%</em></span>
    <span class="note">Energy Weapon Range<em>10%</em></span>
    <span>Medium Laser Duration<em>-20%</em></span>
    <span class="note">Laser Duration<em>-10%</em></span>
    <span class="move">Reverse Speed<em>12.6%</em></span>
    <span class="move">Turn Rate<em>10%</em></span>
    </div></div>
    <div><h3>COM-1D</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-1d.png" /><div>
    <span class="armor">Additional Structure L/R Leg<em>6</em></span>
    <span>Medium Pulse Laser Cooldown<em>20%</em></span>
    <span class="note">Energy Weapon Cooldown<em>10%</em></span>
    <span>Medium Pulse Laser Range<em>40%</em></span>
    <span class="note">Energy Weapon Range<em>20%</em></span>
    <span>Missile Weapon Range<em>12.5%</em></span>
    <span class="move">Reverse Speed<em>12.6%</em></span>
    <span class="move">Turn Rate<em>10%</em></span>
    </div></div>
    <div><h3>COM-2D</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-2d.png" /><div>
    <span class="armor">Additional Structure L/R Leg<em>6</em></span>
    <span>SRM/4 Cooldown<em>15%</em></span>
    <span class="note">Missile Weapon Cooldown<em>7.5%</em></span>
    <span>SRM/4 Range<em>15%</em></span>
    <span class="note">Missile Weapon Range<em>7.5%</em></span>
    </div></div>
    <div><h3>COM-3A</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-3a.png" /><div>
    <span class="armor">Additional Structure L/R Leg<em>6</em></span>
    <span>Energy Weapon Cooldown<em>12.5%</em></span>
    <span>SRM/6 Cooldown<em>20%</em></span>
    <span class="note">Missile Weapon Cooldown<em>10%</em></span>
    <span>SRM/6 Heat Generation<em>-20%</em></span>
    <span class="note">Missile Weapon Heat Generation<em>-10%</em></span>
    <span>SRM/6 Range<em>20%</em></span>
    <span class="note">Missile Weapon Range<em>10%</em></span>
    <span class="move">Reverse Speed<em>12.6%</em></span>
    <span class="move">Turn Rate<em>10%</em></span>
    </div></div>
    <div><h3>COM-TDK</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-tdk.png" /><div>
    <span class="armor">Additional Structure L/R Leg<em>6</em></span>
    <span>Energy Weapon Heat Generation<em>-10%</em></span>
    <span>Energy Weapon Range<em>10%</em></span>
    <span>Laser Duration<em>-10%</em></span>
    </div></div>
    </body></html>
    
    + A LOT MORE CODE THAT I SNIPPED. JUST DUPLICATES OF THE STOP STUFF
    
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You don't need any of the doctype, head, meta stuff, etc.

    Literally just any script code, html and css.
     
  3. MichaelCS

    MichaelCS Member

    It's having an issue with this line...

    Code:
      $(".page div").click(function() {$(this).find('div').slideToggle(100)});
    
    Template HTML:
    Line 146: Template syntax error.
     
  4. Ian S

    Ian S Active Member

    i would like to do this but dont you need a templates too wont you?
     
    Last edited: Dec 16, 2014

Share This Page