[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
User avatar
prototech
Development Team Member
Development Team Member
Posts: 5405
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

[How To] Modify prosilver's header

Postby prototech » Fri Dec 21, 2007 1:34 am

Since many people seem to keep asking how to modify several parts of prosilver's header... I decided to make this tutorial. If anyone has anything they want me to add, please let me know. :) As always, make a back-up of your files before editing them.
Don't forget to refresh the appropriate style component after you have made all the changes by going to your Administration Control Panel => Styles => (Templates/Themes) => prosilver and click on refresh. ;)

Table of Contents

-----------------------------------------------------------------------------------------------------------------------------------

Add a Custom Header Image
1) First of all, upload your image to the styles/prosilver/theme/images/ directory.

2) Open styles/prosilver/theme/common.css
Find:

Code: Select all

.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;

After, add:

Code: Select all

   height: 100px;

Change the height according to your image.

3) Open styles/prosilver/theme/colours.css
Find:

Code: Select all

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}

Change bg_header.gif to the name of your image.

4) Open styles/prosilver/template/overall_header.html
Find:

Code: Select all

<div id="site-description">

Before, add:

Code: Select all

<div style="height: 90px;">

Note: The height must be 10 pixels less than the height of your image!

Find:

Code: Select all

<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

After, add:

Code: Select all

</div>

5) Refresh your theme and template.

-----------------------------------------------------------------------------------------------------------------------------------

Remove Site Logo
1) Open styles/prosilver/template/overall_header.html
Find, and remove:

Code: Select all

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

2) Refresh your template.

-----------------------------------------------------------------------------------------------------------------------------------

Remove Site Name and Description
Open styles/prosilver/template/overall_header.html
Find, and remove:

Code: Select all

<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>


-----------------------------------------------------------------------------------------------------------------------------------

Remove Search Box
1) Open styles/prosilver/template/overall_header.html
Find, and remove:

Code: Select all

<!-- 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 />
               <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

2) Refresh your template.

-----------------------------------------------------------------------------------------------------------------------------------

Add a Random Header Image
This tutorial is based off of the the following article by pentapenguin.
Knowledge Base - Adding a Random Header Image
It will display a random background on the header, rather than the logo as instructed in the mentioned article.

1) Create your images and name them in the following fashion header_random_1.EXTENSION.
  • Start at 1 and move up from there. Make sure you don't miss any numbers.
  • Replace EXTENSION with the extension your images use (gif, png, jpg, etc.) The
    extension must be the same on all images.

2) Upload all the images to the styles/prosilver/theme/images/ directory.

3) Open includes/functions.php.
Find:

Code: Select all

'T_STYLESHEET_NAME'      => $user->theme['theme_name'],

After, add:

Code: Select all

'RANDOM_HEADER'      => mt_rand(1, NUMBER-OF-IMAGES),

  • Change NUMBER-OF-IMAGES to the amount of images you created.

4) Open style.php.
Find:

Code: Select all

      '{S_USER_LANG}'            => $user['user_lang']

Replace with:

Code: Select all

      '{S_USER_LANG}'            => $user['user_lang'],
      '{RANDOM_HEADER}'      => mt_rand(1, NUMBER-OF-IMAGES)

  • As before, change NUMBER-OF-IMAGES to the amount of images you created.

5) Open styles/prosilver/theme/colours.css.
Find:

Code: Select all

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}

Replace with:

Code: Select all

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/header_random_{RANDOM_HEADER}.EXTENSION");
   color: #FFFFFF;
}

  • Change EXTENSION to the extension your images use.

6) Refresh your theme.

-----------------------------------------------------------------------------------------------------------------------------------

Replace "Change font size" icon with search box
1) Open styles/prosilver/template/overall_header.html.
Find:

Code: Select all

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

Replace with:

Code: Select all

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

2) Open styles/prosilver/theme/common.css.
Find:

Code: Select all

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

Replace with:

Code: Select all

#search-box {
  color: #FFFFFF;
  position: relative;
  display: block;
  text-align: right;
  white-space: nowrap; /* For Opera */
  line-height: 1em;
}

3) Refresh your theme and template.

-----------------------------------------------------------------------------------------------------------------------------------

Add search icon to navigation
1) Open styles/prosilver/template/overall_header.html.
Find:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

After, add:

Code: Select all

<li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li>

2) Refresh your template.
Last edited by prototech on Fri Dec 09, 2011 8:02 am, edited 5 times in total.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

User avatar
kam009
Registered User
Posts: 76
Joined: Wed Dec 19, 2007 3:37 am

Re: [How To] Modify prosilver's header

Postby kam009 » Fri Dec 21, 2007 5:35 am

just in time! :D :D :D

Ur awesome dude... great respect for U :D

User avatar
kam009
Registered User
Posts: 76
Joined: Wed Dec 19, 2007 3:37 am

Re: [How To] Modify prosilver's header

Postby kam009 » Fri Dec 21, 2007 5:59 am

Ok, after many many hours of work and sweat, i managed to get my header to show... So here is what i don't get.

http://img171.imageshack.us/img171/1922/errorml1.png

red part: those 2 pointy things show i don't know what to do. oh and when you log out, they move up a couple inches. you can take a look at it on my live site.

Blue part: I tried what you said in your post but it somehow didn't work.

Yellow part: I deleted the part you said in over_all... file but still didn't work.

here is the website address incase you need to look at it directly.
http://www.pariro.com


btw i have done numerious refreshes from the ACP but nothing changed.
Thanks buddy!

User avatar
prototech
Development Team Member
Development Team Member
Posts: 5405
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Postby prototech » Fri Dec 21, 2007 9:27 am

