Loading...

Knowledge Base
Up to 75% off on hosting for WordPress websites and online stores

How to Install phpBB Styles

You can download styles and then install them on your phpBB board to change how your board looks.



Where to Find phpBB Styles

Within your phpBB directory is a folder where all styles are stored. You can find it in your styles/ folder, where you can upload other styles. With phpBB version 3.2 or 3.3 and above, note that the styles have three parts:

  • templates
  • theme-assets
  • config file

To learn more about these parts, check out phpBB's support.

How to Install phpBB Custom Style

Note:

  • This guide assumes that you have set up phpBB. Direct write access to your server's files (via FTP or other) is also required.
  • If your phpBB version is 3.2 or 3.3 and above, ensure your style has all the required parts (templates, theme assets, and style.cfg). Make sure that the folder has exactly the same name (case sensitive) as the cfg and css file.

To install phpBB custom styles, follow these steps:

  1. Download the style of your choice from the styles download page. Ensure the style you download is compatible with your installed phpBB version.
  2. Unpack the zip(s) and place the files in their own directory.
  3. Open your FTP, then look for your public_html directory. Upload the folder with your style files to your styles/ directory within your phpBB root directory.
  4. Once you have uploaded your phpBB style, go to your administration control panel.
  5. Once inside your admin dashboard, click on the CUSTOMISE tab.
    Customise tab
  6. Click Install Styles on the left pane.
    Install Styles link on left pane
  7. Click the Install Style link under the ACTIONS column, then go back to Styles to see your list of styles.
    Install Styles link under Actions column
  8. Next, click the Details links for the new style you want to set as a default.
    Install Styles link under Actions column
  9. Click the Yes radio button next to Make default style, then Submit.
    Install Styles link under Actions column
  10. Go back to Styles and Deactivate your previous style.
    Deactivate link
  11. Refresh your admin dashboard to check if the new style has been reflected.

How to Manage Styles

Styles in phpBB allow you to customize your forum's aesthetic and user experience. One effective way to create new styles is by modifying existing ones, such as the default prosilver style. phpBB supports template inheritance, simplifying the creation of new styles by building upon the foundation of existing ones.

The Styles Tree (Style Inheritance)

In phpBB, styles often inherit properties from a "parent" style to form a "child" style, which can be customized. This is visible in the Style Management section of your Admin Control Panel (ACP), where the hierarchical relationship among installed styles is displayed. For example:

prosilver
    prosilver Special Edition
        prosilver SE Red Edition
        prosilver SE Gold Edition
newstyle pro
    newstyle ultra
        newstyle ultra-black
    newstyle mono

While phpBB allows you to edit these relationships, altering the inheritance hierarchy can lead to complications, especially with updates and functionality. It's typically best to leave it as is.

Default Style Settings

phpBB offers flexibility in how styles are utilized by different users on the board. By navigating to General > Board Configuration > Board settings in the ACP, you can configure several important style settings:

  • Default Style: This setting determines the default style for registered users. Users can change their preferred style via the User Control Panel (UCP) unless overridden by admin settings.
  • Guest Style: This specifies the default style for guests, or unregistered visitors, to your forum.
  • Override User Style: When enabled, this option forces all users, including guests, to use the default style set by the board administrator, regardless of their personal preferences.

How to Edit Styles

Editing styles in phpBB is a powerful way to customize the appearance of your forum, but it requires some knowledge of HTML, CSS, and the basic structure of phpBB. Here’s a comprehensive guide to help you make the most out of your phpBB style customization.

Preparation

Before you begin, you'll need the right tools:

  • Text Editor: Choose a robust text editor like Notepad++ or VSCode. These editors offer features like syntax highlighting and error checking, which are invaluable for editing code.
  • Developer Tools: Modern browsers (Chrome, Firefox, Edge) include developer tools, which you can access by pressing F12. These tools are crucial for inspecting web elements, testing changes in real time, and debugging.

Editing Templates

