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)

Extra simpele ronde hoeken/borders op je phpBB forum maken

Op zoek naar tips, handleidingen over phpBB3 stijlen, dan bent u hier aan het juiste forum.
Gesloten

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

Extra simpele ronde hoeken/borders op je phpBB forum maken

Bericht door Raimon » 22 jun 2017 12:14

In deze handleiding gaan we je stap voor stap uitleggen hoe je je forum smaller krijgt en hoe je er leuke borders op kan plaatsen.

Als allereerste gaan we nu je forum smaller maken, dat is al mooi uitgelegt in het artikel proSilver smaller maken.
je forum hoeft neit smaller te zijn, maar is wel mooier natuurlijk.
Maar voordat je enige bewerkingen gaat doen, ga je eerst je forum backuppen, dus als er wat fout gaat dat je alles meteen kan herstellen.
Zodra we dat gedaan hebben, gaan we leuke borders neer plaatsen.
Je moet eerst een border afbeeldingen hebben, die kan je natuurlijk zelf maken met photoshop of je kan bestaanden borden pakken onder andere die Hier te vinden zijn.
En die afbeelding upload je naar de volgende map in je webhost namelijk:
/styles/prosilver/theme/images


Nu gaan we de css bewerken open het bestand /styles/prosilver/theme/colours.css
Helemaal onderaan van het bestand plaats je dit:

Code: Selecteer alles

.top-left, .top-right, .bottom-left, .bottom-right {
   background-image: url("{T_THEME_PATH}/images/corners1280x18.gif"); /* CHANGE: path and name of your image */
   height: 9px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   }
.top-left, .bottom-left {
   margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
   }
.top-right, .bottom-right {
   margin-left: 9px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
   }
.top-right {
   background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
   }
.bottom-left  {
   background-position: 0 -9px;    /* CHANGE: replace second number by negative height of one of your corners */
   }
.bottom-right {
   background-position: 100% -9px; /* CHANGE: replace second number by negative height of one of your corners */
   }
.inside {
   border-left: 1px solid #C00000; /* YCC: color & properties of the left-borderline */
   border-right: 1px solid #C00000;/* YCC: color & properties of the right-borderline */
   background: #FFFFFF;            /* YCC: background-color of the inside */
   color: #000000;                 /* YCC: default text-color of the inside */
   padding-left: 0px;             /* YCC: all texts at some distance of the left border */
   padding-right: 0px;             /* YCC: all texts at some distance of the right border */
   }
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
   margin : 25px;
}
Nu gaan we in de HTML bestanden de divs van de borders toewijzen.
Open het bestand: styles/prosilver/templates/overall_header.html

zoek:

Code: Selecteer alles

<div id="wrap">
Plaats daar boven:

Code: Selecteer alles

<div class="outside">
<div class="top-left"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">
Open het bestand: styles/prosilver/templates/overall_footer.html
zoek het volgende:

Code: Selecteer alles

 </body>
Plaats daarboven het volgende:

Code: Selecteer alles

</div>
<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-right">
</div>
</div>
Nu ben je klaar met het aanpassen van de bestanden, upload deze naar je webhost ruimte, maar nu weerhoudt je er nog een ding om het werkend te maken.
Je moet namelijk de cache legen.
Dat doe je door het volgende je meld je aan in je administratiepaneel je klikt op sjablonen en dan op ververs. wel bij de stijl prosilver op de ververs knop klikken.
Daarna nog even je webbrowser verversen en klaar ben je.

Note als je eigen afbeeldingen gebruikt hernoem in de css dan ook het volgende:
corners1280x18.gif
naar jou genoemde eigen afbeelding, natuurlijk upload je die afbeelding die je gemaakt hebt ook in de map: /styles/prosilver/theme/images

Tot slot wil ik nog veel dank betuigen aan Ash Hi Fi Zone voor het orginele onderwerp

veel succes met het gebruik van phpBB3
Gratis phpBB installatie of MODs/extensions hulp nodig? Bezoek http://www.raimon.nl/forums/

Gesloten