phpBB

Development Wiki

Templating Tutorial

From phpBB Development Wiki

Adding a New Style : Tutorial

Simple Tutorial on how to create or modify a new style for phpBB3/Olympus. We will be creating a new style called "myStyle".

  • Duplicate the subSilver directory located in /styles/
  • Rename the copy to "MyStyle"

Setting Style Configuration

  • Go inside the MyStyle directory, and look for a file named style.cfg
  • Open style.cfg in any text editor
  • Set the contents of the file to the following:
# General Information about this style
name = myStyle
copyright = © 2007 olympuswiki Tutorial
version = 0.1.0
  • Giving it a unique name "myStyle" will keep it separate from the other styles in the /style/ directory. Make sure this name is the same name as the name of the directory.
  • Since this style is in Development, we give it version 0.1.0 See Version Numbering
  • Now open the template.cfg file located in /styles/myStyle/template/
  • Set the contents of the file to the following:
# General Information about this template
name = myStyle
copyright = © 2007 olympuswiki Tutorial
version = 0.1.0
  • Now open the theme.cfg file located in /styles/myStyle/theme/
  • Change the General Information section of the file to the following:
# General Information about this theme
name = myStyle
copyright = © 2007 olympuswiki Tutorial
version = 0.1.0
  • Now open the imageset.cfg file located in /styles/myStyle/imageset/
  • Change the General Information section of the file to the following:
# General Information about this style
name = myStyle
copyright = © 2007 olympuswiki Tutorial
version = 0.1.0
  • For now, lets leave the Images section alone,
  • Information for these images can be defined in your database for now
  • If you plan on releasing the style, you must put your custom images in place of the default images.
  • Following is the format used for the images in the imageset.cfg file
img_icon_name = my_icon.gif*xx*yy
  • Where xx = Height
  • yy = Width
  • See: imageset.cfg for more information.


Installing your new Style

Configuration of your files are complete, and you are now ready to install your style.

  • Login to the forum and go to the ACP (Administration Control Panel)
  • Click on the Styles Tab
  • You will see a list of installed styles, and uninstalled styles
  • Click install on "myStyle"
  • It will ask you to choose an imageset, theme, and template fileset for the theme, be sure to choose "myStyle" for all three items

You have now installed your custom style... now we can work on customizing it.

Customizing a Style

Customizing the Theme

There are two ways to customize your theme/stylesheet...

  1. Customize your stylesheet Directly by accessing the file
  2. Customize your stylesheet by going to your ACP and doing it through the theme admin panel.

To edit your stylesheet directly, open:

/styles/myStyle/theme/stylesheet.css
in a text editor.

If you are unfamiliar with coding in CSS, it is recommended that you use the following option.

  • Go to your ACP > Styles > Themes >
  • Click Edit on myStyle
  • Just as an example, we are going to change the background color of the entire page to black...
    1. select body from the "Select CSS class" Drop-down menu.
    2. Change Background colour to: 000000
    3. click Submit
  • Click Forum Index... reload until you see the background of the entire page is black.

You can completely change the look of the forums through the Theme Admin Panel by modifying the Stylesheet. For more on editing styles through the ACP, see: Editing Styles through the ACP

Customizing the Imageset

There are again, two ways to customize the imageset in phpBB3

  1. Customize imageset by changing parameters in the imageset.cfg file
  2. Customize imageset through the ACP imageset panel.

Note that #2 method uses the database to change the imageset, if you want to install your style on another Board, or release it for public use, you must use the imageset.cfg file for specifying your images.

To Edit your imageset through the imageset.cfg file

  • Place all of your images you want to use in the
    /styles/myStyle/imageset/
    directory
  • Open /styles/myStyles/imageset/imageset.cfg in a text editor
  • Use the following format to edit the file:
    img_icon_name = my_icon.gif*hh*ww
  • Do NOT change the first name instances... those are used in phpBB3 core to define where the images appear throughout the board.
  • The second instance should roughly match what the image is used for, this is best for consistancy.
  • The *hh*ww values are specified *height*width in pixels

To Edit your imageset through the ACP

  • Go to your ACP > Styles > Imagesets >
  • Click Edit on myStyle
  • Select an image you want to change from the Select image drop down menu
  • The image will appear in a box at the top.
  • Now select an image you want to replace it with from the Image drop down menu at the bottom.
  • The image will instantly appear to give you a preview
  • By default, you should select to use dimensions when changing images.
  • Click Submit to save your changes to the Database

You can change all of the imageset icons through the ACP, for more on editing styles through the ACP, see: Editing Styles through the ACP

Customizing the Templates

Once again, there are two ways to edit the style templates...


See Also

Template errors Tutorial.Template_syntax