Prosilverin headerin muokkaaminen

Oppaita ja ohjeita, How To, Tee-se-itse, jne...
Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 13:48

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

Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Re: Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 13:52

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.

Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Re: Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 13:53

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

Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Re: Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 13:54

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

Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Re: Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 13:58

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.

Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Re: Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 13:59

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.

Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Re: Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 14:01

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.

Avatar
Lurttinen
phpBB nub
phpBB nub
Viestit: 4787
Liittynyt: 13 Marras 2005, 18:41
Paikkakunta: Tampere
Viesti:

Re: Prosilverin headerin muokkaaminen

Viesti Kirjoittaja Lurttinen » 07 Heinä 2011, 14:02

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.

Viestiketju Lukittu

Paikallaolijat

Käyttäjiä lukemassa tätä aluetta: Ei rekisteröityneitä käyttäjiä ja 1 vierailija