Download de borders.zip en pak het uit, en de inhoud die je hebt uitgepakt plaats je in de map
styles/prosilver/theme/images
download/file.php?mode=view&id=1629&sid ... 5a4/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/
download/file.php?mode=view&id=1630&sid ... 06cbb15a4e
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.cs
s 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.1 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 & bennybernaer (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("./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("./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("./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("{./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("./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("./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("./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("./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="nojs section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
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">
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.