Header plaatsen

[Jeroen-Xtreme]

Hallo jongens,

we zouden graag een header plaatsen op ons forum. De header zouden we zelf maken.
Dit is het forum: www.z-owners.be/forum

De header zou ik willen plaatsen over dat groen. Maar nu vind ik niet hoe ik daar iets over kan zetten qua afbeelding. Het enigste wat ik vind is site_logo.png maar dit is precies echt wel geminimaliseerd. Dit is dus echt niet groot precies.

Kan iemand mij dus helpen zodat de header over heel die groene achtergrond kan plaatsen?
De header moeten we nog maken maar we weten nog niet hoe groot hij kan zijn.

Kan iemand ons helpen?

Ik hoor het graag.

Dank jullie!

Gr. Jeroen

[Pola]

Ik zie dat het bestand /styles/lucid_lime/template/overall_header.html anders is dan het huidige origineel uit de style. Ik denk dat je dat beter kunt aanpassen.
Daarvoor moet je het volgende deel zoeken:

Code: Selecteer alles

			<div style="height: 125px;">
			<table id="site-description" style="width:auto;"><tr>
				<td style="width:243px;"><a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a></td>            <td><div style="vertical-align:middle;"><h1 style="font-size:21px!important;">{SITENAME}</h1>
            <p style="font-size:12px!important;">{SITE_DESCRIPTION}</p></div>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p></td>
			</tr></table>
 
		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" 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 -->
        </div>

en vervangen door

Code: Selecteer alles

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                <div style="margin-top: 36px; max-height: 65px;"><h1>{SITENAME}</h1>
            	<p style="font-size: 1.2em;">{SITE_DESCRIPTION}</p></div>
				<p class="skiplink"><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="get" 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 -->

Vervolgens kun je de afbeelding maken zoals je hem wilt en hem uploaden naar /styles/lucid_lime/imageset/.
Je moet daarnaast het bestand /styles/lucid_lime/imageset/imageset.cfg aanpassen.

Zoek

Code: Selecteer alles

img_site_logo = site_logo.png*104*243

Vervang dan site_logo.png door de nieuwe naam, 104 door de nieuwe hoogte en 243 door de nieuwe breedte.
Als je een banner over de volledige breedte wilt maken en je wilt de titel en omschrijving van het forum verwerken in de banner, dan kun je de tekst die nu nog in de banner staat verwijderen door het bestand /styles/lucid_lime/template/overall_header.html nog eens aan te passen en de volgende regels te verwijderen:

Code: Selecteer alles

            	<p style="font-size: 1.2em;">{SITE_DESCRIPTION}</p></div>
                <div style="margin-top: 36px; max-height: 65px;"><h1>{SITENAME}</h1>

Volgens mij zou het dan moeten werken. Als er dan nog iets raars in zit, dan kunnen we daar nog een kijkje naar nemen.

[Jeroen-Xtreme]

Dit heb ik momenteel al:

http://z-owners.be/forum/

Hoe kan ik dat flashy groen bovenaan vervangen door dezelfde grijze tint als het forum?
Dan zet ik gewoon kleine header daarop.

[Kevin]

Het is een afbeelding die je kunt vinden in je theme/images map

Hij word gedefinieerd waarschijnlijk in colours.css

Code: Selecteer alles

.headerbar

als je dit verwijdert

Code: Selecteer alles

background-image: url("./styles/lucid_lime/theme/images/bg_header.png");

en deze aanpast

Code: Selecteer alles

background-color: #161616;

naar

Code: Selecteer alles

background-color: #353535;

Zou het goed moeten zijn.

[Pola]

Wil je eerst de volgende aanpassing doen?

Open /styles/lucid_lime/theme/common.css

Zoek

Code: Selecteer alles

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

Vervang door

Code: Selecteer alles

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

Hiermee zorg je ervoor dat de afbeelding in de header ook past in de headerbar.

Als je dan de groene kleur wilt aanpassen, kun je de instructies van Kevin volgen.
De regel die verwijderd moet worden is:

Code: Selecteer alles

	background-image: url("{T_THEME_PATH}/images/bg_header.png");

[Jeroen-Xtreme]

Ok, morgen vervang ik ze!

[Jeroen-Xtreme]

Hey jongens,

Ik heb alles wat jullie hier zeiden vervangen.
Maar kijk nu heb ik dit nog steeds:
www.z-owners.be/forum

Wat kan ik nog doen?
Btw. ik upload gewoon bij imageset: site_logo.png
Die zou eigenlijk perfect in het groen moeten komen.

Ik zou graag eigenlijk heel dat groen vervangen door een header.
Hoe doe je dit? En wat zijn dan de afmetingen van de header?

[Pola]

Heb je in het beheerderpaneel bij STIJLEN - Thema's ook Vernieuw gegeven? Daarmee verwijder je de thema bestanden uit de cache folder.
Dan moet je in je browser misschien nog <CTRL><F5> en dan zouden de wijzigingen zichtbaar moeten zijn.

[Jeroen-Xtreme]

Heb je in het beheerderpaneel bij STIJLEN - Thema's ook Vernieuw gegeven? Daarmee verwijder je de thema bestanden uit de cache folder.
Dan moet je in je browser misschien nog <CTRL><F5> en dan zouden de wijzigingen zichtbaar moeten zijn.

Super! Dat was ik inderdaad vergeten ja.
Kan jij ook zien wat ongeveer de maximum grote is van de header die ik daar zou kunnen plaatsen?

Groetjes.

[Jeroen-Xtreme]