Templates are at the core of phpBB styles. They define the HTML structure of your forum's pages. The file list below is based on the prosilver style, but this structure is common across many other phpBB styles.

  • template/overall_header.html - Controls the top of every page, including the section.
  • template/overall_footer.html - Manages the bottom of every page.
  • template/navbar_header.html - Contains the main navigation elements in the header.
  • template/navbar_footer.html - Contains navigation elements in the footer.
  • template/index_body.html - Structures the forum index page.
  • template/viewforum_body.html - Defines the layout of the forum view pages.
  • template/viewtopic_body.html - Structures the topic view pages.

For deeper customizations, refer to the phpBB Development Documentation or the Template Syntax Tutorial, which provides guidance on using template tags and conditionals.

Important: phpBB uses a caching system to enhance performance. After making changes to templates, you must clear the cache via the ACP by clicking on "Purge the cache" to see your changes reflected on the live site.

Editing Themes

Themes control the visual styling (CSS) of your phpBB forum and are less about structure and more about aesthetics. When editing themes, remember the following:

  • Use your browser's developer tools to identify and modify CSS properties. For example, in Chrome, the Inspector tool can help you find which CSS rules are applying to specific elements.
  • Once you identify the necessary CSS files and their rules, use your text editor to make changes to the .css files located within the theme/ directory of your style.

Note: Changes might not appear immediately due to browser caching. Perform a hard refresh (usually CTRL+F5 on most browsers) to clear the cache and see your updates.

Managing Local and Live Environments

It’s wise to maintain a local (offline) copy of your phpBB forum for testing:

  • Setup a Local Copy: Download your forum’s style files via FTP from your live site, or work with the files included in the original style package.
  • Test Changes Locally: Before applying changes to your live site, test them on your local setup to ensure everything works as expected.

Best Practices

  • Use a Child Style: If planning extensive changes, consider creating a "child" style. This allows you to inherit features from an existing style and overwrite only what’s necessary, facilitating easier updates and maintenance. For more information, see Creating & Modifying Styles.
  • Extension Check: Before editing styles for functionality changes, look for available extensions that might meet your needs without additional coding.

How to Update a Style

Updating your phpBB style is straightforward and requires minimal steps. Simply upload the new style files to the directory of the style you want to update. This is to ensure that you overwrite the existing files.

After uploading the files, go to your board's Admin Control Panel (ACP) index and click on Purge the cache to clear the cache and apply the updates.

Warning: If you have previously customized your style, updating it will overwrite these changes. To avoid losing your customizations, make sure to back up your style files before proceeding with an update. Once the update is complete, you can reapply your customizations as needed.

How to Remove a Style

There are occasions when you might need to remove a style from your phpBB forum. phpBB provides two options for managing this: Deactivating or completely uninstalling the style.

  1. Deactivate

    Deactivating a style disables it from being used on the board but does not remove its files or database entries. This allows you to reactivate the style later without affecting users’ preferences if they have selected it as their default. To deactivate a style, navigate to the Style Management page in the ACP and click on the Deactivate link next to the style you wish to disable.

  2. Uninstall

    Uninstalling a style removes it completely from your board and deletes its associated database settings. On the Style Management page, click the Uninstall link for the style you want to remove. You will also have the option to delete the style files from your server.

Warning: Be cautious with the Delete from filesystem option as it permanently removes the style files from your server. This action is irreversible through the ACP, and you would need to re-upload the style files to reinstall the style.

Summary

In phpBB, managing styles involves installing, customizing, and updating them to enhance the forum's appearance and user experience. Styles, which consist of templates, theme assets, and a configuration file, are stored in the styles/ directory and can be modified using HTML and CSS knowledge. Through the Admin Control Panel, styles can be easily updated or replaced by uploading new files, and significant changes are typically tested on a local setup before implementation. To prevent loss of customizations, it's crucial to back up style files before making updates. Additionally, styles can be deactivated or fully removed based on the forum's requirements. However, this action should also be taken with careful management to ensure changes do not negatively affect user preferences or forum functionality.

If you need further assistance, feel free to contact us via Chat or Phone:

  • Chat Support - While on our website, you should see a CHAT bubble in the bottom right-hand corner of the page. Click anywhere on the bubble to begin a chat session.
  • Phone Support -
    • US: 888-401-4678
    • International: +1 801-765-9400

You may also refer to our Knowledge Base articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.

Did you find this article helpful?

 
* Your feedback is too short

Loading...