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"**'': | ||
