Differences

This shows you the differences between the selected revision and the current version of the page.

punbb13:extension_development:forum_loader 2011/12/24 14:08 punbb13:extension_development:forum_loader 2020/02/06 11:04 current
Line 1: Line 1:
====== forum_loader ====== ====== forum_loader ======
-Introduced in PunBB 1.4.0, the forum_loader class is the preferred method for including custom javascript and CSS with your extensions. Extension developers no longer need to manually construct and insert ''<link>'' and ''<script>'' tags, please use forum_loader instead.+Introduced in PunBB 1.4.0, the ''forum_loader'' class is the preferred method for including custom javascript and CSS with your extensions. Extension developers no longer need to manually construct and insert ''<link>'' and ''<script>'' tags, please use ''forum_loader'' instead.
-===== Quick Example =====+===== Adding CSS ===== 
 + 
 +==== Quick Example ==== 
The following example((taken from https://gist.github.com/1094550)) demonstrates a safe way to use the forum_loader to include your extensions CSS file for the user's selected theme, or the default theme. It assumes you already know how to use the ''[[punbb13:extension_development#using_ext_info|$ext_info]]'' and ''$[[punbb13:global_variables#forum_user|forum_user]]'' arrays. The following example((taken from https://gist.github.com/1094550)) demonstrates a safe way to use the forum_loader to include your extensions CSS file for the user's selected theme, or the default theme. It assumes you already know how to use the ''[[punbb13:extension_development#using_ext_info|$ext_info]]'' and ''$[[punbb13:global_variables#forum_user|forum_user]]'' arrays.
Line 19: Line 22:
If you only need to add a single CSS file for your extension, just use the hook in this example. You will need to have a CSS file appropriate to the Oxygen theme at ''/style/Oxygen/style.css'' under your extension directory, and any other theme appropriate CSS files in their respective folders. If you only need to add a single CSS file for your extension, just use the hook in this example. You will need to have a CSS file appropriate to the Oxygen theme at ''/style/Oxygen/style.css'' under your extension directory, and any other theme appropriate CSS files in their respective folders.
-===== Adding CSS =====+==== add_css Method ==== 
''forum_loader'' provides several options for customizing the way CSS is added to the final page. The method for adding CSS is ''add_css'', and the signature is as follows: ''forum_loader'' provides several options for customizing the way CSS is added to the final page. The method for adding CSS is ''add_css'', and the signature is as follows:
Line 29: Line 33:
    *A string containing raw inline CSS     *A string containing raw inline CSS
  *''$options'' is an array containing several specific key/value pairs that control how the CSS will be included. It can be left ''null'' to use the default settings.   *''$options'' is an array containing several specific key/value pairs that control how the CSS will be included. It can be left ''null'' to use the default settings.
-==== add_css Options ====+=== add_css Options ===
The following is a list of the available options for the ''add_css'' method and their defaults. The following is a list of the available options for the ''add_css'' method and their defaults.
 +  * ''**"type"**'': Specifies whether or not the value passed in for ''$data'' is the URL of a CSS file or raw inline CSS.
 +    * Possible Values:
 +      * ''"url"'': Specifies that the value in ''$data'' is the URL of a CSS file. This is the default value.
 +      * ''"inline"'': Specifies that the value in ''$data'' is raw inline CSS.
 +  * ''**"group"**'': A named constant specifying which group this entry belongs to.
 +    * Possible Values:
 +      * ''**FORUM_CSS_GROUP_DEFAULT**'': The default group. This is the default option.
 +      * ''**FORUM_CSS_GROUP_SYSTEM**'': For system styles. Entries in this group are always loaded first, even before theme-specific CSS.
 +  * ''**"weight"**'': An integer value denoting the order that the entry should render //within it's group//. Lower values render first. The default value is 100.
 +  * ''**"async"**'':
 +  * ''**"media"**'': Specifies the type of display this entry is for. For in-depth information and possible values, see [[http://www.w3schools.com/css/css_mediatypes.asp|CSS Media Types]].
 +  * ''**"every_page"**'':
 +  * ''**"preprocess"**'':
 +  * ''**"browsers"**'':
 +  * ''**"noscript"**'':

Personal Tools