HTML/CSS: 如何在 phpBB 样式中添加自定义横幅

Question

我需要一些帮助来替换和添加我自己的 Header 双核样式。我尝试联系该样式的作者，但他似乎不在。

如您所见，登录 link 右上角有一个小 header，但我在替换它和添加自己的 header.[=14= 时遇到了一些困难]

我想替换的 Header 的一部分是 "mainheader" 看起来像这样 "mainheader" 在 overal_header.html 中你可以找到它，但我不太确定是什么添加或替换。我的横幅图片是 "dep_banner.png" 宽度：900 高度：145。 Common.css

/* General Markup Styles
---------------------------------------- */

* {
 /* Reset browsers default margin, padding and font sizes */
 margin: 0;
 padding: 0;
}

html {
 font-size: 100%;
 /* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
 height: 101%;
}

body {
 /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
 font-family: Verdana, Helvetica, Arial, sans-serif;
 color: #828282;
 background-color: #FFFFFF;
 /*font-size: 62.5%;    This sets the default font size to be equivalent to 10px */
 font-size: 10px;
 margin: 0;
 padding: 12px 0;
}

h1 {
 /* Forum name */
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 margin-right: 200px;
 color: #FFFFFF;
 margin-top: 15px;
 font-weight: bold;
 font-size: 2em;
}

h2 {
 /* Forum header titles */
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #3f3f3f;
 font-size: 2em;
 margin: 0.8em 0 0.2em 0;
}

h2.solo {
 margin-bottom: 1em;
}

h3 {
 /* Sub-headers (also used as post headers, but defined later) */
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-transform: uppercase;
 border-bottom: 1px solid #CCCCCC;
 margin-bottom: 3px;
 padding-bottom: 2px;
 font-size: 1.05em;
 color: #989898;
 margin-top: 20px;
}

h4 {
 /* Forum and topic list titles */
 font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
 font-size: 1.3em;
}

p {
 line-height: 1.3em;
 font-size: 1.1em;
 margin-bottom: 1.5em;
}

img {
 border-width: 0;
}

hr {
 /* Also see tweaks.css */
 border: 0 none #FFFFFF;
 border-top: 1px solid #CCCCCC;
 height: 1px;
 margin: 5px 0;
 display: block;
 clear: both;
}

hr.dashed {
 border-top: 1px dashed #CCCCCC;
 margin: 10px 0;
}

hr.divider {
 display: none;
}

p.right {
 text-align: right;
}

/* Main blocks
---------------------------------------- */
#wrap {
    padding: 5px 5px;
    min-width: 900px;
    margin: 0 auto;
 background-color: #ffffff;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px; 
}

#simple-wrap {
 padding: 6px 10px;
 background-color: #ffffff; 
}

#page-body {
 margin: 4px 0;
 clear: both;
}

#page-footer {
 clear: both;
}

#page-footer h3 {
 margin-top: 20px;
}

#logo {
 float: left;
 width: auto;
 padding: 10px 13px 0 10px;
}

a#logo:hover {
 text-decoration: none;
}

/* Search box
--------------------------------------------- */
#search-box {
 color: #FFFFFF;
 position: relative;
 margin-top: 30px;
 margin-right: 5px;
 display: block;
 float: right;
 text-align: right;
 white-space: nowrap; /* For Opera */
}

#search-box #keywords {
 width: 95px;
 background-color: #FFF;
}

#search-box input {
 border: 1px solid #b0b0b0;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
 padding: 1px 5px;
}

#search-box li {
 text-align: right;
 margin-top: 4px;
}

#search-box img {
 vertical-align: middle;
 margin-right: 3px;
}

/* Site description and logo */
#site-description {
 float: left;
 width: 70%;
}

#site-description h1 {
 margin-right: 0;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
 background: #ebebeb none repeat-x 0 0;
 color: #FFFFFF;
 margin-bottom: 4px;
 padding: 0 5px;
}

.navbar {
 background-color: #ebebeb;
 padding: 0 10px;
}

.forabg {
 background: #b1b1b1 none repeat-x 0 0;
 margin-bottom: 4px;
 padding: 0 5px;
 clear: both;
}

.forumbg {
 background: #ebebeb none repeat-x 0 0;
 margin-bottom: 4px;
 padding: 0 5px;
 clear: both;
}

.panel {
 margin-bottom: 4px;
 padding: 0 10px;
 background-color: #f3f3f3;
 color: #3f3f3f;
}

