I Need Help Changing My Header

[wilkc]

Hi All,

I want to edit the (guessing) header portion of my board (http://www.nwtampa.com/westchaseforums/) by replacing the "W" and the words and the blue color (just at top) with a static jpg file. How do I do that and also ... what are the dimensions of the blue area so I can have my jpg file the same size?

Thanks

[AdamR]

You can do this by editing the styles/prosilver/template/overall_header.html file with the necessary HTML. You'll be looking for the following:

Code: Select all

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

In other news, I live right around the corner from Westchase.

- Adam

[wilkc]

Small world .... Where?

[AdamR]

Small world .... Where?

Carrollwood.

- Adam

[wilkc]

We used to live in Carrollwood Village. Miss the restaurants over there.

So, back to my header question. Keep in mind that I want my graphic to span the entire width of the table. In essence, if you look at my page, I want to replace the top section where the W is, AND THE BLUE, with a graphic.

[AdamR]

If you want to replace the entire blue section, you'll need to place your header in place of the following code:

Code: Select all

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

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

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

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

Note that this will also remove the search bar from the page. If you want to place the search elsewhere, you'll need to use the following code where you place it:

Code: Select all

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

- Adam

[wilkc]

You lost me at "...in place of the following code:"

So if I have a jpg file called example.jpg, and I UL it to my images folder, then you're saying that I replace the entire block of code in your first box (in the post above) with what exactly???

[AdamR]

If you want to put a static image in it's place, simply replace that first block of code with:

Code: Select all

<img src="http://locationofimage.com/image.jpg" />

Perhaps surround it with <a href=""></a> to make it a link back to the home page. It's all based on how you want to do it.

Also, be sure after you make this change to "Purge the cache" from the front page of your Admin Panel.

- Adam

[wilkc]

Just so I'm clear, because I'm bout to do it...which block of code am I replaceing? The very first block you posted (with the site_logo_img reference, or the first block in your second post??

Thx

[AdamR]

First block in the second post:

Code: Select all

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

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <h1>{SITENAME}</h1>
            <p>{SITE_DESCRIPTION}</p>
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

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

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

- Adam

[wilkc]

Hey, it worked like a charm.

I don't prticularly like the graphic (I just copied it from the WC golf website), but I needed a quick file to work with to see if this would work. Now all I have to do is replace the golf course with a graphic of my creation and I'll be all set.

BTW, now that I've done it --thanks to your help, does the graphic "style" look OK or should I just stick to ole blue?

[AdamR]

Not a problem.

It looks pretty good, actually, in my opinion. Though you may consider finding a style that fits it a bit better. While no 3.0.x styles have been officially released and validated, you can take a browse through the in-development 3.0.x styles forum:
http://www.phpbb.com/community/viewforum.php?f=74

Remember: It's your forum. Do what you want with it.

- Adam

[LaetusAtheos]

What code would I remove to just remove the search from the header? I want to move it out of the header and just have a link for search next to FAQ (like how it is on this site).

I tried removing it myself fro overall_header.html but must have done something wrong because I got some sort of error. I'm using prosilver.

edit: Ok...well by just reading through 3.0 support topics I found http://www.phpbb.com/community/viewtopi ... 205#header

It tells me how to remove the search box from the header.

So...how do I go about the second step of placing a search link between FAQ and Members like done here?

edit again: I think I found my answer... http://www.phpbb.com/community/viewtopi ... 5#p3728355