Are you sure you followed all the steps? I can already see that you're missing some things, which is why it appears incorrectly. Can you take a look at each step and make sure you made all the changes? :)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

CarlT
Registered User
Posts: 2
Joined: Thu Dec 20, 2007 8:08 pm

Re: [How To] Modify prosilver's header

Postby CarlT » Fri Dec 21, 2007 2:20 pm

Brilliant guide thanks

datkeoniguy
Registered User
Posts: 150
Joined: Sat Jan 24, 2004 8:11 pm

Re: [How To] Modify prosilver's header

Postby datkeoniguy » Mon Dec 24, 2007 4:04 pm

I followed the above instructions and it worked fine. However, I would like to be able to click on my banner's image (see your step 3 above) and link back to the forum index page. This ability was removed in the instructions above. Is there a way to do this?

User avatar
prototech
Development Team Member
Development Team Member
Posts: 5405
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Postby prototech » Mon Dec 24, 2007 6:56 pm

Try this..
Open styles/prosilver/template/overall_header.html
Find:

Code: Select all

<div id="site-description">

After, add:

Code: Select all

<a href="{U_INDEX}" title="{L_INDEX}" id="header-link">Index</a>

Open styles/prosilver/theme/colours.css
At the end of the file, add

Code: Select all

a#header-link {
  display: block;
  width: auto;
  height: 100px; /* Change according to your needs */
  text-indent: -1000px;
}
Last edited by prototech on Sat Jan 26, 2008 1:09 am, edited 2 times in total.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

datkeoniguy
Registered User
Posts: 150
Joined: Sat Jan 24, 2004 8:11 pm

Re: [How To] Modify prosilver's header

Postby datkeoniguy » Tue Dec 25, 2007 3:18 pm

I followed the above instruction but can't see any change. If I go to different places within the forum, clicking on the banner does nothing and does not take me back to the main index page of the forum. And yes I did refresh theme, template and imageset -twice in fact, and refreshed the browser.

ssace
Registered User
Posts: 8
Joined: Sun Oct 15, 2006 1:02 pm

Re: [How To] Modify prosilver's header

Postby ssace » Tue Dec 25, 2007 9:28 pm

I tried this to and it didn't work. Not header link there.

bennzy
Registered User
Posts: 36
Joined: Mon Nov 26, 2007 8:37 am

Re: [How To] Modify prosilver's header

Postby bennzy » Wed Dec 26, 2007 3:52 am

everything is displaying which is good surprised i got it that far, but i seem to be having some problems like another user was in here.

here is the problems ---> http://i134.photobucket.com/albums/q120 ... banner.jpg

the bottom of the banner doesnt have the curved edges and also have those two white mark things one on each side. ive done everything i believe i did right in the instructions you have done but just cant seem to see whats wrong.

User avatar
prototech
Development Team Member
Development Team Member
Posts: 5405
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Postby prototech » Wed Dec 26, 2007 4:12 am

datkeoniguy wrote:I followed the above instruction but can't see any change. If I go to different places within the forum, clicking on the banner does nothing and does not take me back to the main index page of the forum. And yes I did refresh theme, template and imageset -twice in fact, and refreshed the browser.

Change height: auto to the height of your header. If it still doesn't work, please provide me with a link to your board so I can look into further; it works perfectly on my installation.

bennzy wrote:the bottom of the banner doesnt have the curved edges and also have those two white mark things one on each side. ive done everything i believe i did right in the instructions you have done but just cant seem to see whats wrong.

Did you adjust the height in this step?
prototech wrote:Before, add:

Code: Select all

<div style="height: 90px ;">

Note: The height must be 10px less than the height of your image!
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

User avatar
Angel-girl
Registered User
Posts: 130
Joined: Mon May 14, 2007 11:56 am

Re: [How To] Modify prosilver's header

Postby Angel-girl » Wed Dec 26, 2007 4:26 am

I have perhaps a noobish question. I can understand everything that's being said here (I believe), but is it easier to do these edits before one has uploaded the files?

Also, I can find none of that code in the aphotic umbra skin I just downloaded. Bleh, I'm an idiot.
Last edited by Angel-girl on Wed Dec 26, 2007 4:34 am, edited 1 time in total.
Follow me to Alphabet City

bennzy
Registered User
Posts: 36
Joined: Mon Nov 26, 2007 8:37 am

Re: [How To] Modify prosilver's header

Postby bennzy » Wed Dec 26, 2007 4:29 am

yeah i did, but for some reason it didnt change to the new size but all good now fixed it and it works, thanks for that :D

User avatar
prototech
Development Team Member
Development Team Member
Posts: 5405
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Postby prototech » Wed Dec 26, 2007 4:41 am

Angel-girl wrote:I have perhaps a noobish question. I can understand everything that's being said here (I believe), but is it easier to do these edits before one has uploaded the files?

Also, I can find none of that code in the aphotic umbra skin I just downloaded. Bleh, I'm an idiot.

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. That way if anything goes wrong, your live installation is still working as it should be.

These changes are intended for prosilver-based styles. Aphotic Umbra is based on subsilver2. :)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

User avatar
Angel-girl
Registered User
Posts: 130
Joined: Mon May 14, 2007 11:56 am

Re: [How To] Modify prosilver's header

Postby Angel-girl » Wed Dec 26, 2007 4:43 am

Oops, my face is red. No wonder. Hee. Thanks.

Though it says prosilver in the desc. I found subsilver directions and followed them. If only my ftp client would cooperate, I could test them.
Last edited by Angel-girl on Wed Dec 26, 2007 1:00 pm, edited 1 time in total.
Follow me to Alphabet City


Return to “[3.0.x] Styles Support & Discussion”

Who is online

Users browsing this forum: No registered users and 19 guests