syntax.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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>