[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning

Re: [How To] Modify prosilver's header

Postby stealth62 » Sun Aug 02, 2009 4:22 am

As you requested, my complete overall_header:

Code: Select all
<!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 -->

</head>

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

<div id="wrap">
   <a id="top" name="top" accesskey="t"></a>
   <div id="page-header">
      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>
            <div style="height: 137px;">
         <div id="site-description">
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
            </div>
            </form>
         </div>
         
      <!-- ENDIF -->
</div>

         <span class="corners-bottom"><span></span></span></div>
      </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" style="font-size: 1em;">
              <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
                 <div id="search-box">
                    <form action="{U_SEARCH}" method="post" id="search">
                    <fieldset>
                       <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" 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" /><br />
                        {S_SEARCH_HIDDEN_FIELDS}
                    </fieldset>
                    </form>
                 </div>
              <!-- ENDIF -->
            </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>
            <li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</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 -->
stealth62
Registered User
 
Posts: 12
Joined: Thu Jan 15, 2009 6:01 am

Re: [How To] Modify prosilver's header

Postby prototech » Sun Aug 02, 2009 4:27 am

Remove the <!-- ENDIF --> from the code on your previous post. Delete home/moodley1/public_html/forums/cache/tpl_prosilver_overall_header.html.php.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
User avatar
prototech
Development Team Member
Development Team Member
 
Posts: 5248
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Postby stealth62 » Sun Aug 02, 2009 4:50 am

your good! :D

however, do you have a idea or fix for this:
http://timesoflegend.net/forums/

the light blue background of the theme didnt go away, and the logo looped twice
stealth62
Registered User
 
Posts: 12
Joined: Thu Jan 15, 2009 6:01 am

Re: [How To] Modify prosilver's header

Postby prototech » Sun Aug 02, 2009 4:58 am

In common.css, find:
Code: Select all
.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;
   height: 147px;
}

Change to:
Code: Select all
.headerbar {
   background: transparent none no-repeat center 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;
   height: 147px;
}

In colours.css, find:
Code: Select all
.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/Header.gif");
   color: #FFFFFF;
}

Remove background-color: #12A3EB;

In overall_header.html, find:
Code: Select all
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
            </div>
            </form>
         </div>
         
</div>

Remove the last </div> then refresh your theme and template.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
User avatar
prototech
Development Team Member
Development Team Member
 
Posts: 5248
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Postby stealth62 » Sun Aug 02, 2009 8:15 am

thanks dude, much help
stealth62
Registered User
 
Posts: 12
Joined: Thu Jan 15, 2009 6:01 am

Re: [How To] Modify prosilver's header

Postby Padfoot Woof » Thu Aug 06, 2009 6:07 am

No, using FTP is the recommended method. :) What you're describing is usually a problem that many who use the ACP editor run into. Can you post a link to your board?


Sorry this is late lol...

Here you go: http://www.rapidreaper.com/forum

As you can see, the height size changed but nothing else... it's just the .css files that won't change. :S
Padfoot Woof
Registered User
 
Posts: 27
Joined: Wed Jul 15, 2009 4:25 am

Re: [How To] Modify prosilver's header

Postby mikeycee » Thu Aug 13, 2009 1:20 am

On my 4th install of phpBB3.... so this tutorial is spon on time :)

Curious about an overview tho.
I edited the html for both stock styles on the index and header html files to add a text link to an integrated (flash) Chat....

Was readily able to see the link but the page was plain white.

Instead of all the deleting and redown-and-uploading and reinstalling.... are you telling me all I had to do was refresh the the styles?

Or, have you reached the point of no return once you get that far??


<btw> bookmarked your tutorial... thanks!!
mikeycee
Registered User
 
Posts: 5
Joined: Wed Aug 12, 2009 10:44 am

Re: [How To] Modify prosilver's header

Postby mikeycee » Thu Aug 13, 2009 2:48 am

Ok... messed around and made prosilver turn ALL white again... but I DO have a link to a working, integrated and resizable chat now!!

How do I get prosilver's background image(s) back??
mikeycee
Registered User
 
