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

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

Cryptaline

Active member
#1
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 :)
 

Cryptaline

Active member
#4
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?
 

Jake Bunce

XenForo moderator
Staff member
#5
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.
 

Cryptaline

Active member
#6
Probably question for Jake Bunce :)

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

I need to wrap my awesome XenForo forum in to my awesome template to achive this:
ADSA07AG0DG.PNG
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>
 

Cryptaline

Active member
#7
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>
 

Cryptaline

Active member
#8
If you will help me out with it i will really apreciate it and will purchase smth else from xen official store, for example extended license :D
 

Jake Bunce

XenForo moderator
Staff member
#9
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/
 

Cryptaline

Active member
#10
Very fast reply ;) apreciate it.
Could you give an example of wraping pagecontainer with my own html template?

And i will now try to play with EXTRA.css, thx!
 

Cryptaline

Active member
#11
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.
 

Cryptaline

Active member
#14
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-->