Header aanpassen

[emrulez]

Hoe verander ik dit
http://i13.tinypic.com/63mpjd0.png

in

http://www.tgsites.nl/images/gamerznation.png

Ik wil als het kan de zoek box behouden

[tbsites]

Kijk even in het controle paneel->stijlen->Templates en kies bij template bestand overall_header.html zoek in de code naar:

Code: Selecteer alles

<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_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

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

en verander dat in <img src="http://jouwlink" width="?" height="?">

[emrulez]

Hoe kan ik de zoekbox behouden?

[Semi_Deus]

Kijk even in het controle paneel->stijlen->Templates en kies bij template bestand overall_header.html zoek in de code naar:

Code: Selecteer alles

<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_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

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

en verander dat in <img src="http://jouwlink" width="?" height="?">

Dit is niet het handigste om te doen. Het is handiger om de bg_header.gif te vervangen door jouw bg_header.gif. dan in de theme zoeken naar bg_header.gif (met CTRL+F) dan in die class (die waarschijnlijk iets van: .header zal zijn, de height veranderen, of toevoegen doormiddel van:

height: ...px;

(verander de puntjes door jouw hoogte)

(als het goed is blijft de searchbox gewoon staan waar hij was.(Als je daar tenminste niets aan veranderd hebt))

[emrulez]

dus ik moet de bg_header.gif vervangen door mijn afbeelding?

[Semi_Deus]

klopt, maar dan moet je die natuurlijk ook bg_header.gif noemen.
En daarna moet je dus de goede height instellen.

[Coen]

klopt, maar dan moet je die natuurlijk ook bg_header.gif noemen.
En daarna moet je dus de goede height instellen.

Dat is dus niet echt heel erg slim te noemen. Stel nou dat je een afbeelding maakt van 900px breed. Ik bekijk die site op een resolutie van 1440px breed. Dan is mijn browser ongeveer 1400px breed (als ik mijn venster maximaliseer). Ik krijg dan de complete afbeelding twee maal te zien! Wat je beter kunt doen, is de achtergrond (bg_header.gif) aanpassen en er de nieuwe achtergrond van maken.

Vervolgens maak je een nieuwe afbeelding en deze geef je dezelfde naam als het huidige forum-logo heeft. Zo word het logo niet telkens herhaald en zal het een mooier resultaat opleveren!

Wijziging: Ik lees mijn post net terug en het oogt wat chaotisch, mocht het niet duidelijk zijn, laat het even weten dan leg ik het nog eens (wat duidelijker) uit!

[Semi_Deus]

Het is misschien niet slim te noemen, maar ik heb het wel goed uitgelegd zoals emrulez het wilde.

Hij wou namelijk dit plaatje: http://www.tgsites.nl/images/gamerznation.png in de header, en die heeft een vaste width dus kan het niet anders..
Dus als je jouw manier doet, dan wordt het juist niet echt zijn manier, omdat het dan links uitgelijnd is.

[Coen]

Het is misschien niet slim te noemen, maar ik heb het wel goed uitgelegd zoals emrulez het wilde.

Hij wou namelijk dit plaatje: http://www.tgsites.nl/images/gamerznation.png in de header, en die heeft een vaste width dus kan het niet anders..
Dus als je jouw manier doet, dan wordt het juist niet echt zijn manier, omdat het dan links uitgelijnd is.

Helemaal waar, maar je snap mijn punt toch wel? Wat hij nu het beste kan doen, is alles behalve de achtergrond op een transparante achtergrond plaatsen en die als logo gebruiken!

Tenzij zijn forum helemaal fixed qua breedte is natuurlijk, maar dat is op dit moment nog gokken!

[Semi_Deus]

Ja, ik snap wat je bedoelt is ook mooier. En inderdaad als hij zijn forum breedte aanpast, en in het midden uitlijnt dan zou het helemaal mooi zijn denk ik.

Wijziging: Ah wacht, ik zie dat hij Brushed Metal van Robin Huurman gebruikt. Dan komt het dus niet helemaal goed.. hij moet dan namelijk een flash object gaan vervangen!! dit is dus even wat anders..

[emrulez]

Ja, ik snap wat je bedoelt is ook mooier. En inderdaad als hij zijn forum breedte aanpast, en in het midden uitlijnt dan zou het helemaal mooi zijn denk ik.

Wijziging: Ah wacht, ik zie dat hij Brushed Metal van Robin Huurman gebruikt. Dan komt het dus niet helemaal goed.. hij moet dan namelijk een flash object gaan vervangen!! dit is dus even wat anders..

Ik ga de header van mijn test site vervangen zie http://gamerz-nation.dotbashosting.nl/forum wat is nou het beste manier?

[Coen]

Ik ga de header van mijn test site vervangen zie http://gamerz-nation.dotbashosting.nl/forum wat is nou het beste manier?

Volgens mij is het een heel eind gelukt, is het niet?

Nu is alleen de inhoud nog minder breed, dan de header!

[emrulez]

Ik ga de header van mijn test site vervangen zie http://gamerz-nation.dotbashosting.nl/forum wat is nou het beste manier?

Volgens mij is het een heel eind gelukt, is het niet?

Nu is alleen de inhoud nog minder breed, dan de header!

Het is gelukt jah maar ik denk tog at ik een andere afbeelding a gebruiken maar ik hou deze voorlopig maar wat is nou de beste manier om het te vervangen want ik wil graag ook de zoekbox behouden

[Semi_Deus]

Je hebt het probleem dat je een stijl gebruikt die geen bg_header.gif gebruikt.
De stijl die jij gebruikt heeft een flash object als header. Zou je overall_header.html hier eens kunnen plaatsen?

[emrulez]

Je hebt het probleem dat je een stijl gebruikt die geen bg_header.gif gebruikt.
De stijl die jij gebruikt heeft een flash object als header. Zou je overall_header.html hier eens kunnen plaatsen?

zoals ik al zei ik ga het doen op mijn test forum die prosilver heeft als stijl

[Semi_Deus]

oke, dan kan je gewoon bg_header inderdaad vervangen, zoals ik het eerst al zei..

[emrulez]

het ziet er nu zo uit http://gamerz-nation.dotbashosting.nl/forum/

[Semi_Deus]

nu moet je je forum nog iets smaller maken zodat hij even smal is als het plaatje.
Dan moet je nog de goede hoogte instellen van de header.

(zorg dat je niet de hoogte van je plaatje aanpast, maar die van de class.)

[Pascal]

Waar kan ik de header vinden? in de styles map?

[Coen]

Waar kan ik de header vinden? in de styles map?

Jup, deze vind je in styles/prosilver/template/overall_header.html!