Beste bezoeker,

Wij werken met een klein groepje.
Het kan zijn dat u na het plaatsen van een bericht even moet wachten op hulp of op een antwoord,
blijf daarom gerust posten we zullen z.s.m. en wanneer het kan reageren.

Voor dringende zaken die echt niet kunnen wachten kunt u het contactformulier gebruiken.

-------------------------------------

Wanneer u ons forum bezoekt voor hulp bij installatie, vragen wij u een account aan te maken en geen gebruik te maken van het contactformulier.

Wij kunnen u beter helpen wanneer u een account aanmaakt en u in het volgende onderwerp phpBB en Extensie installatie en aanpassingen laten uitvoeren een nieuw onderwerp start.

Ook wanneer u ergens niet uitkomt of vragen heeft, vragen wij u gebruik te maken van 1 van de bestaande "support onderwerpen" en aldaar uw onderwerp te starten.

Waneer u een account aanmaakt kan het zijn dat de activatie email terecht komt in de spamfolder.
  • Verplaats deze terug naar uw postvak-in en klik op de activatie link, hierna is uw account geactiveerd en kunt u inloggen op het forum.

Met vriendelijke groet,

Team phpBBservice.nl
(steeds tot uw dienst)

Handleiding hoe je prosilver kan (her)stijlen!

Archief

Auteur
Kevin
Vorig TeamLid
Berichten in topic: 1
Berichten: 3559
Lid geworden op: 03 nov 2007 20:36
Verstuurde bedankjes: 5 keren
Ontvangen bedankjes: 8 keren
Contacteer:

Handleiding hoe je prosilver kan (her)stijlen!

Bericht door Kevin » 21 sep 2007 23:57

Hoi iedereen,

Ben je pas nieuw met phpBB, en denk je ik wil prosilver veranderen maar weet niet hoe dat moet.
Niet getreurd in deze handleiding leggen we je keurig uit hoe je prosilver kan gaan stijlen.
Vergeet niet dat je bij elke html aanpassing eventjes de template moet vernieuwen.
Pas je CSS bestanden aan, dan moet je de thema's gaan vernieuwen, en let ook op dat je jouw browsers temp bestanden moet verwijderen, om het effect te kunnen zien, soms wil een extra F5 ook wel helpen.

Een ander belangrijke factor, als je IE6 gebruikt , zal je wat problemen krijgen met je borders. Je bg_body.gif zal te zien zijn als een herhaling, en dat zorgt voor een verticale witte strip in de lengte van je forum. Vergeet niet altijd up-to-date te blijven, met de laatste internetbrowsers.


INHOUDSOPGAVE :

1.) Hoe verander ik de achtergrondkleur. (zonder borders)
2.) Het toevoegen van ronde borders op je forum.
3.) Het veranderen van de achtergrond kleur nadat je de borders hebt geïnstalleerd.
4.) Aanpassen van de header "overall_header"
5.) Het bewerken van de kleur van de navbar.
6.) Het kleuren van de forums bg kleur.
7.) Veranderen van de forumlijst kleur en hover kleur op de forums.
8.) Het kleuren van de viewforum en viewtopic paginas.
9.) Veranderen van de kleur van de links en de finish touch.
10.) Veranderen van de Forum links en de mouseover kleuren.
11.) Hernoemen van je Stijl/Thema.
12.) Tot slot.
19/01/2010 artikellinks gefixed - Rotsblok
Met vriendelijke groeten,
Kevin.

-----------------------------------------------------------------------------------------

Bent u tevreden over onze service?
Dan zouden wij het op prijs stellen als u ons zou willen beoordelen op Afbeelding.

Winnaar in de phpBB.nl awards 2009, 2010 en 2012 met AquaforA


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Hoe verander ik de achtergrondkleur. (zonder borders)

Bericht door Raimon » 22 sep 2007 17:50

Hoe verander ik de achtergrondkleur. zonder borders

1.) Hoe verander ik de achtergrondkleur. (zonder borders)
Open het bestand /styles/prosilver/theme/colours.css
Zoek het volgende;

Code: Selecteer alles

html, body {
	color: #536482;
	background-color: #FFFFFF;
}
Zoek de regel

Code: Selecteer alles

background-color: #FFFFFF;
En vervang de FFFFFF met jou gewenste kleur code.
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Het toevoegen van ronde borders ( hoeken ) op je forum

Bericht door Raimon » 22 sep 2007 18:04

