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:45 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.   * ''**"type"**'': Specifies whether or not the value passed in for ''$data'' is the URL of a CSS file or raw inline CSS.
Line 35: Line 39:
      * ''"url"'': Specifies that the value in ''$data'' is the URL of a CSS file. This is the default value.       * ''"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.       * ''"inline"'': Specifies that the value in ''$data'' is raw inline CSS.
-  * ''**"group"**'': An integer value specifying the group that the entry belongs to. Entries are rendered in an order of their group, then their weight from lowest to highest. Default value is 0.+  * ''**"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.   * ''**"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"**'':   * ''**"async"**'':

Personal Tools