.post {
 padding: 0 10px;
 margin-bottom: 4px;
 background-repeat: no-repeat;
 background-position: 100% 0;
}

.post:target .content {
 color: #000000;
}

.post:target h3 a {
 color: #000000;
}

.bg1 { background-color: #f7f7f7;}
.bg2 { background-color: #f2f2f2; }
.bg3 { background-color: #ebebeb; }

.rowbg {
 margin: 5px 5px 2px 5px;
}

.ucprowbg {
 background-color: #e2e2e2;
}

.fieldsbg {
 /*border: 1px #DBDEE2 solid;*/
 background-color: #eaeaea;
}

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
 font-size: 1px;
 line-height: 1px;
 display: block;
 height: 5px;
 background-repeat: no-repeat;
}

span.corners-top {
 background-image: none;
 background-position: 0 0;
 margin: 0 -5px;
}

span.corners-top span {
 background-image: none;
 background-position: 100% 0;
}

span.corners-bottom {
 background-image: none;
 background-position: 0 100%;
 margin: 0 -5px;
 clear: both;
}

span.corners-bottom span {
 background-image: none;
 background-position: 100% 100%;
}

.headbg span.corners-bottom {
 margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
 margin: 0 -10px;
}

.rules span.corners-top {
 margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
 margin: 5px -10px 0 -10px;
}

/* Horizontal lists
----------------------------------------*/
ul.linklist {
 display: block;
 margin: 0;
}

ul.linklist li {
 display: block;
 list-style-type: none;
 float: left;
 width: auto;
 margin-right: 5px;
 font-size: 1.1em;
 line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
 float: right;
 margin-right: 0;
 margin-left: 5px;
 text-align: right;
}

ul.navlinks {
 padding-bottom: 1px;
 margin-bottom: 1px;
 border-bottom: 1px solid #FFFFFF;
 font-weight: bold;
}

ul.leftside {
 float: left;
 margin-left: 0;
 margin-right: 5px;
 text-align: left;
}

ul.rightside {
 float: right;
 margin-left: 5px;
 margin-right: -5px;
 text-align: right;
}

/* Table styles
----------------------------------------*/
table.table1 {
 /* See tweaks.css */
}

#ucp-main table.table1 {
 padding: 2px;
}

table.table1 thead th {
 font-weight: normal;
 text-transform: uppercase;
 color: #FFFFFF;
 line-height: 1.3em;
 font-size: 1em;
 padding: 7px 8px;
}

table.table1 thead th span {
 padding-left: 7px;
}

table.table1 tbody tr {
 border: 1px solid #cfcfcf;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
 background-color: #f6f6f6;
 color: #000;
}

table.table1 td {
 color: #6a6a6a;
 font-size: 1.1em;
}

table.table1 tbody td {
 padding: 5px;
 border-top: 1px solid #FAFAFA;
}

table.table1 tbody th {
 padding: 5px;
 border-bottom: 1px solid #000000;
 text-align: left;
 color: #333333;
 background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name  { text-align: left; }
table.table1 .posts  { text-align: center !important; width: 7%; }
table.table1 .joined { text-align: left; width: 15%; }
table.table1 .active { text-align: left; width: 15%; }
table.table1 .mark  { text-align: center; width: 7%; }
table.table1 .info  { text-align: left; width: 30%; }
table.table1 .info div { width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol { line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
 float: right;
 width: auto;
}

table.info td {
 padding: 3px;
}

table.info tbody th {
 padding: 3px;
 text-align: right;
 vertical-align: top;
 color: #000000;
 font-weight: normal;
}

.forumbg table.table1 {
 margin: 0;
}

.forumbg-table > .inner {
 margin: 0 -1px;
}

.forumbg-table > .inner > span.corners-top {
 margin: 0 -4px -1px -4px;
}

.forumbg-table > .inner > span.corners-bottom {
 margin: -1px -4px 0 -4px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts 
   Also see tweaks.css */
.column1 {
 float: left;
 clear: left;
 width: 49%;
}

.column2 {
 float: right;
 clear: right;
 width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
 float: left;
 width: auto;
 text-align: left;
}

.right-box {
 float: right;
 width: auto;
 text-align: right;
}

dl.details {
 /*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
 font-size: 1.1em;
}

dl.details dt {
 float: left;
 clear: left;
 width: 30%;
 text-align: right;
 color: #000000;
 display: block;
}

dl.details dd {
 margin-left: 0;
 padding-left: 5px;
 margin-bottom: 5px;
 color: #828282;
 float: left;
 width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
 height: 1%; /* IE tweak (holly hack) */
 width: auto;
 text-align: right;
 margin-top: 5px;
 float: right;
}

.pagination span.page-sep {
 display: none;
}

li.pagination {
 margin-top: 0;
}

.pagination strong, .pagination b {
 font-weight: normal;
}

.pagination span strong {
 padding: 0 2px;
 margin: 0 2px;
 font-weight: normal;
 color: #FFFFFF;
 background-color: #bfbfbf;
 border: 1px solid #bfbfbf;
 font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
 font-weight: normal;
 text-decoration: none;
 color: #747474;
 margin: 0 2px;
 padding: 0 2px;
 background-color: #eeeeee;
 border: 1px solid #bababa;
 font-size: 0.9em;
 line-height: 1.5em;
}

.pagination span a:hover {
 border-color: #d2d2d2;
 background-color: #d2d2d2;
 color: #FFF;
 text-decoration: none;
}

.pagination img {
 vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
 display: block;
 float: right;
 width: auto;
 margin-top: 0;
 padding: 1px 0 1px 15px;
 font-size: 0.9em;
 background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
 background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
 background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
 float: right;
 width: auto;
 padding-left: 5px;
 margin-left: 5px;
 margin-top: 10px;
 text-align: right;
}

.copyright {
 padding: 5px;
 text-align: center;
 color: #555555;
}

.small {
 font-size: 0.9em !important;
}

.titlespace {
 margin-bottom: 15px;
}

.headerspace {
 margin-top: 20px;
}

.error {
 color: #bcbcbc;
 font-weight: bold;
 font-size: 1em;
}

.reported {
 background-color: #f7f7f7;
}

li.reported:hover {
 background-color: #ececec;
}

div.rules {
 background-color: #ececec;
 color: #bcbcbc;
 padding: 0 10px;
 margin: 10px 0;
 font-size: 1.1em;
}

div.rules ul, div.rules ol {
 margin-left: 20px;
}

p.rules {
 background-color: #ececec;
 background-image: none;
 padding: 5px;
}

p.rules img {
 vertical-align: middle;
 padding-top: 5px;
}

p.rules a {
 vertical-align: middle;
 clear: both;
}

#top {
 position: absolute;
 top: -20px;
}

.clear {
 display: block;
 clear: both;
 font-size: 1px;
 line-height: 1px;
 background: transparent;
}

overall_header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- INCLUDE dualcore_config.html -->
<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="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>

<!-- IF S_ENABLE_FEEDS -->
 <!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
 <!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
 <!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
 <!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
 <!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
 <!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
 <!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

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

<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 and 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_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.collapse.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 -->

</head>

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

<div class="topnav">
<div style="margin: 0 auto; min-width: 900px; width: {$BOARD_WIDTH}; position: relative;">
<div class="navlink"><ul>
    <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) and not S_IS_BOT -->
    <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">
     <strong><img src="{T_THEME_PATH}/images/icon_logout.png" width="16" height="16" alt="" />{L_LOGIN_LOGOUT}</strong>
    </a></li>
    <li><a href="{U_REGISTER}">
     <strong><img src="{T_THEME_PATH}/images/icon_register.png" width="16" height="16" alt="" />{L_REGISTER}</strong>
    </a></li> 
    <!-- ENDIF --> 
    <!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
    <li><a href="{U_PROFILE}">
     <strong><img src="{T_THEME_PATH}/images/icon_ucp.png" width="20" height="20" alt="" />{S_USERNAME}</strong>
    </a></li>
    <!-- ENDIF --> 
    <!-- IF U_ACP -->
    <li><a href="{U_ACP}">
     <strong><img src="{T_THEME_PATH}/images/icon_admin.png" width="20" height="20" alt="" />{L_ACP}</strong>
    </a></li>    
    <!-- ENDIF -->    
    <!-- IF S_DISPLAY_PM and not S_IS_BOT and S_USER_LOGGED_IN -->
    <li><a href="{U_PRIVATEMSGS}">
     <strong><img src="{T_THEME_PATH}/images/icon_pm.png" width="20" height="20" alt="" />{PRIVATE_MESSAGE_INFO}</strong>
    </a></li>
    <!-- ENDIF -->
    <!-- IF U_RESTORE_PERMISSIONS -->
    <li><a href="{U_RESTORE_PERMISSIONS}">
    <strong><img src="{T_THEME_PATH}/images/icon_restore.png" width="16" height="16" alt="" />{L_RESTORE_PERMISSIONS}</strong>
    </a></li>
    <!-- ENDIF -->
    <!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->    
    <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">
     <strong><img src="{T_THEME_PATH}/images/icon_logout.png" width="20" height="20" alt="" />{L_LOGOUT}</strong>
    </a></li>
    <!-- ENDIF -->   
</ul></div>

<div class="navlink" style="float: right;"><ul><li>
  <!-- IF S_USER_LOGGED_IN -->  
        <div class="float-right">  
            <div class="quicksearch">
                <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
                    <form action="{U_SEARCH}" method="get" id="search">
                        <fieldset>
                            <input name="keywords" id="keywords" type="text" maxlength="128" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                            <!--<input class="button2" value="{L_SEARCH}" type="submit" />-->
                            {S_SEARCH_HIDDEN_FIELDS}
                        </fieldset>
                        </form>
                    <!-- ENDIF -->
            </div>
        </div>   
  <!-- ENDIF -->
  
  <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
 <form method="post" action="{S_LOGIN_ACTION}"  style="margin-top: -6px; margin-right: -5px;">
  <fieldset class="quick-login">
   <label for="username" style="color: #fff;">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="15" class="inputbox" title="{L_USERNAME}" />
   <label for="password" style="color: #fff;">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="15" class="inputbox" title="{L_PASSWORD}" />
   <input type="submit" name="login" value="{L_LOGIN}" class="button1" />
   {S_LOGIN_REDIRECT}
  </fieldset>
 </form>
  <!-- ENDIF -->
</li></ul></div>

</div>
</div>
<div id="wrap" style="width: {$BOARD_WIDTH};">
 <a id="top" name="top" accesskey="t"></a>
 <div id="page-header">
 
 <div class="mainheader">
 <a style="display: inline-block; width: 900px; height: 145px;" href="{U_INDEX}" accesskey="h" class="logo.png"<!-- IF $LOGO_ANIMATION == 'on' --> dualcore-logo-animation<!-- ENDIF -->"></a>
 </div>
 
 <div class="mainheader">
  <div class="mainnav<!-- IF $MENU_ANIMATION == 'on' --> mainnav-animation<!-- ENDIF -->"><ul>
    <li><a href="{U_INDEX}" accesskey="h">
     <strong>{L_HOME}</strong>
     <span>{SITENAME}</span>
    </a></li>
    <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">
     <strong>{L_FAQ}</strong>
     <span>{L_FAQ_EXPLAIN}</span>
    </a></li>
    <!-- IF not S_IS_BOT and S_DISPLAY_MEMBERLIST -->
    <li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">
     <strong>{L_MEMBERLIST}</strong>
     <span>{L_MEMBERLIST_EXPLAIN}</span>
    </a></li>
    <!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH -->
    <li><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">
     <strong>{L_SEARCH}</strong>
     <span>{L_SEARCH_ADV_EXPLAIN}</span>
    </a></li>
    <!-- ENDIF -->
    <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
    <li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">
     <strong>{L_READ_PROFILE}</strong>
     <span>{L_PROFILE}</span>
    </a></li>
    <!-- ENDIF -->
  </ul></div>
 </div>  
 <div class="nav-bar">
 <img src="{T_THEME_PATH}/images/icon_home.png" width="16" height="16" alt="" /><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 -->
 </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="information" 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 -->

Answer 1

在您包含的 html 中，尝试替换

<div class="mainheader">
<a style="display: inline-block; width: 900px; height: 145px;" href="{U_INDEX}" accesskey="h" class="logo.png"<!-- IF $LOGO_ANIMATION == 'on' --> dualcore-logo-animation<!-- ENDIF -->"></a>
</div>

和

<div class="mainheader">
<a style="display: inline-block; width: 100%;" href="{U_INDEX}" accesskey="h"><img src="images/dep_banner.png" style="width=100%"/></a>
</div>

将图像添加为 <img> 而不是背景图像将更容易调整大小。更多信息 here.

HTML/CSS: 如何在 phpBB 样式中添加自定义横幅

HTML/CSS: How to add Custom Banner in phpBB Style

html

css

forum

banner

phpbb3