Het toevoegen van ronde hoeken op je forum

2.) Het toevoegen van ronde borders op je forum.
Download de zip borders.zip en pak het uit, en de inhoud die je hebt uitgepakt plaats je in de map styles/prosilver/theme/images
borders.zip
Volgende, wanneer de border afbeeldingen zijn geupload, zal je ook een css bestand moeten toevoegen, waarin de waardes staan voor de borders.
Je kan een nieuw CSS bestand maken, of je mag het CSS bestand gebruiken wat je in de bijlage hieronder vind.
Die plaats je zodra je ze gedownload hebt, in de map /styles/prosilver/theme/
css_voor_de_borders.zip
Om een eigen CSS bestand te maken. Je kan diverse programma's gebruiken zoals Adobe® Dreamweaver® , of wat opensource programma's zoals notepad++.
Vergeet niet dat je bij notepad++ het bestand moet opslaan als naambestand.css. , je mag het bestand opslaan naar elke naam dat je wilt.
Belangrijk!! vergeet niet wanneer je je eigen css hebt gemaakt, het niet toe te voegen (includen) in het bestand stylesheet.css

Een klein voorbeeld. Als je het css bestand hebt genoemd borders.css dan moet je ook in het bestand stylesheet.css het importen (of te wel includen) zodat het ook mee aangeroepen word, door de gebruikers als ze je forum bezoeken.
Je zal de volgende waarde dan moeten toevoegen in het bestand "stylesheet.css"

Code: Selecteer alles

@import url("borders.css");
De volgende inhoud moet je kopiëren en plakken in de nieuwe stylesheet die je aan het aanmaken was (dmv kopieëren en plakken)

