How to wrap XenForo forum in to a different php page?

Cryptaline

Active member
Hi,

I'm looking for an advice or already existing guide to wrap my awesome xenforo forum with additional html/php page. What do i need:

An example, how it will look like? Lets say that i have already my additional php page specially designed for xenforo input, e.g:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
      <TITLE>My additional php page for forum input</TITLE>
      <link rel="stylesheet" href="additional-php-page-style.css" type="text/css" />
  </HEAD>
  <BODY>
      <div>I want to palce XenForo within this div tag</div>
  </BODY>
</HTML>

Which part of the XenForo forum i will need to edit to wrap it in to this page? Do i need to edit only index.php from the main directory?

Code:
/data
/install
/internal_data
/js
/library
/styles
.htaccess
index.php
 
and all other files.

Or i will need to edit some additional files aswell for example PAGE_CONTAINER?
And how it will look like?


Especially if i will need to edit only a PAGE_CONTAINER i would like to know how to isert forum blocks like

<!-- main template -->
{xen:raw $contents}

<xen:include template="ad_below_content" />

<xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
<!-- login form, to be moved to the upper drop-down -->
<xen:include template="login_bar_form" />
</xen:if>

etc.
Will apreciate any tip you have :)
 
Right now im playing with PAGE_CONTAINER, trying to understand how is better to put my divs in here. I'm not quite familar with listeners atm. Is it ok to edit only the PAGE_CONTAINER without anything else?
 
Is it ok to edit only the PAGE_CONTAINER without anything else?

Yep.

The appeal of using a template hook is that you don't have to customize the template itself. Custom templates can add extra consideration when you upgrade XenForo. If a XenForo update contains required changes to that template then you will need to manually apply those changes, or revert and recustomize the template when you upgrade.
 
Probably question for Jake Bunce :)

I have my awesome XenForo forum which look like this:
8a7dfS96FA.webp
And i have my own awesome pure html template which look like this:
98A6SF9AS.webp

I need to wrap my awesome XenForo forum in to my awesome template to achive this:
ADSA07AG0DG.webp
Right now i ve done this with iframe tag (but this way suck 100%)

The question/problem is that my own html template is already using custom css file and it includes some properties for body, ul's, li's etc. Plus i don't want to cut my PAGE_CONTAINER on billion of parts. Whats the proper way to wrap forum body in the PAGE_CONTAINER which look like this:

Code:
<!DOCTYPE html>
<html id="XenForo" lang="{$visitorLanguage.language_code}" dir="{$visitorLanguage.text_direction}" class="Public {xen:if {$visitor.user_id}, 'LoggedIn', 'LoggedOut'} {xen:if {$sidebar}, 'Sidebar', 'NoSidebar'}" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<xen:hook name="page_container_head">
    <meta charset="utf-8" />
    <xen:if is="{$requestPaths.fullBasePath}">
        <base href="{$requestPaths.fullBasePath}" />
        <script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
            var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
            if (_b && _b.href != _bH) _b.href = _bH;
        </script>
    </xen:if>
 
    <title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>
   
    <noscript><style>.JsOnly { display: none !important; }</style></noscript>
    <link rel="stylesheet" type="text/css" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;d={$visitorStyle.last_modified_date}" />
    <!--XenForo_Require:CSS-->
    {xen:helper ignoredCss, {$visitor.ignoredUsers}}
 
    <xen:include template="google_analytics" />
    <xen:include template="page_container_js_head" />
   
    <xen:if is="@adStyler">
    <!-- Start styleBar head -->
    <script src="{$javaScriptSource}/ad_styler/1.0/styles/class/settings.js"></script>
    <link rel="stylesheet" id="sbcss" href="{$javaScriptSource}/ad_styler/1.0/styles/class/css.php" />
    <script src="{$javaScriptSource}/ad_styler/1.0/jquery.styleBar.min.js"></script>
    <script>
        if ( Storage.get( sb_settings[3] + 'href' ) )
            document.getElementById( 'sbcss' )
                .setAttribute( 'href', Storage.get( sb_settings[3] + 'href' ) );
        ( function( h,c ) {
            h[c] = h[c].replace( /\bno-js\b/, '' );
        } )( document.documentElement, 'className' );
    </script>
    <link rel="stylesheet" href="{$javaScriptSource}/ad_styler/1.0/css/styleBar.css" />
    <!-- End styleBar head -->
    </xen:if>
 
    <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
    <xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
    <xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
</xen:hook>
</head>
 
<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>
<xen:if is="@adStyler"><xen:include template="ad_styler" /></xen:if>
 
<xen:hook name="body">
 
<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
    <xen:include template="moderator_bar" />
<xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
    <xen:include template="login_bar" />
</xen:if>
 
<div id="headerMover">
    <div id="headerProxy"></div>
 
