How to edit a phpBB theme

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.

1. 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.
   
   
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 the "sources\psd" folder of your unzipped template package. Open a PSD file with Adobe Photoshop.
   
   
   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).
      
      
   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 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).
      
      
   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 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. Change the "Settings" option to "Other...". The "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 that request.
      
      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 directory "\forum_xxxx\images\template" to "\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.
      
      
4.  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 "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 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.