Code: Selecteer alles

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
	Style name:			proSilver
	Based on style:		proSilver (this is the default phpBB 3 style)
	Original author:	subBlue ( http://www.subBlue.com/ )
	Modified by:		shoot
        Translation by :       Raimon (https://www.phpbbservice.nl)
	
	Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
    --------------------------------------------------------------
*/

/*  	
--------------------------------------------------------------
html, body tag kopie van colours.css 
-------------------------------------------------------------- */
html, body {
	color: #68696D;
	background-color: #A0A8AE;
/*    background-image: url("{T_THEME_PATH}/images/jouwbg.gif");*/ /* Veranderd: map en de naam van de afbeelding */	
}

/*  	
--------------------------------------------------------------
#wrap tag kopie van common.css
-------------------------------------------------------------- */
#wrap {  
   padding: 0 20px;  
   min-width: 700px;  
   width: 900px;  
   margin: 0 auto;  
}  


/* additional proSilver Markup Stijlen buiten de rondingen
----------------------------------------------------------- */
.top-left, .top-right, .bottom-left, .bottom-right { 
   height: 20px;       /* VERANDER: vervang doormiddel van de hoogte van een van de hoeken  (= 1/2 hoogte van de afbeelding) */
   weidth: 20px;       /* VERANDER: vervang doormiddel van de hoogte van een van de hoeken  (= 1/2 hoogte van de afbeelding) */
   font-size: 2px;    /* DNC: correctie IE voor de hoogte van de <div>'s */
   }
   
.top-left { 
   background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* VERANDER: map en de naam van je afbeelding */
   background-position: 0 -20px; /* VERANDER: vervang de tweede nummer door nagative hoogte van een van je hoeken */
   margin-left: 1px;  /* VERANDER; vervang de breedte van een van je hoeken */
   margin-top: 0px;  /* VERANDER; vervang de hoogte van een van je hoeken */
   margin-right: 9px; /* VERANDER; vervang de breedte van een van je hoeken */
   }
.top-right { 
   background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* VERANDER: map en de naam van je afbeelding */
   background-position: 100% 0;    /* DNC: postitie van de rechter hoek aan de rechter zijde, geen verticale vernaderingen */
   margin-left: 0px;  /* VERANDER: vervang door de breedte van een van je hoeken */
   margin-top: -9px;  /* VERANDER; vervang de hoogte van een van je hoeken */
   margin-right: 1px; /* VERANDER; vervang de breedte van een van je hoeken */ 
   }
.top-center { 
   background-image: url("{T_THEME_PATH}/images/bg_headers.gif"); /* VERANDER: map en de naam van je afbeelding */
   background-position: 0 0px; /* VERANDER: vervang de tweede nummer door nagative hoogte van een van je hoeken */
   height: 20px;       /* VERANDER: vervang doormiddel van de hoogte van een van de hoeken  (= 1/2 hoogte van de afbeelding) */
   weidth: 20px;       /* VERANDER: vervang doormiddel van de hoogte van een van de hoeken  (= 1/2 hoogte van de afbeelding) */
   font-size: 2px;    /* DNC: correctie IE voor de hoogte van de <div>'s */
   margin-left: 20px;  /* VERANDER; vervang de breedte van een van je hoeken */ 
   margin-top: -20px;  /* VERANDER; vervang de hoogte van een van je hoeken */ 
   margin-right: 20px; /* VERANDER; vervang de breedte van een van je hoeken */ 
   margin-bottom: -20px; /* VERANDER; vervang de breedte van een van je hoeken */ 
   }
   
.bottom-left  { 
   background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat;  /* VERANDER: map en de naam van je afbeelding */
   background-position: 0 0px; /* VERANDER: vervang de tweede nummer door negative hoogte van één van je hoeken */
   margin-right: 0px; /* VERANDER; vervang de breedte van een van je hoeken */
   margin-left: 1px;  /* VERANDER; vervang de breedte van een van je hoeken */
   margin-top: 0px;  /* VERANDER; vervang de hoogte van een van je hoeken */
   }
.bottom-right { 
   background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* VERANDER: map en de naam van je afbeelding */
   background-position: 100% -20px; /* VERANDER: vervang de tweede nummer door negative hoogte van één van je hoeken */
   margin-right: 1px; /* VERANDER; vervang de breedte van een van je hoeken */
   margin-left: 0px;  /* VERANDER; vervang de breedte van een van je hoeken */
   margin-top: -20px;  /* VERANDER; vervang de hoogte van een van je hoeken */
   }
.bottom-center { 
   background-image: url("{T_THEME_PATH}/images/bg_footers.gif"); /* VERANDER: map en de naam van je afbeelding */
   background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
   height: 20px;       /* VERANDER: vervang doormiddel van de hoogte van een van de hoeken  (= 1/2 hoogte van de afbeelding) */
   weidth: 20px;       /* VERANDER: vervang doormiddel van de hoogte van een van de hoeken  (= 1/2 hoogte van de afbeelding) */
   font-size: 2px;     /* DNC: correctie IE voor de hoogte van de <div>'s */
   margin-left: 20px;  /* VERANDER; vervang de breedte van een van je hoeken */
   margin-top: -20px;  /* VERANDER; vervang de hoogte van een van je hoeken */
   margin-right: 20px; /* VERANDER; vervang de breedte van een van je hoeken */
   margin-bottom: -20px; /* VERANDER; vervang de breedte van een van je hoeken */
   }

.inside {
   border-left: 0px solid #000000; /* YCC: kleur &opties voor de linkerborderregel */
   border-right: 0px solid #000000;/* YCC: kleur &opties voor de rechterborderregel */
   background: #FFFFFF;            /* YCC: achtergrondkleur van de binnenkant */
   color: #000000;                 /* YCC: standaard tekstkleur van de binnenkant */
   padding-left: 0px;              /* YCC: alle teksen voor somige afstanden van de linker border */
   padding-right: 0px;             /* YCC: alle teksten voor sommige afstanden van de rechter border */
   background-image: url("{T_THEME_PATH}/images/bg_body.gif"); /* VERANDER: map en de naam van je afbeelding */
   }
   
.notopgap    { margin-top: 0; }    /* DNC: om te voorkomen dat de box gaat uitsplitsen */
.nobottomgap { margin-bottom: 0; } /* DNC: om te voorkomen dat de box gaat uitsplitsen */

.outside {
   margin: 0 auto;
   width : 950px;
   }

Oke nu is dat klaar, laten we nu de html bewerken zodat de css waardes worden aangeroepen.
Open het bestand /styles/xx/template/overall_header.html

Zoek:

Code: Selecteer alles

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Zet daarna op een nieuwe regel het volgende:

Code: Selecteer alles

<div class="outside">
	<div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
		<div class="inside">
			<div class="notopgap">
Wanneer je het hebt opgeslagen, en herupload naar je server, zal je het volgende resultaat krijgen:

Afbeelding

Volgende, zoals je hierboven ziet zit de header er keurig uit, maar de onderkant (footer) is nog niet rond, dus we zullen de onderkant ook moeten aanpassen.
Op het bestand /styles/xx/template/overall_footer.html
Zoek:

Code: Selecteer alles

<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
En voeg erna op een nieuwe regel het volgende toe:

Code: Selecteer alles

</div>
</div>
<div class="nobottomgap"></div>
      </div>
   <div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>
Nu sla je het bestand op en upload je het naar je webhost, de pagina zal er zo uitzien:

Afbeelding

Nu heb je ronde basis borders rond je forum heen.
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Het veranderen van de achtergrond kleur met de borders

Bericht door Raimon » 25 sep 2007 00:46

Het veranderen van de achtergrond kleur met de borders

3.) Het veranderen van de achtergrond kleur nadat je de borders hebt geïnstalleerd.
Als je de zip gebruikt hebt css_voor_de_borders.zip dan zal je het bestand /styles/xx/theme/shoots_boarders.css moeten openen.
Zoek:

Code: Selecteer alles

html, body {
	color: #68696D;
	background-color: #A0A8AE;
/*    background-image: url("{T_THEME_PATH}/images/yourbg.gif");*/ /* CHANGE: path and name of your image */	
}
Zoek de regel:

Code: Selecteer alles

background-color: #A0A8AE;
En verander de waarde : A0A8AE in je eigen kleurcode.
Als de kleur die je hebt veranderd niet echt goed past bij de borders, kan je ook kiezen voor de doorzichtige borders hieronder in de bijlage.
doorzichtige_borders_afbeeldingen.zip
Die dien je te uploaden in de map /styles/xx/theme/images
Zodoende als je een zachte kleur kiest geen ruwe pixels in de ronde hoeken, aangezien de afbeeldingen transparant zijn.

Wanneer je gebruik maakt van doorzichtige borders moet je wel eventjes je css veranderen, je kan heel simpel het css bestand dat is bijgevoegd.
Let wel op als je css anders heet, moet je de import regel die je hebt toegepast in stylesheet.css ook aanpassen naar deze css naam , die in de bijlage zit.
doorzichtige_borders_css.zip
Downloaden en daarna uploaden naar de map /styles/prosilver/theme/ map op je ftp server en overschrijven met het huidige bestand, aangezien er wat marges moesten aangepast worden.
Heb je de css anders genoemd dan dien je dit nieuwe css bestand te hernoemen naar jou css bestand en uploaden in de theme map.
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Aanpassen van de header "overall_header"

Bericht door Raimon » 25 sep 2007 00:49

Aanpassen van de header overall_header

4.) Aanpassen van de header "overall_header"

Oke laten we eerste wat andere kleuren toevoegen en sommige kleine grafische aanpassingen.
We beginnen nu eerste met de header, iedereen kent het beroemde blauwe wel, laten we dat eens mooi veranderen.
Als eerste beginnen we met de afbeeldingen wat de headerbar aanroept.
De afbeelding die de header aanroept is bg_header.gif, en die kan je terug vinden in de map styles/prosilver/theme/images.

Volgende, creër een nieuwe afbeelding met de maat 5x92 met een witte voorgrond, met een fotoshop programma zoals Adobe® Photoshop® of een gratis opensource programma zoals Gimp. We zullen het een beetje donkerder maken dan de forum achtergrond.
Ik heb hiervoor kleur #7E8992 voor gebruikt.
Sla de aangemaakte afbeelding nu op als bg_header.gif en upload de afbeelding in styles/prosilver/theme/images/ en vervang de standaard bg_header.gif afbeelding.
Wanneer je de nieuwe bg_header.gif hebt geüpload zal het eruitzien zoals hieronder:

Afbeelding

Vraag Hoe verwijder ik mijn phpBB logo? Hoe vervang ik het met mijn eigen logo?
Antwoord Dit is iets dat ik je de hele dag lang kan laten zien, maar één iemand zal het nooit mooi vinden, dat komt eigenlijk omdat de overall_header 100% een persoonlijke voorkeur kan zijn, ik zal je 2 kleine tips geven hoe je het snel kan opschonen.

1ste Open styes/xx/template/overall_header.html
Zoek:

Code: Selecteer alles

<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>
Vervang met:

Code: Selecteer alles

<div id="site-description"><br /><br />
				<h1>&nbsp;&nbsp;&nbsp;{SITENAME}</h1>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;{SITE_DESCRIPTION}</p><br /><br />
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>
Sla het op en daarna;
Open het bestand styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}
Zoek de regel:

Code: Selecteer alles

background-color: #12A3EB;
Vervang de code met de kleur dat je hebt gemaakt in de afbeelding bg_header.gif. Ik had de kleur #7E8992 gebruikt , die overeen komt met de afbeelding.
Sla het op en herupload het naar je server, als je het jusit hebt gedaan zal de header er als volgt uitzien.
Afbeelding

Nu gaan we de zoeken een klein duwtje naar benden geven.
Open het bestand : styles/prosilver/theme/common.css

Zoek:

Code: Selecteer alles

#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}
Zoek de regel:

Code: Selecteer alles

margin-top: 30px;
Verander het naar 88px en sla het op. Wanneer je het hebt geüpload naar je webserver, vernieuw dan de thema's in je beheerderspaneel, en verwijder je tijdelijke internet bestanden, daarna zal je dit resultaat krijgen:
Afbeelding
Nu is je header is een beetje in orde. We zullen dit aanpassen later in deze handleiding.
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Het bewerken van de kleur van de navbar

Bericht door Raimon » 25 sep 2007 20:39

Het bewerken van de kleur van de navbar

5.) Het bewerken van de kleur van de navbar.

Download deze opgeschoonde pictogrammen in de bijlage hieronder. Je zal me later hiervoor bedanken.
Daarna pak je ze uit en upload je ze naar de map /styles/prosilver/theme/images en overschrijf je de standaard afbeeldingen.
(Tezij je kleur een lichte kleur is. Als je een donkere header of donker thema hebt dan passen de opgeschoonde pictrogrammen perfect erbij.)
opgeschoonde_pictogrammen.zip
Open het bestand : styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

.navbar {
	background-color: #cadceb; /*narbar background color*/
}
Zoek de regel:

Code: Selecteer alles

background-color: #cadceb;
Verander de kleurcode #cadced naar dezelfde kleurcode als je die gegeven hebt aan de afbeelding bg_header.gif , of een kleur naar je eigen wens. I heb de kleur #7E8992 gebruikt.
Wanneer je dat hebt gedaan, sla het op en upload je het naar je webhost.
Vergeet niet daarna de thema's te vernieuwen in je beheerderspaneel, en je tijdelijke internet bestanden te verwijderen.
Vervolgens zal je dit resultaat dan krijgen:
Afbeelding
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Het kleuren van de forums bg kleur

Bericht door Raimon » 25 sep 2007 21:45

Het kleuren van de forums bg kleur

6.) Het kleuren van de forums bg kleur.

Denk van de forums bg als 2 delen, het lijkt een beetje op de overall_header. We kunnen een stevige forum bg gebruiken, of we kunnen er een afbeelding op de top plaatsen en mengen het met een stevige kleur of een graniet kleur. In deze handleiding zal ik een afbeelding gebruiken op de top en een menging van een stevige kleur.

We starten met de afbeelding genaamd bg_list.gif, die je kan terug vinden in de map styles/prosilver/theme/images/
Dit is weer de bekende beroemde blauwe afbeelding. Een kleine afbeelding met de grote van 5x92px en is verteld om het te herhalen in het bestand /styles/prosilver/theme/common.css . Deze afbeelding kan je hermaken en herinkleuren naar jou eigen keuze. We hebben in dit voorbeeld de kleur #7E8992 gebruikt. Of we kunnen ook de afbeelding gebruiken die hier onderstaat.

Volgende, creëer een nieuwe afbeelding van 900x25px (900 als je gelukkig bent met de momentele breedte. 25px blijkt net in de forumlijst te passen, zodat het een strakke lijn uitstraalt. Zonder leegruimte!)
En maak je afbeelding zoiets als hieronder:

Afbeelding
Of download de complete bg_list in de bijlage, die ik gebruikt heb in deze handleiding.
bg_list.zip
Sla je nieuwe bg_list bestand op en upload het naar de map styles/prosilver/theme/images/ en overschrijf de oude bg_list afbeelding.
Wanneer je dat hebt gedaan zal je forum er zo uit komen te zien:
Afbeelding

Volgende nu gaan we de heldere blauwe onderrand veranderen van de bg_list.gif
Open het bestand styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