Posts: 5
Joined: Wed Aug 12, 2009 10:44 am

Re: [How To] Modify prosilver's header

Postby Lord Panda » Thu Aug 13, 2009 8:33 am

Can someone kindly show me how to center the poster's avatar image and user info?

Image

Thanks in advance :)
User avatar
Lord Panda
Registered User
 
Posts: 1
Joined: Thu Aug 13, 2009 7:50 am
Location: Australia

Re: [How To] Modify prosilver's header

Postby mircovisions » Thu Aug 20, 2009 3:49 am

im using prosilver_se. Does the guide work for this template as well? Also what are the dimensions of the header?
mircovisions
Registered User
 
Posts: 156
Joined: Mon Apr 23, 2007 3:59 pm

Re: [How To] Modify prosilver's header

Postby neo_orange » Sun Aug 23, 2009 5:28 am

I just tried to implement the random header bg images and it worked but I am experiencing some slight issues with refreshing /reloading the page in certain browsers and having the bg header image change.

I tried refreshing the page in IE7, Netscape 7, Firefox (latest version and an older version), Safari, and Opera and the image only changed for me when reloading / refreshing the page in IE7, Netscape 7 and Opera. I really want this to work for me in Firefox. I've cleared all the cache in the browser so it's not that.

Anyone have any ideas? I tried searching for this issue through the 62 pages currently in this mod but didn't find any information about it.

update: it seems like the header bg isn't showing up at all in Firefox 3.5.2 for me.

update2: I think I've found my problem. I'm currently redirecting and masking my domain and that seems to be causing issues with firefox 3.5.2 and the image randomization and just for the image to appear. If I unmask it, I'm guessing it will work. yes, indeed, this was one issue.

update3: one annoyance though is that if I go to my board index and say I get image #3 out of 6, that is the image I will have until I refresh the browser. If I click through to the other threads, etc the header bg image does not change while browsing through different pages.
neo_orange
Registered User
 
Posts: 12
Joined: Fri Aug 14, 2009 6:37 am

Re: [How To] Modify prosilver's header

Postby Alex_EE » Thu Aug 27, 2009 8:16 pm

I want to change the font style in the header. I'm pretty sure I need to go here to do it:

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;
}

The font-family line has me confused on what exactly to change there. Do I replace the one in quotes to affect the header font? Thanks.
Alex_EE
Registered User
 
Posts: 21
Joined: Sat Aug 22, 2009 2:23 pm

Re: [How To] Modify prosilver's header

Postby prototech » Thu Aug 27, 2009 11:09 pm

They're in the order in which they'll be used. For example, if your system does not have Trebuchet MS, then it'll use Arial. If it doesn't have Trebuchet MS or Arial, it'll use Helvetica.. and so on and so forth. I suggest simply adding your font before it. Trebuchet MS is in quotes because it contains more than one word, by the way.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
User avatar
prototech
Development Team Member
Development Team Member
 
Posts: 5248
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Postby Solid_State » Thu Aug 27, 2009 11:29 pm

Proto said

I think it's easier to have a local test installation and make the changes there. Once you're satisfied, then you can upload them to your server.


I am not correcting him/her, just making a note that if you don't feel like ftp'ing constantly, I very much recommend XAMPP or WAMP for your local machine. They will give you full MySQL, PHP, smtp functionality with the convenience of remaining at 127.0.0.1 :) Either will give you full functionality, I just prefer Wamp's interface. Neither is actually better I think unless you aren't on a windows box.

XAMPP: http://www.apachefriends.org/en/xampp.html

WAMPP: http://www.wampserver.com/en/
User avatar
Solid_State
Registered User
 
Posts: 8
Joined: Wed Aug 26, 2009 5:07 pm

Re: [How To] Modify prosilver's header

Postby jesse518 » Wed Sep 02, 2009 1:10 am

Anyone try this with the skin ca_black? its a prosilver based skin but there is no headerbar in colour.css. Here is the code where the headerbar part is supposed to be. So now im confused and I love this skin, and i really love the random header and so does the community im making the forum for
Code: Select all
*     
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
   color: #f0f0f0;
   background-color: #C0C0C0;
   background-image: url("{T_THEME_PATH}/images/content_bg.gif");
}

