View source

From phpBB Development Wiki

for Templating Tutorial
You do not have permission to edit this page, for the following reason:
The action you have requested is limited to users in the group: Users.
You can view and copy the source of this page:
==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:
<pre># General Information about this style
name = myStyle
copyright = &copy; 2007 olympuswiki Tutorial
version = 0.1.0</pre>
* 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:
<pre># General Information about this template
name = myStyle
copyright = &copy; 2007 olympuswiki Tutorial
version = 0.1.0</pre>
* Now open the [[theme.cfg]] file located in /styles/myStyle/theme/
* Change the General Information section of the file to the following:
<pre># General Information about this theme
name = myStyle
copyright = &copy; 2007 olympuswiki Tutorial
version = 0.1.0</pre>
* Now open the [[imageset.cfg]] file located in /styles/myStyle/imageset/
* Change the General Information section of the file to the following:
<pre># General Information about this style
name = myStyle
copyright = &copy; 2007 olympuswiki Tutorial
version = 0.1.0</pre>
* 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
<pre>img_icon_name = my_icon.gif*xx*yy</pre>
* Where xx = Height
* yy = Width
* See: [[imageset.cfg]] for more information.
<br>

===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 '''[[ACP/Styles|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.
<br>

==Customizing a Style==

===Customizing the Theme===
There are two ways to customize your theme/stylesheet...
# Customize your stylesheet Directly by accessing the file
# Customize your stylesheet by going to your ACP and doing it through the theme admin panel.

To edit your stylesheet directly, open:
<pre>/styles/myStyle/theme/stylesheet.css</pre> 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...
*# select ''body'' from the "Select CSS class" Drop-down menu.
*# Change Background colour to: '''000000'''
*# 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|Editing Styles through the ACP]]
<br>

===Customizing the Imageset===
There are again, two ways to customize the imageset in phpBB3
# Customize imageset by changing parameters in the imageset.cfg file
# 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 <pre>/styles/myStyle/imageset/</pre> directory
* Open /styles/myStyles/imageset/imageset.cfg in a text editor
* Use the following format to edit the file: <pre>img_icon_name = my_icon.gif*hh*ww</pre>
* 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|Editing Styles through the ACP]]

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

{{tutorial-stub}}

==See Also==
[[Template errors]]
[[Category:Tutorials]]
[[Category:Styles]]
Templates used on this page:
Template:Tutorial-stub (view source)
Return to Templating Tutorial.
Retrieved from "http://wiki.phpbb.com/Templating_Tutorial"