<div id="content" class="{$contentTemplate}">
    <div class="pageWidth">
        <div class="pageContent">
            <!-- main content area -->
           
            <xen:hook name="page_container_content_top" />
           
            <xen:include template="ad_above_top_breadcrumb" />
                       
            <xen:hook name="page_container_breadcrumb_top">
            <div class="breadBoxTop">
                <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
            </div>
            </xen:hook>
           
            <xen:include template="ad_below_top_breadcrumb" />
           
            <xen:hook name="page_container_notices">
            <xen:include template="notices" />                       
            </xen:hook>
 
            <xen:if is="{$sidebar}">
                <div class="mainContainer">
                    <div class="mainContent"></xen:if>
                       
                        <xen:hook name="page_container_content_title_bar">
                        <xen:if is="!{$noH1}">                       
                            <!-- h1 title, description -->
                            <div class="titleBar">
                                {xen:raw $beforeH1}
                                <h1><xen:if
                                    is="{$h1}">{xen:raw $h1}<xen:elseif
                                    is="{$title}" />{xen:raw $title}<xen:else
                                    />{$xenOptions.boardTitle}</xen:if></h1>
                               
                                <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                            </div>
                        </xen:if>
                        </xen:hook>
                       
                        <xen:include template="ad_above_content" />
                       
                        <!-- main template -->
                        {xen:raw $contents}
                       
                        <xen:include template="ad_below_content" />
                       
                        <xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
                            <!-- login form, to be moved to the upper drop-down -->
                            <xen:include template="login_bar_form" />
                        </xen:if>
                       
                    <xen:if is="{$sidebar}"></div>
                </div>
               
                <!-- sidebar -->
                <aside>
                    <div class="sidebar">
                        <xen:hook name="page_container_sidebar">
                        <xen:include template="ad_sidebar_top" />
                        <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                        {xen:raw $sidebar}
                        <xen:include template="ad_sidebar_bottom" />
                        </xen:hook>
                    </div>
                </aside>
            </xen:if>
           
            <xen:hook name="page_container_breadcrumb_bottom">           
            <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
            </xen:hook>
                       
            <xen:include template="ad_below_bottom_breadcrumb" />
                       
        </div>
    </div>
</div>
 
<header>
    <xen:include template="header" />
    <xen:edithint template="navigation" />
    <xen:edithint template="search_bar" />
</header>
 
</div>
 
<footer>
    <xen:include template="footer" />
</footer>
 
<xen:include template="page_container_js_body" />
<xen:if is="@adStyler">
    <!-- Start styleBar JS -->
    <script>
        (function( $ ) {
            $( '#styleBar' ).styleBar();
        })( jQuery );
    </script>
    <!-- End styleBar JS -->
</xen:if>
 
 
<xen:if is="{$cronLink}"><img src="{$cronLink}" width="1" height="1" alt="" style="display: none" /></xen:if>
 
</xen:hook>
</body>
</html>
 
with my own html template which look like this:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/g+ecore--sav1-stfDSfs6Fa8root.css" type="text/css" />
</head>
<body>
 
<!--galaxy core -->
  <div id="g_core">
    <div id="g_core_node">
      <!--galaxy search -->
        <div id="spacecow">
          <div id="g_header"><div id="g_logo"><a href="link"><img src="favicon-big.png" width="40" height="40" /></a></div>
            <div id="g_node_header">       
              <form action=" link " name="f" target="_blank" class="g_scope search_btn" >
                <div class="g_scope_bg">
                  <input type="hidden" name="q" value=" link " />
                  <input type="Text" class="g_scope_input" value="" name="q" />
                  <input type="Image" src="library/v1/search.png" alt="search" class="btn_position" />
                </div>
              </form>     
            </div>
          </div>   
        </div>
      <!--eden galaxy -->
        <div id="e_g">       
          <!--galaxy eye -->
            <div id="g_e">
              <div id="g_e_2D"><iframe src="library/slider/index.html" style="width: 100%; height: 384px" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"> </iframe></div>
                <div id="g_e_node">
                  <ul class="node-menu images"><li><a href=" link "><span class="wall"></span>Wall</a></li></ul>
                  <ul class="node-menu images"><li><a href=" link "><span class="account"></span>Account</a></li></ul>
                  <ul class="node-menu images"><li><a href=" link "><span class="signup"></span>Sign Up</a></li></ul>
                  <ul class="node-menu images"><li><a href=" link "><span class="support"></span>Support</a></li></ul>
                  <ul class="node-menu images"><li><a href=" link "><span class="topshop"></span>TOP Shop</a></li></ul>
                  <ul class="node-menu images"><li><a href=" link "><span class="musicaltop"></span>Musical TOP</a></li></ul>
                  <ul class="node-menu images"><li><a href=" link "><span class="worldnews"></span>World News</a></li></ul>
                  <ul class="node-menu images"><li><a href=" link "><span class="movies"></span>Movies</a></li></ul>
                  <ul class="node-menu images"><li><a href= link "><span class="games"></span>Games</a></li></ul> 
                  <ul class="node-menu images"><li><a href=" link "><span class="market"></span>Market</a></li></ul>
                </div>
              </div>
            <!--eden galaxy core --> 
              <div class="e_g_core">
                <!--eden galaxy l core -->
                  <div class="e_g_lcore">
                    
 
