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"
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:
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:
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:
Nu heb je ronde basis borders rond je forum heen.
