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)

[Tutorial] Het toevoegen van ronde borders op je forum.

De ondersteuning voor de phpBB 3.1.X serie is beëindigd, aangeraden word om te upgraden naar de meest recente versie. Dit forum dient alleen nog als archief.
Gesloten

Auteur
bennybernaer
Vorig TeamLid
Berichten in topic: 1
Berichten: 912
Lid geworden op: 25 jul 2010 15:41
Naam: Benny
Locatie: Antwerpen
Verstuurde bedankjes: 9 keren
Ontvangen bedankjes: 9 keren
Contacteer:

[Tutorial] Het toevoegen van ronde borders op je forum.

Bericht door bennybernaer » 06 mei 2014 21:40

Het toevoegen van ronde borders op je forum.
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.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.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;
   }
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="nojs section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
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">
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.
Afbeelding

Nu heb je ronde basis borders rond je forum heen.
Bijlagen
css_voor_de_borders.rar
(1.55 KiB) 702 keer gedownload
css_voor_de_borders.rar
(1.55 KiB) 702 keer gedownload
borders.zip
(32.03 KiB) 675 keer gedownload
borders.zip
(32.03 KiB) 675 keer gedownload
To reach a star, you gotta have a dream and to have a dream, you gotta have a strength...
To be that strong, you gotta have a will and the will is within your heart...



Vind phpBBservice.nl leuk op Facebook.
| buy me a beer

Gesloten