[COLOR=#800000][SIZE=7][B]I NEED TO WRAP MY AWESOME FORUM BODY WITH THIS div TAG[/B][/SIZE][/COLOR]
 
 
                  </div>
                <!--eden galaxy r core -->
                  <div class="e_g_rcore">
                      <!--galaxy social + -->
                      <div class="g_social"><g:plusone size="small"></g:plusone></div>
                        <script type="text/javascript">
                          (function() {
                          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                          po.src = 'https://apis.google.com/js/plusone.js';
                          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                          })();
                        </script>
                        <ul class="node-sibling-menu"><li><a href=" link ">Gaming</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Comedy</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Film &amp; Animation</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Entertainment</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Autos &amp; Vehicles</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">People &amp; Blogs</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Pets &amp; Animals</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Howto &amp; Style</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Travel &amp; Events</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Sports</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Science &amp; Technology</a></li></ul>
                        <ul class="node-sibling-menu"><li><a href=" link ">Nonprofits &amp; Activism</a></li></ul>
                      </div>
                    </div>
                  </div>
                </div>
           
          <!--deeeeep galaxy -->
            <div id="d_g">
              <div class="d_g_node">
                <div class="d_g_sibling_node">
                  <p>&copy; Social TOP</p>
                    <ul>
                      <li><a href=" link ">About</a></li>
                      <li><a href=" link ">&sdot; Create an Ad</a></li>
                      <li><a href=" link ">&sdot; Developers</a></li>
                      <li><a href=" link ">&sdot; Careers</a></li>
                      <li><a href=" link ">&sdot; Privacy</a></li>
                      <li><a href=" link ">&sdot; Terms</a></li>
                      <li><a href=" link ">&sdot; Help</a></li>
                      <li><a href=" link ">&sdot; Sitemap</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            <br class="clear" />
          </div>
</body>
</html>
 
You need to develop your XenForo style using the other style as a point of reference. You will need to apply the HTML to the PAGE_CONTAINER template and then apply the needed CSS to the EXTRA.css template. You will need to work through any styling problems with the CSS. This is not a straight-forward step-by-step process. It's a development problem.

I can help with style changes if you encounter specific problems you can't solve. But if you need some one to do this for you then you should post a request:

http://xenforo.com/community/forums/custom-service-development-requests.69/
 
Hm, after some magic play with the EXTRA.css I'm almost done, very easy to do. I love XenForo for it's flexibility :love: . Will post my final result :) tomorrow
However, i have a question:

I have alot of js scripts, in which area of the HEAD in a PAGECONTAINER i should place it. Need a proper place. Scripts will load from my other API.
 
One more question, whats the difference between placeing my own js API in 2 dif places in a js_head_container, eg:

Code:
    <script src="{$jQuerySource}"></script>   
    <xen:if is="{$jQuerySource} != {$jQuerySourceLocal}">
        <script>if (!window.jQuery) { document.write('<scr'+'ipt type="text/javascript" src="{$jQuerySourceLocal}"><\/scr'+'ipt>'); }</script>
    </xen:if><xen:if is="{$xenOptions.uncompressedJs} == 1 OR {$xenOptions.uncompressedJs} == 3">
    <script src="{$javaScriptSource}/jquery/jquery.xenforo.rollup.js?_v={$xenOptions.jsVersion}"></script></xen:if>   
    <script src="{xen:helper javaScriptUrl, '{$javaScriptSource}/xenforo/xenforo.js?_v={$xenOptions.jsVersion}'}"></script>
<!--XenForo_Require:JS-->
 
I will place all my js APIS here

and if i will place my js APIS here

Code:
    <script src="{$jQuerySource}"></script>   
    <xen:if is="{$jQuerySource} != {$jQuerySourceLocal}">
        <script>if (!window.jQuery) { document.write('<scr'+'ipt type="text/javascript" src="{$jQuerySourceLocal}"><\/scr'+'ipt>'); }</script>
    </xen:if><xen:if is="{$xenOptions.uncompressedJs} == 1 OR {$xenOptions.uncompressedJs} == 3">
    <script src="{$javaScriptSource}/jquery/jquery.xenforo.rollup.js?_v={$xenOptions.jsVersion}"></script></xen:if>   
    <script src="{xen:helper javaScriptUrl, '{$javaScriptSource}/xenforo/xenforo.js?_v={$xenOptions.jsVersion}'}"></script>
 
    I will place all my APIS here
 
<!--XenForo_Require:JS-->
 
Top Bottom