treehouse : what would you like to learn today?
Web Design Web Development iOS Development

phpBB skinning problems

  • Hi there!

    I recently made a WP theme for my client at bikefitness.net

    He then told me to make a phpBB theme for his site. You can view the phpBB at bikefitness.net/v2

    There are a few problems in the phpBB that I need help with:
    [list]Header Gap
    When page is smaller than window the background does not repeat at the bottom[/list:u]

    Can anyone please help me with any of the issues I am having?

    Here is code in overall_header.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\" dir=\"{S_CONTENT_DIRECTION}\" lang=\"{S_USER_LANG}\" xml:lang=\"{S_USER_LANG}\">
    <head>

    <meta http-equiv=\"content-type\" content=\"text/html; charset={S_CONTENT_ENCODING}\" />
    <meta http-equiv=\"content-style-type\" content=\"text/css\" />
    <meta http-equiv=\"content-language\" content=\"{S_USER_LANG}\" />
    <meta http-equiv=\"imagetoolbar\" content=\"no\" />
    <meta name=\"resource-type\" content=\"document\" />
    <meta name=\"distribution\" content=\"global\" />
    <meta name=\"copyright\" content=\"2000, 2002, 2005, 2007 phpBB Group\" />
    <meta name=\"keywords\" content=\"\" />
    <meta name=\"description\" content=\"\" />
    {META}
    <title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

    <!--
    phpBB style name: prosilver
    Based on style: prosilver (this is the default phpBB3 style)
    Original author: Tom Beddard ( http://www.subBlue.com/ )
    Modified by:

    NOTE: This page was generated by phpBB, the free open-source bulletin board package.
    The phpBB Group is not responsible for the content of this page and forum. For more information
    about phpBB please visit http://www.phpbb.com
    -->

    <script type=\"text/javascript\">
    // <![CDATA[
    var jump_page = '{LA_JUMP_PAGE}:';
    var on_page = '{ON_PAGE}';
    var per_page = '{PER_PAGE}';
    var base_url = '{A_BASE_URL}';
    var style_cookie = 'phpBBstyle';
    var style_cookie_settings = '{A_COOKIE_SETTINGS}';
    var onload_functions = new Array();
    var onunload_functions = new Array();

    <!-- IF S_USER_PM_POPUP -->
    if ({S_NEW_PM})
    {
    var url = '{UA_POPUP_PM}';
    window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
    }
    <!-- ENDIF -->

    /**
    * Find a member
    */
    function find_username(url)
    {
    popup(url, 760, 570, '_usersearch');
    return false;
    }

    /**
    * New function for handling multiple calls to window.onload and window.unload by pentapenguin
    */
    window.onload = function()
    {
    for (var i = 0; i < onload_functions.length; i++)
    {
    eval(onload_functions[i]);
    }
    }

    window.onunload = function()
    {
    for (var i = 0; i < onunload_functions.length; i++)
    {
    eval(onunload_functions[i]);
    }
    }

    // ]]>
    </script>
    <script type=\"text/javascript\" src=\"{T_TEMPLATE_PATH}/styleswitcher.js\"></script>
    <script type=\"text/javascript\" src=\"{T_TEMPLATE_PATH}/forum_fn.js\"></script>

    <link href=\"{T_THEME_PATH}/print.css\" rel=\"stylesheet\" type=\"text/css\" media=\"print\" title=\"printonly\" />
    <link href=\"{T_STYLESHEET_LINK}\" rel=\"stylesheet\" type=\"text/css\" media=\"screen, projection\" />

    <link href=\"{T_THEME_PATH}/normal.css\" rel=\"stylesheet\" type=\"text/css\" title=\"A\" />
    <link href=\"{T_THEME_PATH}/medium.css\" rel=\"alternate stylesheet\" type=\"text/css\" title=\"A+\" />
    <link href=\"{T_THEME_PATH}/large.css\" rel=\"alternate stylesheet\" type=\"text/css\" title=\"A++\" />

    <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
    <link href=\"{T_THEME_PATH}/bidi.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen, projection\" />
    <!-- ENDIF -->

    <link rel=\"stylesheet\" href=\"{T_THEME_PATH}/wordpress.css\" type=\"text/css\" media=\"screen\" />

    </head>

    <body id=\"phpbb\" class=\"section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}\">

    <div id=\"wrap2\">

    <img id=\"Image-Maps_6200905212130482\" src=\"http://bikefitness.net/header.png\" usemap=\"#Image-Maps_6200905212130482\" border=\"0\" width=\"960\" height=\"300\" alt=\"\" />
    <map id=\"_Image-Maps_6200905212130482\" name=\"Image-Maps_6200905212130482\">
    <area shape=\"rect\" coords=\"201,97,729,192\" href=\"http://bikefitness.net/\" alt=\"\" title=\"\" />
    <area shape=\"rect\" coords=\"757,15,834,47\" href=\"/wp-admin/\" alt=\"\" title=\"\" />
    <area shape=\"poly\" coords=\"541,297,525,232,553,223,553,171,646,169,780,200,776,226,776,299,669,299,546,298,\" href=\"http://www.flickr.com/groups/mikebike/\" alt=\"\" title=\"\" />
    <area shape=\"poly\" coords=\"261,288,234,286,248,272,248,260,265,258,276,248,290,241,301,244,311,251,315,259,332,267,334,278,332,282,331,287,323,293,315,296,296,297,286,297,283,297,268,296,263,296,261,287,\" href=\"http://twitter.com/bikefitness\" alt=\"Our Twitter Page!\" title=\"Our Twitter Page!\" />
    <area shape=\"rect\" coords=\"836,15,912,47\" href=\"/wp-login.php?action=register\" alt=\"\" title=\"\" />
    </map>

    </div>

    <div id=\"wrap3\">

    <div id=\"navbar\">

    <div id=\"navbarleft\">
    <ul id=\"nav\">
    <li><a href=\"<?php echo get_option('home'); ?>\">Home</a></li>
    <li><a href=\"/about/\">About BikeFitness.net</a></li>
    <li><a href=\"/community/\">Community</a></li>
    <li><a href=\"/contact-us/\">Contact Us</a></li>
    </ul>
    </div>

    <div id=\"navbarright\">

    <form action=\"http://www.bikefitness.net/search\" id=\"cse-search-box\">
    <div>
    <input type=\"hidden\" name=\"cx\" value=\"partner-pub-2785909654214400:wnp25ez39uj\" />
    <input type=\"hidden\" name=\"cof\" value=\"FORID:9\" />
    <input type=\"hidden\" name=\"ie\" value=\"ISO-8859-1\" />
    <input type=\"text\" name=\"q\" size=\"25\" />
    <input type=\"submit\" name=\"sa\" value=\"Bike It!\" />
    </div>
    </form>
    <script type=\"text/javascript\" src=\"http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en\"></script>
    </div>

    </div>

    <div style=\"clear:both;\"></div>

    <div id=\"subnavbar\">

    <ul id=\"subnav\">
    <li><a href=\"http://bikefitness.net/category/events-and-rides/\">Events and Rides</a></li>
    <li><a href=\"http://bikefitness.net/category/latest/\">Latest</a></li>
    <li><a href=\"http://bikefitness.net/category/ride-pix/\">Ride Pix</a></li>
    <li><a href=\"http://bikefitness.net/category/saturday-rides/\">Saturday Rides</a></li>
    <li><a href=\"http://bikefitness.net/category/videos/\">Videos</a></li>

    </ul>

    </div>

    <div style=\"clear:both;\"></div>

    <br>

    <div id=\"wrap\">
    <a id=\"top\" name=\"top\" accesskey=\"t\"></a>
    <div id=\"page-header\">
    <div class=\"headerbar\">

    </div>

    <div class=\"navbar\">
    <div class=\"inner\"><span class=\"corners-top\"><span></span></span>

    <ul class=\"linklist navlinks\">
    <li class=\"icon-home\"><a href=\"{U_INDEX}\" accesskey=\"h\">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href=\"{navlinks.U_VIEW_FORUM}\">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

    <li class=\"rightside\"><a href=\"#\" onclick=\"fontsizeup(); return false;\" onkeypress=\"fontsizeup(); return false;\" class=\"fontsize\" title=\"{L_CHANGE_FONT_SIZE}\">{L_CHANGE_FONT_SIZE}</a></li>

    <!-- IF U_EMAIL_TOPIC --><li class=\"rightside\"><a href=\"{U_EMAIL_TOPIC}\" title=\"{L_EMAIL_TOPIC}\" class=\"sendemail\">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
    <!-- IF U_EMAIL_PM --><li class=\"rightside\"><a href=\"{U_EMAIL_PM}\" title=\"{L_EMAIL_PM}\" class=\"sendemail\">{L_EMAIL_PM}</a></li><!-- ENDIF -->
    <!-- IF U_PRINT_TOPIC --><li class=\"rightside\"><a href=\"{U_PRINT_TOPIC}\" title=\"{L_PRINT_TOPIC}\" accesskey=\"p\" class=\"print\">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
    <!-- IF U_PRINT_PM --><li class=\"rightside\"><a href=\"{U_PRINT_PM}\" title=\"{L_PRINT_PM}\" accesskey=\"p\" class=\"print\">{L_PRINT_PM}</a></li><!-- ENDIF -->
    </ul>

    <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
    <ul class=\"linklist leftside\">
    <li class=\"icon-ucp\">
    <a href=\"{U_PROFILE}\" title=\"{L_PROFILE}\" accesskey=\"u\">{L_PROFILE}</a>
    <!-- IF S_DISPLAY_PM --> (<a href=\"{U_PRIVATEMSGS}\">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull;
    <a href=\"{U_SEARCH_SELF}\">{L_SEARCH_SELF}</a>
    <!-- IF U_RESTORE_PERMISSIONS --> &bull;
    <a href=\"{U_RESTORE_PERMISSIONS}\">{L_RESTORE_PERMISSIONS}</a>
    <!-- ENDIF -->
    </li>
    </ul>
    <!-- ENDIF -->

    <ul class=\"linklist rightside\">
    <li class=\"icon-faq\"><a href=\"{U_FAQ}\" title=\"{L_FAQ_EXPLAIN}\">{L_FAQ}</a></li>
    <!-- IF not S_IS_BOT -->
    <!-- IF S_DISPLAY_MEMBERLIST --><li class=\"icon-members\"><a href=\"{U_MEMBERLIST}\" title=\"{L_MEMBERLIST_EXPLAIN}\">{L_MEMBERLIST}</a></li><!-- ENDIF -->
    <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class=\"icon-register\"><a href=\"{U_REGISTER}\">{L_REGISTER}</a></li><!-- ENDIF -->
    <li class=\"icon-logout\"><a href=\"{U_LOGIN_LOGOUT}\" title=\"{L_LOGIN_LOGOUT}\" accesskey=\"l\">{L_LOGIN_LOGOUT}</a></li>
    <!-- ENDIF -->
    </ul>

    <span class=\"corners-bottom\"><span></span></span></div>
    </div>

    </div>

    <a name=\"start_here\"></a>
    <div id=\"page-body\">

    <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
    <div id=\"message\" class=\"rules\">
    <div class=\"inner\"><span class=\"corners-top\"><span></span></span>
    <strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
    <span class=\"corners-bottom\"><span></span></span></div>
    </div>
    <!-- ENDIF -->


    Here is code in overall_footer.html:

    	</div>

    <div id=\"page-footer\">

    <div class=\"navbar\">
    <div class=\"inner\"><span class=\"corners-top\"><span></span></span>

    <ul class=\"linklist\">
    <li class=\"icon-home\"><a href=\"{U_INDEX}\" accesskey=\"h\">{L_INDEX}</a></li>
    <!-- IF not S_IS_BOT -->
    <!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class=\"icon-unsubscribe\"<!-- ELSE -->class=\"icon-subscribe\"<!-- ENDIF -->><a href=\"{S_WATCH_FORUM_LINK}\" title=\"{S_WATCH_FORUM_TITLE}\">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
    <!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class=\"icon-unsubscribe\"<!-- ELSE -->class=\"icon-subscribe\"<!-- ENDIF -->><a href=\"{U_WATCH_TOPIC}\" title=\"{L_WATCH_TOPIC}\">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
    <!-- IF U_BOOKMARK_TOPIC --><li class=\"icon-bookmark\"><a href=\"{U_BOOKMARK_TOPIC}\" title=\"{L_BOOKMARK_TOPIC}\">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
    <!-- IF U_BUMP_TOPIC --><li class=\"icon-bump\"><a href=\"{U_BUMP_TOPIC}\" title=\"{L_BUMP_TOPIC}\">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
    <!-- ENDIF -->
    <li class=\"rightside\"><!-- IF U_TEAM --><a href=\"{U_TEAM}\">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href=\"{U_DELETE_COOKIES}\">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
    </ul>

    <span class=\"corners-bottom\"><span></span></span></div>
    </div>

    <!--
    We request you retain the full copyright notice below including the link to www.phpbb.com.
    This not only gives respect to the large amount of time given freely by the developers
    but also helps build interest, traffic and use of phpBB3. If you (honestly) cannot retain
    the full copyright we ask you at least leave in place the \"Powered by phpBB\" line, with
    \"phpBB\" linked to www.phpbb.com. If you refuse to include even this then support on our
    forums may be affected.

    The phpBB Group : 2006
    //-->

    <div class=\"copyright\">
    <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
    <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
    <!-- IF U_ACP --><br /><strong><a href=\"{U_ACP}\">{L_ACP}</a></strong><!-- ENDIF -->
    <br>
    </div>
    </div>

    </div>

    <div>
    <a id=\"bottom\" name=\"bottom\" accesskey=\"z\"></a>
    <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
    </div>

    <div style=\"clear:both;\"></div>

    <div id=\"footer\">

    <p>Copyright &copy; BikeFitness.net &middot; All Rights Reserved &middot; Designed by <a href=\"http://www.motivosolutions.com\" >Motivo Solutions</a> &middot; <i>\"A pedal of communities.\"</i></p>

    </div>

    </div>

    </body>
    </html>


    If you can't find the CSS please let me know and I will put a link up to it.