Header

[turbofloppie]

Hallo allenmaal,
ik zit met het volgende probleem.
Ik heb een plaatje gemaakt (800 breed en 100 hoog) die ik wil gebruiken als header.
Het is de bedoeling dat deze de phpbb logo en de sitetekst vervangt.
Ik heb zoveel hierover gelezen maar kom er toch niet uit.
Wie zou mij hiermee kunnen helpen of een makkelijke beschrijving weten ?

[David]

Hoe goed begrijp je Engels? Ik denk dat jij er met dit artikel wel uit komt: https://www.phpbb.com/community/viewtopic.php?t=639205 Als je nog vragen hebt stel ze gerust!

[turbofloppie]

Bedankt David.
Ik had dit al geprobeerd maar zonder succes.
Ik gebruik subsilver2, weet niet of het daaraan ligt.

[Theriddler]

Open: styles/subsilver2/template/overall_header.html

Zoek:

Code: Selecteer alles

       <div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
		</tr>
		</table>
	</div>

Vervang met:

Code: Selecteer alles

<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
		</tr>
		</table>
	</div>

Wellicht zul je nog iets moeten veranderen in /styles/subsilver2/theme/stylesheet.css

in het volgende stukje:

Code: Selecteer alles

#logodesc {

Maar helaas heb je geen forum link naar je forum geplaatst dus kan ik dat niet bekijken

[turbofloppie]

Yess !!! ben nu een stuk verder.
Heb in stylesheet.css het volgende veranderd :

Code: Selecteer alles

#logodesc {
	background-color: #FFFFFF;
     background-repeat: repeat-x;
	background-position: center bottom;
	padding: 0 25px 15px 25px;
}

Heb nu het plaatje, alleen staat hij niet recht.
Hoe zou ik dat nog kunnen veranderen ?
ps hij staat op ph34rm3.nl

[Theriddler]

verwijder uit jou code het volgende:

Code: Selecteer alles

padding: 0 25px 15px 25px;

en maak daar bijv van:

Code: Selecteer alles

padding-bottom: 10px;

[turbofloppie]

Toppie bedankt !
Dit werkt
Kan ik hier nog een border omheen doen met deze kleur : #a9b8c2 ?

[Pola]

Je kunt het volgende toevoegen:

Code: Selecteer alles

   border-style: solid;
   border-color: #a9b8c2;

[turbofloppie]

Oeps dat ging niet echt goed.
Hoe krijg ik het recht ?
http://www.ph34rm3.nl

[Theriddler]

Oeps dat ging niet echt goed.
Hoe krijg ik het recht ?
http://www.ph34rm3.nl

Zoek:

Code: Selecteer alles

paddin-bottom: 10px;

verander naar:

Code: Selecteer alles

width: 1005px;

[Pola]

Ik zou het iets anders oplossen.
Het probleem is namelijk dat je een vaste breedte van 1000 pixels ingesteld hebt, maar tegelijkertijd een afbeelding van 1000 pixels breed in de header hebt staan, waar je ook nog een rand omheen wilt hebben. Dat kan dus niet, omdat de rand om de afbeelding van 1000 pixels er voor zorgt dat je over de vast ingesteld breedte heen gaat.

Het makkelijkste zou zijn om de afbeelding zelf aan te passen, zodat er een rand omheen zit.
Een tweede optie is om de afbeelding te verkleinen naar 994 pixels.
Een derde optie is om in /styles/subsilver2/theme/stylesheet.css de volgende code te zoeken:

Code: Selecteer alles

#wrapcentre, #wrapheader {
       padding: 0 20px;
       min-width: 650px;
       width: 1000px;
       margin: 0 auto;
    }

En te vervangen door

Code: Selecteer alles

#wrapcentre, #wrapheader {
       padding: 0 20px;
       width: 1006px;
       margin: 0 auto;
    }

(De min-width: 650px heeft geen nut, aangezien de breedte vast op 1000 staat.)

De regel

Code: Selecteer alles

	padding-bottom: 10px;

kun je wel verwijderen bij #logodesc als je de onderste rand wilt laten aansluiten aan de afbeelding.

[turbofloppie]

Hallo pola,
ik heb voor de laatste optie gekozen en veranderd.
Helaas komt het nog niet goed uit zoals te zien is op de site.
Ik zou die border net zo dun willen hebben als de andere.
Ook de achtergrond past er niet precies in.
Maar we geven de moed niet op

[Pola]

ik heb voor de laatste optie gekozen en veranderd.
Helaas komt het nog niet goed uit zoals te zien is op de site.
Ik zou die border net zo dun willen hebben als de andere.

Voeg dan aan

Code: Selecteer alles

#logodesc {
	background-color: #FFFFFF;
background-repeat: repeat-x;
	background-position: center bottom;
	border-style: solid;
   border-color: #a9b8c2;
}

De volgende regel toe:

Code: Selecteer alles

border-width: 1px;

Ook de achtergrond past er niet precies in.
Maar we geven de moed niet op

Als het dunner maken van de rand om de afbeelding er niet voor gezorgd heeft dat de afbeelding nu wel past,
verander dan

Code: Selecteer alles

       width: 1006px;

in

Code: Selecteer alles

       width: 1008px;

[turbofloppie]

http://www.ph34rm3.nl
Dit is wat ik zie nadat ik het hebt veranderd.

[Pola]

Ehm ja, is het niet naar je zin?

[turbofloppie]

Jawel hoor bedankt allenmaal voor jullie reacties en hulp.
Ik dacht dat ik het precies om de rand heen kon krijgen zonder de witte stukjes maar is goed zo