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!
-
- 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!
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
-
- 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)
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;
}
Code: Selecteer alles
background-color: #FFFFFF;
-
- 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
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 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/ 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");
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;
}
Open het bestand /styles/xx/template/overall_header.html
Zoek:
Code: Selecteer alles
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
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">
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 -->
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 heb je ronde basis borders rond je forum heen.
-
- 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
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 */
}
Code: Selecteer alles
background-color: #A0A8AE;
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. 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. 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.
-
- 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"
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:
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>
Code: Selecteer alles
<div id="site-description"><br /><br />
<h1> {SITENAME}</h1>
<p> {SITE_DESCRIPTION}</p><br /><br />
<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
</div>
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;
}
Code: Selecteer alles
background-color: #12A3EB;
Sla het op en herupload het naar je server, als je het jusit hebt gedaan zal de header er als volgt uitzien.
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 */
}
Code: Selecteer alles
margin-top: 30px;
Nu is je header is een beetje in orde. We zullen dit aanpassen later in deze handleiding.
-
- 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
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.) Open het bestand : styles/prosilver/theme/colours.css
Zoek:
Code: Selecteer alles
.navbar {
background-color: #cadceb; /*narbar background color*/
}
Code: Selecteer alles
background-color: #cadceb;
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:
-
- 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
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:
Of download de complete bg_list in de bijlage, die ik gebruikt heb in deze handleiding.
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:
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");
}
Code: Selecteer alles
background-color: #0076b1;
Wanneer je dat hebt gedaan, zal je forum er zo uit komen te zien:
-
- 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
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:
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;
}
Code: Selecteer alles
border-bottom-color: #00608F;
Volgende, nu zullen we de hover kleur veranderen, je weet wel die oergele kleur
Open het bestand: styles/prosilver/theme/colours.css
Zoek:
Code: Selecteer alles
li.row:hover {
background-color: #F6F4D0;
}
Code: Selecteer alles
background-color: #F6F4D0;
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");
Code: Selecteer alles
li.row:hover {
/*background-color: #F6F4D0;*/
background-image: url("{T_THEME_PATH}/images/jouwafbeelding.gif");
}
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.
-
- 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
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");
}
Code: Selecteer alles
.forumbg {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Zoek:
Code: Selecteer alles
.forumbg {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Code: Selecteer alles
background-color: #12A3EB;
Sla het op en upload het bestand naar je webhost. Wanneer je da thebt gedaan, zal je viewforum pagina er zo uitzien:
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; }
Code: Selecteer alles
.bg1 { background-color: #D2D8DD; }
.bg2 { background-color: #BDC6CD; }
.bg3 { background-color: #7E8992; }
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");
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. 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");
}
Code: Selecteer alles
background-color: #B2C2CF
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:
-
- 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
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; }
Vervang met:
Code: Selecteer alles
a:link { color: #242F38; }
a:visited { color: #242F38; }
a:hover { color: #A0A8AE; }
a:active { color: #242F38; }