Prosilverin headerin muokkaaminen

[Lurttinen]

Muutama muokkaus, joilla voi lisätä vaikkapa oman kuvan headeriin tai siirtää hakulaatikon linkiksi navigointipalkkiin. Tämä ohje perustuu phpbb.comissa olevaan samanlaiseen viestiketjuun ja näiden ohjeiden avulla on toteutettu (ainakin sinnepäin) myös phpBB Suomen headeri.

Muista virkistää tyylin komponentit aina muokkauksen jälkeen, jotta muutokset tulevat näkyviin ja ota varmuuskopiot muokattavista tiedostoista.


Sisällysluettelo

• Oma banneri sivun yläreunaan
• Poista foorumin logo
• Poista foorumin nimi ja kuvaus
• Poista hakulaatikko
• Satunnaisesti vaihtuva banneri sivun yläreunaan
• Vaihda "fontin koko" -nappula etsintälaatikoksi
• Lisää Etsi-linkki navigointipalkkiin

[Lurttinen]

Oma banneri sivun yläreunaan

1) Siirrä kuvasi styles/prosilver/theme/images/ -hakemistoon.

2) Avaa styles/prosilver/theme/common.css
Etsi:

Koodi: Valitse kaikki

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

Lisää perään:

Koodi: Valitse kaikki

	height: 100px;

Huomaa: Tässä esimerkissä kuvan koko on 100px. Vaihda tämä vastaamaan kuvasi oikeaa kokoa.

3) Avaa styles/prosilver/theme/colours.css
Etsi:

Koodi: Valitse kaikki

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

Muuta bg_header.gif saman nimiseksi, kuin haluamasi kuva on.

4) Avaa styles/prosilver/template/overall_header.html
Etsi:

Koodi: Valitse kaikki

<div id="site-description">

Lisää tätä ennen:

Koodi: Valitse kaikki

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

Huomaa: Koko tulee määritellä 10px pienemmäksi, mitä kuvan oikea koko on. Jos kuvan koko on 100px, laita tähän 90px

Etsi:

Koodi: Valitse kaikki

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

Lisää perään:

Koodi: Valitse kaikki

</div>

5) Virkistä Teema ja Malline.

[Lurttinen]

Poista foorumin logo

1) Avaa styles/prosilver/template/overall_header.html
Etsi ja poista:

Koodi: Valitse kaikki

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

2)Virkistä Malline

[Lurttinen]

Poista foorumin nimi ja kuvaus

1) Avaa styles/prosilver/template/overall_header.html
Etsi ja poista:

Koodi: Valitse kaikki

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

2) Virkistä Malline

[Lurttinen]

Poista hakulaatikko

1) Avaa styles/prosilver/template/overall_header.html
Etsi ja poista:

Koodi: Valitse kaikki

<!-- 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) Virkistä malline.

[Lurttinen]

Satunnaisesti vaihtuva banneri sivun yläreunaan

Tämä ohje perustuu pentapenguinin kirjoittamaan oppaaseen.
Knowledge Base - Adding a Random Header Image
Tämä ohje vaihtaa headerin taustakuvaa, logon sijasta.

1) Luo kuvat ja nimeä ne tällä tavalla header_random_1.EXTENSION.

• Aloita numerosta 1 ja jatka siitä ylöspäin. Älä jätä numeroita välistä.
• Vaihda EXTENSION, vaihda "extension" sille tiedoston tunnisteelle, jota kuvat käyttävät (gif, png, jpg, jne...)
  Tiedostojen tunnisteen tulee olla samat kaikissa kuvissa.

2) Siirrä kuvat styles/prosilver/theme/images/ -hakemistoon.

3) Avaa includes/functions.php.
Find:

Koodi: Valitse kaikki

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

Lisää perään:

Koodi: Valitse kaikki

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

• Vaihda NUMBER-OF-IMAGES vastaamaan luomiesi kuvien määrää.

4) Avaa style.php.
Etsi:

Koodi: Valitse kaikki

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

korvaa tällä:

Koodi: Valitse kaikki

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

• Kuten edellä, vaihda NUMBER-OF-IMAGES vastaamaan luomiesi kuvien määrää.

5) Avaa styles/prosilver/theme/colours.css.
Etsi:

Koodi: Valitse kaikki

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

Korvaa tällä:

Koodi: Valitse kaikki

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

• Muuta EXTENSION samaksi mitä kuviesi tiedoston tunniste on.

6) Virkistä Teema.

[Lurttinen]

Vaihda "fontin koko" -nappula etsintälaatikoksi

1) Avaa styles/prosilver/template/overall_header.html.
Etsi:

Koodi: Valitse kaikki

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

Korvaa tällä:

Koodi: Valitse kaikki

				<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) Avaa styles/prosilver/theme/common.css.
Etsi:

Koodi: Valitse kaikki

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

Korvaa tällä:

Koodi: Valitse kaikki

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

3) Virkistä Teema ja Malline.

[Lurttinen]

Lisää Etsi-linkki navigointipalkkiin

1) Avaa styles/prosilver/template/overall_header.html.
Etsi:

Koodi: Valitse kaikki

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

Lisää perään, samalle riville:

Koodi: Valitse kaikki

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

2) Virkistä Malline.