Pagina 1 van 1

Extra simpele ronde hoeken/borders op je phpBB forum maken

Geplaatst: 22 jun 2017 12:14
door Raimon
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