.forabg {
	background-color: #0076b1;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Zoek de regel:

Code: Selecteer alles

background-color: #0076b1;
Je zal de kleur moeten veranderen naar de kleur dat het beste past bij je bg_list.gif dat je hebt gemaakt. Als je de bg_list gebruikt van deze handleiding, dan zal je de kleur code #96A1AA moeten gebruiken.
Wanneer je dat hebt gedaan, zal je forum er zo uit komen te zien:
Afbeelding
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Veranderen van de forumlijst kleur en hover kleur

Bericht door Raimon » 25 sep 2007 22:57

Veranderen van de forumlijst kleur en hover kleur

7.) Veranderen van de forumlijst kleur en hover kleur.

Één ding dat je in gedachten moet houden , wanneer je de forumlijst kleur veranderd is als je een bb3portal hebt geïnstalleerd mag je de afbeelding gradient.gif verkleinen.
Die afbeelding word gebruikt in het "nieuws" blok en weergeeft 10 nieuws items, en heeft een afbeelding nodig die 450px groot is.
Waarom? de afbeelding herhaalt en gebruikt een gradiënt, dat kan slecht er uitzien. Als je een stevige kleur gebruikt voor de gradient.gif dan hoef je je nergens zorgen over te maken.
In deze handleiding zullen we de standaard afbeeldingsgrootte gebruiken en het maken naar een lichte gradient, wat je makkelijk kan doen met een fotobewerkinsprgramma zoals photoshop CS3.
Wanneer je nieuwe gradient.gif is gemaakt en geüpload naar de map styles/prosilver/theme/images/ zal het er zo uit komen te zien:

Afbeelding

Volgende, we gaan nu de kleur veranderen van de heldere blauwe lijn, De lijn dat je beneden ziet van de forumlijst.
Open het bestand: styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

li.row {
	border-top-color:  #FFFFFF;
	border-bottom-color: #00608F;
}
Zoek de regel:

Code: Selecteer alles

border-bottom-color: #00608F;
#00608F is de kleur dat je wilt veranderen, In deze handleiding heb ik kleur #7E8992 gebruikt. Als je de kleur hebt gebruikt van deze handleiding dan zullen je forums er nu zo uitzien:

Afbeelding

Volgende, nu zullen we de hover kleur veranderen, je weet wel die oergele kleur :mrgreen:
Open het bestand: styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

li.row:hover {
	background-color: #F6F4D0;
}
Zoek de regel:

Code: Selecteer alles

background-color: #F6F4D0;
#F6F4D0 is de kleur dat je gaat veranderen. In deze handleiding heb ik de kleur #CDD3D9 gebruikt, dit geeft de hover een flatten effect.

NOTITIE! Vergeet niet een gif kan geanimeerd zijn. Laten we zeggen je wilt één hoek geanimeerd hebben van de hover afbeelding, of je wilt het static gebruiken, of wat je ook kan bedenken, het enige wat je dan hoeft te doen is het volgende toetevoegen:

Code: Selecteer alles

background-image: url("{T_THEME_PATH}/images/jouwafbeelding.gif");
In het bestand styles/prosilver/theme/colours.css de code zal dan als volgt er uitzien:

Code: Selecteer alles

li.row:hover {
	/*background-color: #F6F4D0;*/
        background-image: url("{T_THEME_PATH}/images/jouwafbeelding.gif");
}
Wees er daarna zeker van dat de afbeelding is geüpload in de map styles/prosilver/theme/images
Oke dat is eigenlijk alles wat je over de indexpagina hoeft te weten. Tot dat we terug komen om blokken toe te voegen.
Nu zullen we ons verplaatsen naar de viewforum en viewtopic pagina's.
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Het kleuren van de viewforum en viewtopic paginas

Bericht door Raimon » 25 sep 2007 23:57

Het kleuren van de viewforum en viewtopic paginas

8.) Het kleuren van de viewforum en viewtopic paginas.

Één ding dat we kunnen doen om tijd te besparen is door heel gemakkelijk de class naam te veranderen. In dit geval habben we dezelfde bg_list.gif dat we hebben gebruikt in de forabg class dus...

Open het bestand styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

.forumbg {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}
Vervang dat met:

Code: Selecteer alles

