Translations of this page: en bg cs de fi fr hu it ja pl ru tr zh


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.

Adding CSS

Quick Example

The following example1) 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 $ext_info and $forum_user arrays.

<hook id="hd_head"><![CDATA[
	if ($forum_user['style'] != 'Oxygen' && file_exists($ext_info['path'].'/style/'.$forum_user['style'].'/style.css'))
		$forum_loader->add_css($ext_info['url'].'/style/'.$forum_user['style'].'/style.css', array('type' => 'url'));
		$forum_loader->add_css($ext_info['url'].'/style/Oxygen/style.css', array('type' => 'url'));

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.

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:

add_css($data = NULL, $options = NULL)
  • $data is either:
    • A string containing the URL of the CSS file to include, or
    • 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.

add_css Options

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 CSS Media Types.
  • “every_page”:
  • “preprocess”:
  • “browsers”:
  • “noscript”:

Personal Tools