b2evolution b2evolution

  • Sign in
  • Sign up
  • About
  • Demo
  • Downloads
  • Hosting
  • Docs
  • Support
  • Sign in
  • Sign up
  • Manuals Home
  • Latest Updates
 
  1. b2evolution CMS User Manual
  2. Developer Reference
  3. Website Skins/Themes
  4. Loading additional resources into a skin

Loading additional resources into a skin

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;}');

The resulting code is:
<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+.

Created by mgsolipa • Last edit by yurabakhtin on 2020-04-30 16:55 • •

No feedback yet


Form is loading...

On this page

  • CSS
  • Javascript
  • PRO TIP
  • Images

Search the Manual

Content Hierarchy

  • b2evolution CMS User Manual
  • User's Guide
  • Installation / Upgrade
  • Front-office Reference
  • Back-office Reference
  • Developer Reference
    • Website Skins/Themes
      • Skin Development Primer
      • Loading additional resources into a skin
      • Where are the skin files?
      • CSS Guidelines
      • Targeted CSS Selectors
      • Introducing evoSkins
      • Modifying evoSkins
      • Creating evoSkins
      • Skin Tags / API
      • Styling widgets
      • Skin Quality Control
      • Using HTML 5 tags
      • Using Custom Item Templates
      • Using bootstrap classes in footers
      • Using Grunt
      • Dev Menu
      • How to add a Google Font (WebFont) ?
      • Custom Fields in a Template
      • Site Skins
    • Email Skins/Themes
    • b2evolution Files
    • Website Integration
    • Plugins
    • Debugging
    • Technical Reference
    • Hacks
    • Credits
    • Development
    • How to... (Customize)
    • Scheduled Tasks Reference
  • Operations Reference
  • Advanced Topics
  • Glossary
  • Archives
b2

This online manual is powered by b2evolution CMS – A complete engine for your website.

About b2evolution

  • What is it?
  • Features
  • Getting Started
  • Screenshots
  • Online demo
  • Testimonials
  • Design philosophy
  • Free & open source
  • Terms of service

Downloads

  • Latest releases
  • Skins
  • Plugins
  • Language packs

About us

  • About us
  • Contact

Webhosting Guide

  • Web hosting blog
  • Best web hosting
  • Cheap web hosting
  • Green web hosting
  • Hosting with SSH
  • VPS hosting
  • Dedicated servers
  • Reseller hosting
  • Int'l: UK / France

Docs & Support

  • Online manual
  • Forums
  • Hire a pro !

Other

  • Adsense
  • Press room
  • Privacy policy

Stay in touch

  • GitHub
  • Twitter
  • Facebook
  • LinkedIn
  • News blog
  • RSS feed
  • Atom feed

Founded & Maintained by François Planque