.forumbg {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Je bekijkt nog steeds het bestand colours.css
Zoek:

Code: Selecteer alles

.forumbg {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Zoek de regel:

Code: Selecteer alles

background-color: #12A3EB;
#12A3EB is de kleur dat we moeten veranderen. In deze handleiding heb ik de kleurcode #7E8992 gebruikt.

Sla het op en upload het bestand naar je webhost. Wanneer je da thebt gedaan, zal je viewforum pagina er zo uitzien:
Afbeelding

Volgende, nu moeten de de forum kleur weer veranderen. De volgende stap zal meer dan dat doen. Door de bg1 -bg3 te veranderen, zullen de kleuren in de viewtopic body en ook de kleuren van je chat_body.html mits je de Chatbox/shoutbox van Handyman` gebruikt. Het zal ook de achtergrond veranderen van je gebruikerspaneel. De knoppen zullen niet overeen komen, maar hou je vast, dat zullen we straks aanpassen!
Open het bestand styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

.bg1	{ background-color: #ECF3F7; }
.bg2	{ background-color: #e1ebf2;  }
.bg3	{ background-color: #cadceb; }
En vervang met:

Code: Selecteer alles

.bg1	{ background-color: #D2D8DD; }
.bg2	{ background-color: #BDC6CD;  }
.bg3	{ background-color: #7E8992; }
Sla het op, en upload het naar je webhost. Wanneer dat is gedaan zal je viewforum er zo uitzien:
Afbeelding
NOTITIE!! Je kan ook enige afbeeldingen maken van één van de bgs waarde. Maak dan de afbeelding 900 breed, als je het mooi lijkt om de momentele breedte te gebruiken van deze handleiding. Om je afbeelding toetevoegen voeg dan gewoon de code:

Code: Selecteer alles

background-image: url("{T_THEME_PATH}/images/bg_header.gif");
toe
naar de bg waarvan jij de afbeelding wilt zien. Onthouw dat je de afbeelding moet uploaden naar styles/prosilver/theme/images/, anders zullen er geen afbeeldingen te zien zijn.
Ook hier kan je de kleurcodes weer wijzigen naar jou eigen kleur.

je zal wel gemerkt hebben dan een paar andere veranderingen op je forum zoals het gebruikerspaneel licht blauw zijn en viewtopic body verschilend is. Je hoef tnu echt niet te gaan zweten hoor, omdat ik altijd een stap vooruit denk 8).
En ik heb wat knoppen gemaakt dat ke kan downloaden, hieronder in de bijlage vind je de donkere tabs.
bg_tabs.zip
Pak dit uit, en upload de afbeeldingen in de map : styles/prosilver/theme/images/ van je webhost.

Volgende, nu moeten we nog een kleine kleur wijzing aanbregen voor de bg_menu kleur.

Open het bestand : styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

#navigation a {
	color: #333;
	background-color: #B2C2CF;
	background-image: url("{T_THEME_PATH}/images/bg_menu.gif");
}
Zoek de regel:

Code: Selecteer alles

background-color: #B2C2CF
Verander #B2C2CF naar jou gewenste kleur. In deze handleiding heb ik de kleur #8E9EAC gebruikt.
Zodra je dit hebt gedaan sla je het css bestand op, en upload je het weer naar je webhost.
Vergeet daarna niet de thema's te vernieuwen in je beheerderspaneel en je tijdelijke internet bestanden te verwijderen.
Nadat je dat hebt gedaan zal het er zo uit komen te zien:

Afbeelding
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/


Raimon
Vorig TeamLid
Berichten in topic: 12
Berichten: 7673
Lid geworden op: 07 apr 2006 11:10
Locatie: http://www.raimon.nl
Contacteer:

Veranderen van de kleur van de links en de finish touch

Bericht door Raimon » 26 sep 2007 01:32

Veranderen van de kleur van de links en de finish touch

9.) Veranderen van de kleur van de links en de finish touch.

Het volgende wat we gaan doen is alle kleuren van de links van je forum wijzingen (dit bevat niet de forum links). Tenzei je de momentele instellingen mooi vind, dan hoef je dit niet te wijzingen natuurlijk.

Open het bestand styles/prosilver/theme/colours.css
Zoek:

Code: Selecteer alles

a:link	{ color: #105289; }
a:visited	{ color: #105289; }
a:hover	{ color: #D31141; }
a:active	{ color: #368AD2; }
Je kan dit aanpassingen naar je eigenwens. Als je dezelfde wilt gebruiken die in deze handleiding staan, moet je de code hieronder gebruiken.

Vervang met:

Code: Selecteer alles

a:link	{ color: #242F38; }
a:visited	{ color: #242F38; }
a:hover	{ color: #A0A8AE; }
a:active	{ color: #242F38; }
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/

Gesloten