As skin developers, sometimes we need to add our own resources, such as Javascript or CSS code, to our skins, either as complete filenames or just as code snippets.

In order to do so, the b2evolution skin’s API provides several methods to manage all those situations in an efficient way. It’s recommended to call any of the functions below from the method display_init() located at the _skin.class.php file of your skin.

CSS

Including complete CSS files must be done by calling require_css( $css_file, $relative_to ). This function expects for many other parameters, but let’s focus in the first two of them:

1. $css_file: the name of the file to be loaded, including the .css extension.

2. $relative_to: where to find that file. The URL to the resource will be constructed according to the value of this variable.

   1. relative or true: set the skin’s root folder as reference if your skin has html tag <base href="http://example.com/skins/example_skin/" />. i.e.

      require_css('foo.css', 'relative');

      loads

      <link type="text/css" rel="stylesheet" src="foo.css" />

   2. absolute or url is started with http:// or https:// or //: set the skin’s root folder if you CSS url is really absolute url to skin root. i.e.

      require_css('foo.css', 'absolute');

      loads

      <link type="text/css" rel="stylesheet" src="http://example.com/skins/example_skin/foo.css" />

      To get same result use $this->require_css( 'foo.css' ) from your Skin class or $Skin->require_css( 'foo.css' ) from your skin files.

   3. rsc_url: (default value) set the folder /rsc/css as reference. i.e.

      require_css('foo.css', 'rsc_url');

      loads

      <link type="text/css" rel="stylesheet" src="http://example.com/rsc/css/foo.css" />

   4. blog: set the current blog domain as base. i.e.

      require_css('foo.css', 'blog');

      loads

      <link type="text/css" rel="stylesheet" src="http://subdomain.example.com/rsc/css/foo.css" />

It’s also possible to include inline CSS code into your skin. Use the function add_css_headline($headline) to do so. The $headline expects for a string with your CSS code.

When we invoke the function this way:

add_css_headline('.foo {display: block;} .bar{display: none;}');

<style type="text/css">
    .foo {display: block;} .bar{display: none;}
</style>

Javascript

There are also similar mechanism to load Javascript files and snippets into our skin.

As explained above, the function require_js( $js_file, $relative_to); may be used to load javascript files. Please note that this function expects for more parameters, but let’s focus in the first two of them.

1. $css_file: the name of the file to be loaded, including the .css extension.

2. $relative_to: where to find that file. The URL to the resource will be constructed according to the value of this variable.

   1. relative or true: set the skin’s root folder as reference if your skin has html tag <base href="http://example.com/skins/example_skin/" />. i.e.

      require_js('foo.js', 'relative');

      loads

      <script type="text/javascript" src="foo.js"></script>

   2. absolute or url is started with http:// or https:// or //: set the skin’s root folder if you JS url is really absolute url to skin root. i.e.

      require_js('foo.js', 'absolute');

      loads

      <script type="text/javascript" src="http://example.com/skins/example_skin/foo.js"></script>

      To get same result use $this->require_js( 'foo.js' ) from your Skin class or $Skin->require_js( 'foo.js' ) from your skin files.

   3. rsc_url: (default value) set the folder /rsc/js as reference. i.e.

      require_js('foo.js', 'rsc_url');

      loads

      <script type="text/javascript" src="http://example.com/rsc/js/foo.js"></script>

   4. blog: set the current blog domain as base. i.e.

      require_js('foo.js', 'blog');

      loads

      <script type="text/javascript" src="http://subdomain.example.com/rsc/js/foo.js"></script>

Javascript code snippets may also be loaded from the skin by calling the function add_js_headline($headline). As explained in the CSS section, the $headline variable must string containing the javascript code.

add_js_headline('console.log("Hello world!");');

produces this tag

<script type="text/javascript">console.log("Hello world!");</script>

PRO TIP

Dequeue scripts: b2evolution saves all the enqueued libraries (CSS and Javascript) in an array named $headlines. Also, a $dequeued_headlines array is loaded during the execution, thus by calling dequeue( $file_name ) will save push the $file_name string into $dequeued_headlines.

This way, at the moment of creating the HTML, all the libraries saved by key at $headlines that exist in the $dequeued_headlines will be skipped.

Images

In v5 skins, it was common to load images relative to the skin directory, for example: <img src="rounded-corner.gif">. This was possible because we had a <base href="http://your_site.com/skins/your_skin_folder/"> tag added to all pages (function skin_base_tag()). As such decorative images are no longer a good practice (you should use CSS), the use of a <base> tag has been removed for newer v6+ skins in b2evolution 7.2+.