p {
    color: #f0f0f0;
}

h1, h2 {
   color: #5698CF;
}

h3, div.post-viewprofile h3 {
   color: #5698CF;
   background-image: url("{T_THEME_PATH}/images/bg_h3.gif");
}
.pm-notify-new h3 {
    color: #fff;
}

hr {
   border-color: #1c1c1c;
   border-top-color: #282828;
}
hr.dashed {
   border-top-color: #333;
}
.block-content hr {
    border-color: #232323;
   border-top-color: #3f3f3f;
}

/* Header/footer */
#header-wrapper {
   background-color: #3b3b3b;
   background-image: url("{T_THEME_PATH}/images/bg_body.gif");
}
#header {
   background-color: #000;
   background-image: url("{T_THEME_PATH}/images/bg_logo.gif");
}
#header-left {
   background-image: url("{T_THEME_PATH}/images/logo_left.gif");
}
#header-right {
   background-image: url("{T_THEME_PATH}/images/logo_right.gif");
}

#content-wrapper {
   background-image: url("{T_THEME_PATH}/images/content_top.gif");
}

#content {
    background-color: #1c1c1c;
}

#page-body {
    border-color: #000;
}

#footer span {
   background-image: url("{T_THEME_PATH}/images/content_bottom_left.gif");
}
#footer span span {
   background-image: url("{T_THEME_PATH}/images/content_bottom_right.gif");
}
#footer span span span {
   background-image: url("{T_THEME_PATH}/images/content_bottom.gif");
}

#copyrights {
   color: #444;
}
#copyrights a, #copyrights a:visited {
   color: #444;
}
#copyrights a:hover, #copyrights a:active {
   color: #E0BF07;
}
#copyrights a.acp-link, #copyrights a.acp-link:visited {
    color: #E0BF07;
}
#copyrights a.acp-link:hover, #copyrights a.acp-link:active {
    color: #5698CF;
}
#affiliates {
   color: #444;
}

.topnav {
   background-image: url("{T_THEME_PATH}/images/bg_navbar.gif");
    color: #b0b0b0;
    border-color: #000;
}

#search-box a:link, #search-box a:visited {
    color: #527C9F;
}

.topnav a:link, .topnav a:visited {
   color: #E0BF07;
}
.topnav .current a, .topnav .current a:visited {
    color: #fff;
}

.topnav a:hover, .topnav .current a:hover {
   color: #5698CF;
}

#search-box a:hover, #search-box a:active, .topnav a:active, .topnav .current a:active {
   color: #fff;
}


/* Round cornered boxes and backgrounds
---------------------------------------- */
.block-header {
    background-image: url("{T_THEME_PATH}/images/block_top.gif");
}
.block-header span {
    background-image: url("{T_THEME_PATH}/images/block_top_left.gif");
}
.block-header span span {
    background-image: url("{T_THEME_PATH}/images/block_top_right.gif");
}

.block-footer {
    background-image: url("{T_THEME_PATH}/images/block_bottom.gif");
}
.block-footer span {
    background-image: url("{T_THEME_PATH}/images/block_bottom_left.gif");
}
.block-footer span span {
    background-image: url("{T_THEME_PATH}/images/block_bottom_right.gif");
}

.block-content, .block-post, .block-table {
    border-color: #000;
    background-color: #3b3b3b;
}
.block-inner {
    background-color: #232323;
}
.block-clear, * html .block-clear {
    border-color: #3b3b3b;
}
.rules .block-inner, .block-cp .block-inner, .panel .block-inner, .post .block-inner {
    border-bottom-color: #222;
    border-top-color: #404040;
jesse518
Registered User
 
Posts: 5
Joined: Fri Aug 28, 2009 6:17 pm

PreviousNext

Return to [3.0.x] Styles Support & Discussion

Who is online

Users browsing this forum: bajt3l, Bing [Bot], tigerlylli and 13 guests