Sivu 1/1
Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 13:48
Kirjoittaja 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
Re: Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 13:52
Kirjoittaja 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:
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:
Lisää tätä ennen:
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:
5) Virkistä Teema ja Malline.
Re: Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 13:53
Kirjoittaja 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
Re: Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 13:54
Kirjoittaja Lurttinen
Poista foorumin nimi ja kuvaus
1) Avaa styles/prosilver/template/
overall_header.html
Etsi ja poista:
2) Virkistä Malline
Re: Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 13:58
Kirjoittaja 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.
Re: Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 13:59
Kirjoittaja 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:
- Vaihda NUMBER-OF-IMAGES vastaamaan luomiesi kuvien määrää.
4) Avaa
style.php.
Etsi:
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.
Re: Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 14:01
Kirjoittaja 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.
Re: Prosilverin headerin muokkaaminen
Lähetetty: 07 Heinä 2011, 14:02
Kirjoittaja 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.