How to Make PhpBB Styles

104 6
    • 1). Access your phpBB administration panel from your browser and click on "Styles." Enter a name for your new style in the "Create new style" field, located in the lower right. Select a theme to use as your framework, such as "prosilver," and click "Submit." Select "Yes" for both options and click "Submit." Click "Return to the previous page" to reload the "Styles" tab.

    • 2). Click on "Themes" and click "Edit" next to the theme you chose when creating your new style. The theme stylesheet will appear in the editor pane. This document holds the main body of styles, which affect how your theme looks. Change the "Style name:" value to your desired theme name, and enter your name next to "Modified by." For example:

      Style name:MyTheme

      Based on style:proSilver (this is the default phpBB 3 style)

      Original author:subBlue ( http://www.subBlue.com/ )

      Modified by: Me

    • 3). Customize the styles by changing values for parameters such as "font-family," "color," "background-color," or "border" while viewing your forum in a different browser tab. For example, to change the default link color from gray to red, edit the "color" value for the "a:link" selector:

      a:link{ color: #ff0000; text-decoration: none; }

      If desired, edit advanced style parameters such as element widths and margins to change the layout. Click "Submit" to save any changes you make. If you are not sure which styles to change, open a new browser tab and go to your administration panel.

    • 4). Click on "Styles" and "Templates." Click "Edit" next to your chosen theme and select a template file such as "overall_header.html." There are over 100 templates, each containing the HTML and template hooks, which control specific parts of your forum. You can use these template files to reference the structure and CSS style classes of your theme, or you can open the forum index in a new browser tab and right-click an area to choose "Inspect Element." This feature is available in Chrome, Firefox and Opera and allows you to view the HTML and CSS styles for the part of the web page you have clicked. Use whichever method makes it easiest for you to visualize how your style customizations will change the overall look.

    • 5). Download a copy of the "imagesets" folder for the theme you are using if you wish to customize your forum graphics. The "imagesets" folder is located on your Web server under "styles," inside your chosen theme's directory. Use your favorite image editing software to open each image found in the "imageset" folder while viewing the forum in your browser to reference where each image appears in the template. Save each image you customized, using a new file name.

    • 6). Return to your phpBB administration panel, click on "Imagesets" on the Styles tab. Click "Edit" next to your chosen theme and proceed to link each image you wish to customize with your edited file using the drop-down menus. Click "Submit" to save your changes, then view your Board Index to see your new style in action.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.