[Summary view] [Print] [Text view]

   1  <p>The main advantage of using Skinr is that it provides a means of easily
   2    reusing CSS classes. How you set up those classes and the code you provide
   3    is up to you. This page is meant to inform you about your options.
   4  </p>
   5  
   6  <h3 id="css-js-classes">CSS classes in Skins</h3>
   7  <p>Classes in Skinr are typically defined in the <a
   8    href="topic:skinr/syntax#syntax-options">skin options</a>. A single class is
   9    all that is necessary, but multiple classes can easily be added.
  10  </p>
  11  <h4 id="css-js-classes-single">Single Class</h4>
  12  <pre>skinr[skin_system_name][options][1][class] = foo-class</pre>
  13  <h4 id="css-js-classes-multiple">Multiple Classses</h4>
  14  <p>Multiple classes should be separated by a single space.</p>
  15  <pre>skinr[skin_system_name][options][1][class] = foo-class bar-class</pre>
  16  
  17  
  18  <h3 id="css-js-external">External CSS &amp; JavaScript files</h3>
  19  <p>CSS can be stored in external files, or the files can simply be added to
  20    your theme's existing CSS file. Personally, I like to create a separate CSS
  21    file that stores the bulk of Skinr CSS. The same can be done with JavaScript
  22    files. If your skins require CSS &amp; Javascript that is used site wide, the
  23    best approach is to load the files normally via the theme. This will ensure
  24    your files are loaded on all pages and therefore always available.</p>
  25  <pre>
  26  stylesheets[all][] = css/skinr.css
  27  scripts[] = js/skinr.js
  28  </pre>
  29  <h4>Adding files to skins</h4>
  30  <p>There are cases where it makes sense to handle loading the CSS/JavaScript
  31    files in the skin itself. This can be done by by adding the following line(s)
  32    to your skin.
  33  </p>
  34  <pre>
  35  skinr[skin_system_name][scripts][] = css/dropdown.js
  36  skinr[skin_system_name][stylesheets][all][] = css/dropdown.css
  37  </pre>
  38  <h4>Adding files to skin options</h4>
  39  <p>This can be taken a step further by including files per option. Below is a
  40    detailed example of what a use case for this might look like:</p>
  41  <pre>
  42  skinr[dropdowns][title] = Dropdown Menus
  43  skinr[dropdowns][type] = select
  44  skinr[dropdowns][description] = Select a vertical or horizontal dropdown menu. 
  45  skinr[dropdowns][features][] = block_menu_block
  46  skinr[dropdowns][stylesheets][all][] = css/dropdown.css
  47  skinr[dropdowns][scripts][] = js/hoverIntent.js
  48  
  49  skinr[dropdowns][options][1][label] = Horizontal
  50  skinr[dropdowns][options][1][class] = dd-vertical
  51  skinr[dropdowns][options][1][stylesheets][all][] = css/dropdown-vertical.css
  52  skinr[dropdowns][options][1][scripts][] = js/dropdown-vertical.js
  53  
  54  skinr[dropdowns][options][2][label] = Vertical
  55  skinr[dropdowns][options][2][class] = dd-horizontal
  56  skinr[dropdowns][options][2][stylesheets][all][] = css/dropdown-horizontal.css
  57  skinr[dropdowns][options][2][scripts][] = js/dropdown-horizontal.js
  58  </pre>
  59  <p>The syntax for adding these files is the same as Drupal. See <a
  60    href="http://drupal.org/node/171205">Structure of the .info file</a> for full
  61    details.</p>
  62  <h3 id="css-js-ui-classes">Defining classes in the UI</h3>
  63  <p>In addition to defining CSS classes in the .info file, you can also add
  64    classes directly into the UI. Under "Advanced Options" there is a text field
  65    where you can add a class or classes manually. The syntax for adding classes
  66    the same as the <a href="#css-js-classes">above examples</a>, with multiple classes separated by a space.
  67  </p>
  68  <p><img src="&path&images/ui-e.png" alt="Adding classes in the UI" /></p>