1. 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?

Discussion in 'Styling and Customization Questions' started by Cryptaline, Aug 2, 2012.

  1. Cryptaline

    Cryptaline Active Member


    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:

          <TITLE>My additional php page for forum input</TITLE>
          <link rel="stylesheet" href="additional-php-page-style.css" type="text/css" />
          <div>I want to palce XenForo within this div tag</div>
    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?

    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" />

    Will apreciate any tip you have :)
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Cryptaline likes this.
  3. Cryptaline

    Cryptaline Active Member

    Thank you! I will try and post my results.
  4. Cryptaline

    Cryptaline Active Member

    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?
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member


    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.
  6. Cryptaline

    Cryptaline Active Member

    Probably question for Jake Bunce :)

    I have my awesome XenForo forum which look like this:
    And i have my own awesome pure html template which look like this:

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

    <!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">
    <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;
        <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}" />
        {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>
            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' );
        <link rel="stylesheet" href="{$javaScriptSource}/ad_styler/1.0/css/styleBar.css" />
        <!-- End styleBar head -->
        <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>
    <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" />
    <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>
                <xen:include template="ad_below_top_breadcrumb" />
                <xen:hook name="page_container_notices">
                <xen:include template="notices" />                       
                <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}
                                        is="{$h1}">{xen:raw $h1}<xen:elseif
                                        is="{$title}" />{xen:raw $title}<xen:else
                                    <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                            <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 is="{$sidebar}"></div>
                    <!-- sidebar -->
                        <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 name="page_container_breadcrumb_bottom">           
                <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
                <xen:include template="ad_below_bottom_breadcrumb" />
        <xen:include template="header" />
        <xen:edithint template="navigation" />
        <xen:edithint template="search_bar" />
        <xen:include template="footer" />
    <xen:include template="page_container_js_body" />
    <xen:if is="@adStyler">
        <!-- Start styleBar JS -->
            (function( $ ) {
                $( '#styleBar' ).styleBar();
            })( jQuery );
        <!-- End styleBar JS -->
    <xen:if is="{$cronLink}"><img src="{$cronLink}" width="1" height="1" alt="" style="display: none" /></xen:if>
  7. Cryptaline

    Cryptaline Active Member

    with my own html template which look like this:

    <!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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/g+ecore--sav1-stfDSfs6Fa8root.css" type="text/css" />
    <!--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" />
          <!--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>
                <!--eden galaxy core --> 
                  <div class="e_g_core">
                    <!--eden galaxy l core -->
                      <div class="e_g_lcore">
                    <!--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);
                            <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>
              <!--deeeeep galaxy -->
                <div id="d_g">
                  <div class="d_g_node">
                    <div class="d_g_sibling_node">
                      <p>&copy; Social TOP</p>
                          <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>
                <br class="clear" />
  8. Cryptaline

    Cryptaline Active Member

    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
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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:

    Cryptaline likes this.
  10. Cryptaline

    Cryptaline Active Member

    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!
  11. Cryptaline

    Cryptaline Active Member

    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.
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Use this template for "head" javascript:

    Admin CP -> Appearance -> Templates -> page_container_js_head
    Cryptaline likes this.
  13. Cryptaline

    Cryptaline Active Member

    Ok as soon as i figured how to "talk" with xen :) it was i piece of cake to edit my forum wrap as i wanted.
    Thank you Jake for the fast responds.

    My own engine + xen foro looks awesome together. Need to change some sprites to make page load faster, however its not that hard and forum look like this:
  14. Cryptaline

    Cryptaline Active Member

    One more question, whats the difference between placeing my own js API in 2 dif places in a js_head_container, eg:

        <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 js APIS here
    and if i will place my js APIS here

        <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

Share This Page