How to edit a php-bb theme...

[djbosak]

While using our phpBB skin you may need to update its graphical and textual content. This tutorial provides a guide on how you can manage it quickly and with no hassle.

1. Make sure that you intalled the phpBB theme correctly. This will help you to see the changes you apply to the content in real time.

2. 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.

3. Navigate to "SOURCES\PSD" folder of your unzipped template package. Open the PSD file with Adobe Photoshop.

3.1. Instructions on editing text represented as an image.
Press the "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).

3.2. 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 some 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 the "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 or down until all of the overlapping disappears.
After you have made all of the image modifications, you should update those changes to your web design template (proceed to step 3.3).

3.3. Instructions on updating changes to a web design template.

Choose "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 using " 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 "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. Change the "Settings" option to "Other...". The "Output Settings" window will appear. Uncheck an 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 that request.

If the confirmation window does not appear, make sure that you are saving the 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 \FORUM_XXXX\IMAGES\TEMPLATE folder.
Now it's time to check the modifications you have made. Upload the files in their own directory \FORUM_XXXX\IMAGES\TEMPLATE to \TEMPLATES\FORUM_XXXX\IMAGES\TEMPLATE directory of your phpBB installation. Go to the URL where you have your phpBB forum installed to see all the changes.

4. Before editing 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 header is always overall_header.tpl and footer is always overall_footer.tpl, for popups and topic review header is simple_header.tpl and footer is simple_footer.tpl. For more detailed information regarding .tpl refer to http://www.phpbb.com/kb/article.php?article_id=198

In most cases you will need to update the content (text) of overall_header.tpl file only.
To edit the file navigate to \FORUM_XXXX folder of your unzipped template package and open 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 the 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 your phpBB forum installed to see all the changes.