Oh ja, hoe kan ik dat fluo groen eigenlijk terug zetten als achtergrond?
Ik zie dat het tussen de topics ook weg is enzo... Dat was eigenlijk niet de bedoeling.

[Pola]

Zou je eerst nog iets anders willen doen?

In je /styles/lucid_lime/theme/colours.css komt diverse malen het volgende voor:

Code: Selecteer alles

../{T_THEME_PATH}

Zou je die allemaal willen vervangen door

Code: Selecteer alles

{T_THEME_PATH}

Daarna saven, uploaden, het thema vernieuwen in het beheerderspaneel en <CTRL><F5> in je browser geven.

Kan jij ook zien wat ongeveer de maximum grote is van de header die ik daar zou kunnen plaatsen?

Als jij in /styles/lucid_lime/imageset/imageset.cfg de juiste naam en afmetingen geeft, dan past de header zich zo aan dat de afbeelding past.

[Jeroen-Xtreme]

Ok alles lijkt mij in orde. Behalve..

Als je nu naar de header kijkt zie je in alle hoeken zo'n klein rechthoekje |_ ? (dit zie je klein beetje verder dan de huidige header)


En automatisch begint de header halve centimeter van de linkske kant. Ik had graag de afmetingen van de header zo waar die zwarte rechthoekjes staan. Zodat alles mooi met het forum in 1 recht lijn loopt.
De header moet daarom ook nog meer naar links beginnen hé.

Ik hoop dat jullie het snappen.



Bekijk hier int groot!
http://oi39.tinypic.com/4rbzu0.jpg

[Pola]

Als je nu naar de header kijkt zie je in alle hoeken zo'n klein rechthoekje |_ ? (dit zie je klein beetje verder dan de huidige header)

Die kleine hoekjes zijn origineel bedoeld om ronde hoekjes te maken. Het zijn kleine afbeeldingen in de folder /styles/lucid_lime/theme/images. Je kunt de afbeeldingen de kleur geven van de achtergrond van je forum of de volgende aanpassingen doen in /styles/lucid_lime/theme/colours.css:

Zoek en verwijder

Code: Selecteer alles

span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

Zoek en verwijder

Code: Selecteer alles

#cp-main span.corners-top, #cp-menu span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left2.png");
}

#cp-main span.corners-top span, #cp-menu span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right2.png");
}

#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left2.png");
}

#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right2.png");
}

/* Topicreview */
#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

En automatisch begint de header halve centimeter van de linkske kant. Ik had graag de afmetingen van de header zo waar die zwarte rechthoekjes staan. Zodat alles mooi met het forum in 1 recht lijn loopt.
De header moet daarom ook nog meer naar links beginnen hé.

Wil je om het logo naar links te schuiven de volgende wijziging doen in /styles/lucid_lime/theme/common.css:

Zoek

Code: Selecteer alles

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

Vervang door

Code: Selecteer alles

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 0px;
}

[Jeroen-Xtreme]

Bedankt!

[Jeroen-Xtreme]

Nog een vraagje,

Waarom zie ik op de laptop dat de header te groot is voor het forum? Komt dus niet mooi overeen met het forum. Op mijn vaste pc met 20" scherm staat de header mooi gelijk met het forum ..

Hmm? Hoe weet ik nu wat de juiste afmetingen zijn van de header zodat ze gelijk komen met het forum?

Hier een printscreen van op de laptop:

[Pola]

Ook op mijn 19" scherm (met resolutie 1280x1024) is je afbeelding in de header te groot. De afbeelding is namelijk 1375 pixels breed.

Je forum heeft een variabele breedte. Dit kun je ook zelf zien door je browser scherm te verkleinen.

Je hebt mijns inziens twee opties.

1. Een afbeelding in de header plaatsen met een maximale breedte van bv. 850 pixels. Dat betekent dat de afbeelding in de header normaal gesproken kleiner is dan de breedte van je forum. Je kunt dan nog kiezen of je de afbeelding links wilt uitlijnen of wilt centreren.
2. Je forum een vaste breedte geven, overeenkomend met de breedte van de afbeelding in de header. Ook in dat geval zou ik er niet voor kiezen om de afbeelding zo groot te maken als je nu hebt. Dan zou op je laptop (en bij alle anderen die een resolutie van 1280x1024 of kleiner hebben) het forum breder zijn dan het beeldscherm.
   Engelstalige instructies voor een forum met vaste breedte (voor stijlen gebaseerd op prosilver) zijn hier te vinden: Knowledge Base - Fixed width prosilver.

[Jeroen-Xtreme]

De 2de optie lijkt mij dan het beste?
Gewoon de afmetingen van het forum vastleggen samen met die van de header.
We willen een nieuwe header maken maar we wisten echt nog niet welke afmeting.

Mag ik exact dezelfde dingen doen van op die link?
Gewoon zoeken en vervangen?

[Pola]

De 2de optie lijkt mij dan het beste?

Dat is een kwestie van smaak.
phpbb.nl en phpbb.com hebben een vaste breedte.
Op mijn eigen forum heb ik variabele breedte, een header met eigen achtergrondkleur en afgeronde hoeken en daar een afbeelding in van 850 px.

Mag ik exact dezelfde dingen doen van op die link?
Gewoon zoeken en vervangen?

Ja, en achter width: staat dan de breedte.

[Jeroen-Xtreme]

Bedankt! Zal het dit weekend eens proberen.
Mag ik de url van je forum eens? Ben eens benieuwd naar jouw header enzo.

Groetjes Jeroen