While using our phpBB skin you may need to update its graphic and textual content. This tutorial
provides a guide on how you can manage it quickly and without hassle.
- Make sure that you installed the phpBB theme correctly. This will help you to see changes that
you apply to the content in real time.
- If you would like to alter an image or a portion of the text represented as an image then
proceed to step 3 (this requires editing a PSD file in Adobe Photoshop). If you would like to alter
an HTML plain text then proceed to step 4.
- Navigate to the
"sources\psd" folder of your unzipped template package. Open a PSD
file with Adobe Photoshop.
- Instructions on editing text represented as an image.
"T" key to use the type tool. Click the text you would like to edit.
After you have done all text modifications, you should update those changes to your web design
template (proceed to step 3.3).
- Instructions on editing images.
Before inserting your own image into your web design template source, you should remove or
hide the original image.
Select a layer with an image you would like to remove. To hide it, click on the
"eye" icon to the left of the layer name in the
"Layers" list panel. If you want to remove it, click the trash can
icon at the right bottom corner of the
"Layers" list panel.
You can add your own image to a PSD file in a very simple way. Just drag and drop it from
your file browser to your Adobe Photoshop window. You can also use
"File > Open" from the top menu. Your image will appear in a
separate window of Adobe Photoshop. You can make prior modifications there. For example, you
can crop it using the crop tool (hotkey
"C") or make color adjustments to make the image fit the template's
color scheme selecting
"Image > Adjustments > Color Balance" from the top menu.
The next step is moving your image to your web design template PSD window. To do it select
the move tool from
"Tools" panel or use
"V" hotkey. Then drag and drop the selected image using the tool for
the template window of Adobe Photoshop.
Now you can move that image to the right location using the same tool. If the image that you
have just inserted is overlapped by other images or text you should move it up in the layers list.
Go to the layers list panel and drag and drop this layer up until overlapping disappears.
After you have made all image modifications, you should update those changes to your web
design template (proceed to step 3.3).
- Instructions on updating changes to a web design template.
"File > Save For Web" from the top menu or use the
"CTRL + ALT + SHIFT + s" hotkey. The
"Save for Web window" will appear. Select a slice that was altered
"Select Slice Tool". If you want to update several slices at once
you should select them while holding the
"Shift" button. When you have selected the slices you want to update,
click on the
"Save" button, which is located at the right top corner of the
"Save for Web" window. The
"Save Optimized As" window will appear. Browse to the
"\forum_xxxx\images\template" folder of your web design template.
"Settings" option to
"Output Settings" window will appear. Uncheck the option "Put Images
in Folder" and press
"OK". This will close the window. Then change the "File Type" option
to "Images Only" and the "Slices" option to "Selected Slices". Click on "Save" button. If
everything goes well, you'll see a pop-up window asking for image replacement confirmation. Confirm
If this window doesn't appear, make sure that you are saving images to an appropriate folder.
Also, check each slice name by double clicking on it. A name and an image type must be the same as
the image in the file.
Now it's time to check the modifications you have made. Upload the files in their own
"\templates\forum_xxxx\images\template" directory of your phpBB
installation. Go to the URL where you have a phpBB forum installed to see all the changes.
- Before editing an HTML plain text let us explain how phpBB templates are used.
Every page generated by phpBB consists of at least 3 templates. Every page has header, content and
footer. For main pages the header is always
"overall_header.tpl" and the footer is always "overall_footer.tpl",
for popups and topic review the header is
"simple_header.tpl" and the footer is
"simple_footer.tpl". For more detailed information
"regarding .tpl" refer to
In most cases you will need to update the content (text) of
"overall_header.tpl" file only.
To edit the file navigate to
folder of your unzipped template package and open the
"overall_header.tpl" with an HTML editor (notepad for example). Then
find the text you would like to edit and update it. After you have made all text modifications you
should save your changes, and upload a modified file (i.e. "overall_header.tpl") to the appropriate
directory of your phpBB installation (i.e.
"\templates\forum_xxxx\"). Go to the URL where you have the phpBB
forum installed to see all the changes.