[Summary view] [Print] [Text view]

   1  <p>These are the basic building blocks of a Skin. If you are already familiar
   2    with this, you might want to see some quick <a href="topic:skinr/examples">examples</a>.</p>
   3  <dl>
   4    <dt>
   5      <h3 id="syntax-machine-name">Machine Name</h3>
   6    </dt>
   7    <dd>
   8      <p>Each skin begins with the prefix <code>skinr</code> in your .info file.
   9        This allows Drupal and Skinr to easily identify and access information
  10        about your skins. It will not show up in the UI or in any markup.
  11      </p>
  12      <pre>skinr[skin_system_name]</pre>
  13    </dd>
  14    <dt>
  15      <h3 id="syntax-title">Title</h3>
  16    </dt>
  17    <dd>
  18      <p>Every skin has one title. This title will appear in the UI as the form
  19        element label, so it should be descriptive of what the Skin is/does.
  20      </p>
  21      <pre>skinr[skin_system_name][title] = Example</pre>
  22    </dd>
  23    <dt>
  24      <h3 id="syntax-description">Description</h3>
  25    </dt>
  26    <dd>
  27      <p>Descriptions are optional, but recommended. They will show in the UI just
  28        as regular form item descriptions do. They may contain HTML.
  29      </p>
  30      <pre>skinr[skin_system_name][description] = This should be a description of my Skin.</pre>
  31    </dd>
  32    <dt>
  33      <h3 id="syntax-type">Type</h3>
  34    </dt>
  35    <dd>
  36      <p>There are 3 different options for displaying your Skinr styles in the UI.
  37        These <strong>types</strong> correspond to Drupal's form API widgets. They
  38        were created to allow you to better present your skins in the UI and to
  39        allow fine-grained control over the options you provide.
  40      </p>
  41      <ol>
  42        <li>
  43          <p><em>checkboxes (default)</em> &ndash; Can be used for singular or
  44            multiple options. Do not use "checkbox" as it will not work. Also
  45            note: Skinr applies checkboxes by default, so it's not necessary to
  46            specify if that's what you want to use.
  47          </p>
  48          <pre>skinr[skin_system_name][type] = checkboxes</pre>
  49        </li>
  50        <li>
  51          <p><em>select</em> &ndash; Good for presenting many options when only
  52            one can be selected. Note: multiple selects are not supported;
  53            checkboxes should be used instead.
  54          </p>
  55          <pre>skinr[skin_system_name][type] = select</pre>
  56        </li>
  57        <li>
  58          <p><em>radios</em> &ndash; Can be used for single options.</p>
  59          <pre>skinr[skin_system_name][type] = radios</pre>
  60        </li>
  61      </ol>
  62    </dd>
  63    <dt>
  64      <h3 id="syntax-options">Options</h3>
  65    </dt>
  66    <dd>
  67      <p>After deciding upon a widget type, you'll need to define your
  68        options. You'll always need to have at least one option.  Each option is
  69        keyed, and consists of both a label and a class. The label will appear in
  70        the UI and the class is the CSS class(es) you want to use. See <a
  71        href="topic:skinr/css">CSS</a> for more information.
  72      </p>
  73      <h4 id="syntax-options-singular">Singular</h4>
  74      <pre>
  75  skinr[skin_system_name][options][1][label] = Foo
  76  skinr[skin_system_name][options][1][class] = foo-class</pre>
  77      <h4 id="syntax-options-multiple">Multiple</h4>
  78      <p><em>Note:</em> Skinr will include a <code>&lt;none&gt;</code> option
  79        automatically for skins that have multiple options so the skin can be
  80        unselected by the user.</p>
  81      <pre>
  82  skinr[skin_system_name][options][1][label] = Foo
  83  skinr[skin_system_name][options][1][class] = foo-class
  84  skinr[skin_system_name][options][2][label] = Bar
  85  skinr[skin_system_name][options][2][class] = bar-class</pre>
  86      <h4>Adding files</h4>
  87      <p>More information on adding files can be found <a href="topic:skinr/css-js">here</a>, but a brief overview of the syntax is below.
  88      </p>
  89      <pre>
  90  skinr[skin_system_name][options][1][stylesheets][all][] = foo.css
  91  skinr[skin_system_name][options][1][scripts][] = foo.js</pre>
  92    </dd>
  93    <dt>
  94      <h3 id="syntax-groups">Groups</h3>
  95    </dt>
  96    <dd>
  97      <p>Groups allow you to place skins inside a fieldset.  This is useful when
  98        trying to present a bunch of related Skins.  You may also choose to show
  99        the fieldset as collapsed by default.
 100      </p>
 101      <h4 id="syntax-group">Defining a group</h4>
 102      <pre>
 103  skinr[options][groups][skin_group_name][title] = Example Group
 104  skinr[options][groups][skin_group_name][description] = Set font-family and size options.
 105  skinr[options][groups][skin_group_name][collapsible] = 1 // Defaults to 1. Options are 1 or 0.
 106  skinr[options][groups][skin_group_name][collapsed] = 0 //  // Defaults to 0. Options are 1 or 0.
 107  </pre>
 108      <h4 id="syntax-group-skin">Associating a skin with a group</h4>
 109      <pre>
 110  skinr[skin_name][title] = Example Skin
 111  skinr[skin_name][description] = This should be a description of my Skin.
 112  skinr[skin_name][group] = skin_group_name
 113  ...</pre>
 114    </dd>
 115  </dl>
 116