first import
This commit is contained in:
49
sites/all/modules/skinr/help/contrib-themes.html
Normal file
49
sites/all/modules/skinr/help/contrib-themes.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<h3>Base themes</h3>
|
||||
<ul>
|
||||
<li><a href="http://drupal.org/project/adaptivetheme">Adaptive Theme</a></li>
|
||||
<li><a href="http://drupal.org/project/basic">Basic</a></li>
|
||||
<li><a href="http://drupal.org/project/blueprint">Blueprint</a></li>
|
||||
<li><a href="http://drupal.org/project/fusion">Fusion</a></li>
|
||||
<li><a href="http://drupal.org/project/Hexagon">Hexagon</a></li>
|
||||
<li><a href="http://drupal.org/project/studio">Studio</a></li>
|
||||
<li><a href="http://drupal.org/project/zen">Zen</a></li>
|
||||
</ul>
|
||||
<h3>General/Subthemes</h3>
|
||||
<ul>
|
||||
<li><a href="http://drupal.org/project/abstract">Abstract</a></li>
|
||||
<li><a href="http://drupal.org/project/acquia_prosper">Acquia Prosper</a></li>
|
||||
<li><a href="http://drupal.org/project/acquia_slate">Acquia Slate</a></li>
|
||||
<li><a href="http://drupal.org/project/at_koda">AT Koda</a></li>
|
||||
<li><a href="http://drupal.org/project/at_panels_everywhere">AT Panels Everywhere</a></li>
|
||||
<li><a href="http://drupal.org/project/celadon">Celadon</a></li>
|
||||
<li><a href="http://drupal.org/project/lightfantastic">Light Fantastic</a></li>
|
||||
<li><a href="http://drupal.org/project/magazeen">Magazeen</a></li>
|
||||
<li><a href="http://drupal.org/project/newswire">Newswire</a></li>
|
||||
<li><a href="http://drupal.org/project/orange">Orange</a></li>
|
||||
<li><a href="http://drupal.org/project/simply_modern">Simple Modern</a></li>
|
||||
</ul>
|
||||
<h3>Commercial Themes</h3>
|
||||
<ul>
|
||||
<li><a href="http://pixeljets.com/drupal-themes/aura">Aura</a></li>
|
||||
<li><a href="http://www.sooperthemes.com/drupal-themes/aureus">Aureus</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/bubblr">Bubblr</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/clean-commerce">Clean Commerce</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/copywrite">Copywrite</a></li>
|
||||
<li><a href="http://www.sooperthemes.com/drupal-themes/cuttingedge">Cuttingedge</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/early-edition">Early Edition</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/fresh-start">Fresh Start</a></li>
|
||||
<li><a href="http://www.sooperthemes.com/drupal-themes/galaxy">Galaxy</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/grunge">Grunge</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/lockdown">Lockdown</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/luxe">Luxe</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/market-share">Market Share</a></li>
|
||||
<li><a href="http://www.sooperthemes.com/drupal-themes/new-media">New Media</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/pump-volume">Pump Up The Volume</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/sharp-sales">Sharp Sales</a></li>
|
||||
<li><a href="http://www.sooperthemes.com/drupal-themes/syan">Syan</a></li>
|
||||
<li><a href="http://www.sooperthemes.com/drupal-themes/synopsis">Synopsis</a></li>
|
||||
<li><a href="http://pixeljets.com/drupal-themes/taurine">Taurine</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/technoli">Technoli</a></li>
|
||||
<li><a href="http://fusiondrupalthemes.com/theme/tranquil">Tranquil</a></li>
|
||||
<li><a href="http://www.sooperthemes.com/drupal-themes/urgency">Urgency</a></li>
|
||||
</ul>
|
36
sites/all/modules/skinr/help/contribute.html
Normal file
36
sites/all/modules/skinr/help/contribute.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<h3>Reporting issues/bugs</h3>
|
||||
<p>Before <a href="http://drupal.org/node/add/project-issue/skinr">creating a
|
||||
new issue</a>, please make sure to <a
|
||||
href="http://drupal.org/project/issues/search/skinr">search existing
|
||||
issues</a> first to see if your problem has already been reported. Remember to
|
||||
include as much information as possible about the issue your are experiencing,
|
||||
the setup you are running, and anything else that would be helpful for us to
|
||||
reproduce the issue.
|
||||
</p>
|
||||
|
||||
<h3>Providing patches</h3>
|
||||
<p>We love patches. If you are looking to submit a patch or have an idea for a
|
||||
new feature, we'd love to hear from you. Please start by:</p>
|
||||
<ol>
|
||||
<li><a href="http://drupal.org/coding-standards">Coding Standards</a></li>
|
||||
<li><a href="http://drupal.org/patch/create">Learn how to create
|
||||
patches</a></li>
|
||||
<li><a href="http://drupal.org/node/add/project-issue/skinr">Create an
|
||||
issue</a></li>
|
||||
</ol>
|
||||
|
||||
<h3>Sharing your work with others</h3>
|
||||
<p>If you've created a nice menu, block, tab style, or whatever, please consider
|
||||
packaging it up, and sharing it with the community. Your contribution could
|
||||
really help out someone new. If you have a skin to share, please post it to
|
||||
the <a href="http://drupal.org/project/issues/skinr">Skinr project issue
|
||||
queue</a>. Also note, you do not have to contribute code. If you are a
|
||||
designer, feel free to submit mockups!
|
||||
</p>
|
||||
|
||||
<h3>Showing off your work</h3>
|
||||
<p>We love to see how people are using Skinr. If you have done something cool
|
||||
with Skinr, and want to tell us about it, please post to the <a
|
||||
href="http://drupal.org/project/issues/skinr">Skinr project issue
|
||||
queue</a>.
|
||||
</p>
|
68
sites/all/modules/skinr/help/css-js.html
Normal file
68
sites/all/modules/skinr/help/css-js.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<p>The main advantage of using Skinr is that it provides a means of easily
|
||||
reusing CSS classes. How you set up those classes and the code you provide
|
||||
is up to you. This page is meant to inform you about your options.
|
||||
</p>
|
||||
|
||||
<h3 id="css-js-classes">CSS classes in Skins</h3>
|
||||
<p>Classes in Skinr are typically defined in the <a
|
||||
href="topic:skinr/syntax#syntax-options">skin options</a>. A single class is
|
||||
all that is necessary, but multiple classes can easily be added.
|
||||
</p>
|
||||
<h4 id="css-js-classes-single">Single Class</h4>
|
||||
<pre>skinr[skin_system_name][options][1][class] = foo-class</pre>
|
||||
<h4 id="css-js-classes-multiple">Multiple Classses</h4>
|
||||
<p>Multiple classes should be separated by a single space.</p>
|
||||
<pre>skinr[skin_system_name][options][1][class] = foo-class bar-class</pre>
|
||||
|
||||
|
||||
<h3 id="css-js-external">External CSS & JavaScript files</h3>
|
||||
<p>CSS can be stored in external files, or the files can simply be added to
|
||||
your theme's existing CSS file. Personally, I like to create a separate CSS
|
||||
file that stores the bulk of Skinr CSS. The same can be done with JavaScript
|
||||
files. If your skins require CSS & Javascript that is used site wide, the
|
||||
best approach is to load the files normally via the theme. This will ensure
|
||||
your files are loaded on all pages and therefore always available.</p>
|
||||
<pre>
|
||||
stylesheets[all][] = css/skinr.css
|
||||
scripts[] = js/skinr.js
|
||||
</pre>
|
||||
<h4>Adding files to skins</h4>
|
||||
<p>There are cases where it makes sense to handle loading the CSS/JavaScript
|
||||
files in the skin itself. This can be done by by adding the following line(s)
|
||||
to your skin.
|
||||
</p>
|
||||
<pre>
|
||||
skinr[skin_system_name][scripts][] = css/dropdown.js
|
||||
skinr[skin_system_name][stylesheets][all][] = css/dropdown.css
|
||||
</pre>
|
||||
<h4>Adding files to skin options</h4>
|
||||
<p>This can be taken a step further by including files per option. Below is a
|
||||
detailed example of what a use case for this might look like:</p>
|
||||
<pre>
|
||||
skinr[dropdowns][title] = Dropdown Menus
|
||||
skinr[dropdowns][type] = select
|
||||
skinr[dropdowns][description] = Select a vertical or horizontal dropdown menu.
|
||||
skinr[dropdowns][features][] = block_menu_block
|
||||
skinr[dropdowns][stylesheets][all][] = css/dropdown.css
|
||||
skinr[dropdowns][scripts][] = js/hoverIntent.js
|
||||
|
||||
skinr[dropdowns][options][1][label] = Horizontal
|
||||
skinr[dropdowns][options][1][class] = dd-vertical
|
||||
skinr[dropdowns][options][1][stylesheets][all][] = css/dropdown-vertical.css
|
||||
skinr[dropdowns][options][1][scripts][] = js/dropdown-vertical.js
|
||||
|
||||
skinr[dropdowns][options][2][label] = Vertical
|
||||
skinr[dropdowns][options][2][class] = dd-horizontal
|
||||
skinr[dropdowns][options][2][stylesheets][all][] = css/dropdown-horizontal.css
|
||||
skinr[dropdowns][options][2][scripts][] = js/dropdown-horizontal.js
|
||||
</pre>
|
||||
<p>The syntax for adding these files is the same as Drupal. See <a
|
||||
href="http://drupal.org/node/171205">Structure of the .info file</a> for full
|
||||
details.</p>
|
||||
<h3 id="css-js-ui-classes">Defining classes in the UI</h3>
|
||||
<p>In addition to defining CSS classes in the .info file, you can also add
|
||||
classes directly into the UI. Under "Advanced Options" there is a text field
|
||||
where you can add a class or classes manually. The syntax for adding classes
|
||||
the same as the <a href="#css-js-classes">above examples</a>, with multiple classes separated by a space.
|
||||
</p>
|
||||
<p><img src="&path&images/ui-e.png" alt="Adding classes in the UI" /></p>
|
56
sites/all/modules/skinr/help/examples.html
Normal file
56
sites/all/modules/skinr/help/examples.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<p>Below are some quick side-by-side comparisons of basic Skinr syntax and
|
||||
what they translate to in the UI.</p>
|
||||
<dl>
|
||||
<dt>
|
||||
<h4>Single</h4>
|
||||
</dt>
|
||||
<dd>
|
||||
<pre>
|
||||
skinr[example_single][title] = Single
|
||||
skinr[example_single][description] = A skin with a single option.
|
||||
skinr[example_single][options][1][label] = Foo
|
||||
skinr[example_single][options][1][class] = foo-class</pre>
|
||||
<img src="&path&images/ui-a.png" alt="Single Example" />
|
||||
</dd>
|
||||
<dt>
|
||||
<h4>Multiple</h4>
|
||||
</dt>
|
||||
<dd>
|
||||
<pre>
|
||||
skinr[example_multiple][title] = Multiple (checkboxes)
|
||||
skinr[example_multiple][description] = A skin multiple options that uses a <strong>checkboxes</strong> (multiple choices).
|
||||
skinr[example_multiple][options][1][label] = Foo
|
||||
skinr[example_multiple][options][1][class] = foo-class
|
||||
skinr[example_multiple][options][2][label] = Bar
|
||||
skinr[example_multiple][options][2][class] = bar-class</pre>
|
||||
<img src="&path&images/ui-b.png" alt="Multiple (checkboxes)" />
|
||||
</dd>
|
||||
<dt>
|
||||
<h4>Multiple (radios)</h4>
|
||||
</dt>
|
||||
<dd>
|
||||
<pre>
|
||||
skinr[example_multiple_radio][title] = Multiple (radios)
|
||||
skinr[example_multiple_radio][type] = radios
|
||||
skinr[example_multiple_radio][description] = A skin multiple options that uses <strong>radios</strong> (single choice).
|
||||
skinr[example_multiple_radio][options][1][label] = Foo
|
||||
skinr[example_multiple_radio][options][1][class] = foo-class
|
||||
skinr[example_multiple_radio][options][2][label] = Bar
|
||||
skinr[example_multiple_radio][options][2][class] = bar-class</pre>
|
||||
<img src="&path&images/ui-c.png" alt="Multiple (radios)" />
|
||||
</dd>
|
||||
<dt>
|
||||
<h4>Multiple (select)</h4>
|
||||
</dt>
|
||||
<dd>
|
||||
<pre>
|
||||
skinr[example_multiple_radio][title] = Multiple (select)
|
||||
skinr[example_multiple_radio][type] = select
|
||||
skinr[example_multiple_radio][description] = A skin multiple options that uses <strong>radios</strong> (single choice).
|
||||
skinr[example_multiple_radio][options][1][label] = Foo
|
||||
skinr[example_multiple_radio][options][1][class] = foo-class
|
||||
skinr[example_multiple_radio][options][2][label] = Bar
|
||||
skinr[example_multiple_radio][options][2][class] = bar-class</pre>
|
||||
<img src="&path&images/ui-d.png" alt="Multiple (select)" />
|
||||
</dd>
|
||||
</dl>
|
53
sites/all/modules/skinr/help/features.html
Normal file
53
sites/all/modules/skinr/help/features.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<p><code>[features]</code> are an optional Skinr setting. They do not need to be
|
||||
specified. By default Skinr will assume that your styles can be used anywhere
|
||||
Skinr is available on your site, i.e. nodes, blocks, etc. If you want to
|
||||
reduce UI clutter and have more fine grained control over where your skins are
|
||||
used, you'll want to use the <code>[features]</code> option.
|
||||
</p>
|
||||
<p>The <code>[features]</code> setting is the equivalent of the high level
|
||||
Drupal theme hook. If nothing is specified in your skin it will appear
|
||||
everywhere by default. It may only contain underscores. By specifying a
|
||||
<code>[features]</code> you are telling Skinr: Only show this skin when
|
||||
editing X.
|
||||
</p>
|
||||
<p>Below is a listing of available options, by module:</p>
|
||||
|
||||
<h3>Blocks</h3>
|
||||
<pre>
|
||||
skinr[skin_system_name][features][] = block
|
||||
skinr[skin_system_name][features][] = block_[module]
|
||||
</pre>
|
||||
|
||||
<h3>Comments</h3>
|
||||
<pre>
|
||||
skinr[skin_system_name][features][] = comment_wrapper
|
||||
skinr[skin_system_name][features][] = comment_wrapper_[node_type]
|
||||
</pre>
|
||||
|
||||
<h3>Nodes</h3>
|
||||
<pre>
|
||||
skinr[skin_system_name][features][] = node
|
||||
skinr[skin_system_name][features][] = node_[node_type]
|
||||
</pre>
|
||||
<em class="marker">Note: node_[node_type] is not yet implemented.</em>
|
||||
|
||||
<h3>Page (body classes)</h3>
|
||||
<pre>
|
||||
skinr[skin_system_name][features][] = page
|
||||
</pre>
|
||||
|
||||
<h3>Panels</h3>
|
||||
<pre>
|
||||
skinr[skin_system_name][features][] = panels_pane
|
||||
skinr[skin_system_name][features][] = panels_panel
|
||||
</pre>
|
||||
|
||||
<h3>Views</h3>
|
||||
<pre>
|
||||
skinr[skin_system_name][features][] = views_view
|
||||
skinr[skin_system_name][features][] = views_view__[style_name]
|
||||
skinr[skin_system_name][features][] = views_view__[display_name]
|
||||
skinr[skin_system_name][features][] = views_view__[view_name]
|
||||
skinr[skin_system_name][features][] = views_view__[view_name]__[display_name]
|
||||
</pre>
|
||||
<em class="marker">Note: views_view__[style_name] is not yet implemented.</em>
|
BIN
sites/all/modules/skinr/help/images/ui-a.png
Normal file
BIN
sites/all/modules/skinr/help/images/ui-a.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.5 KiB |
BIN
sites/all/modules/skinr/help/images/ui-b.png
Normal file
BIN
sites/all/modules/skinr/help/images/ui-b.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
BIN
sites/all/modules/skinr/help/images/ui-c.png
Normal file
BIN
sites/all/modules/skinr/help/images/ui-c.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.0 KiB |
BIN
sites/all/modules/skinr/help/images/ui-d.png
Normal file
BIN
sites/all/modules/skinr/help/images/ui-d.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.6 KiB |
BIN
sites/all/modules/skinr/help/images/ui-e.png
Normal file
BIN
sites/all/modules/skinr/help/images/ui-e.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.9 KiB |
3
sites/all/modules/skinr/help/inheritance.html
Normal file
3
sites/all/modules/skinr/help/inheritance.html
Normal file
@@ -0,0 +1,3 @@
|
||||
If you are creating a subtheme and the base theme you are using contains it's own Skinr styles, Skinr allows you to choose whether or not you want your subtheme to inherit those skins or not. By default Skinr will NOT inherit skins. If you want to be able to use a base theme's skins, you will need to add this line to your .info file.
|
||||
|
||||
<pre>skinr[options][inherit_skins] = true</pre>
|
63
sites/all/modules/skinr/help/modules.html
Normal file
63
sites/all/modules/skinr/help/modules.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<p>
|
||||
While skins can be provided in a theme, doing so has the potential
|
||||
disadvantage of making the skin available only to users of that theme (or
|
||||
themes based off of it). Many skins may be useful in any theme, or may provide
|
||||
building blocks that a particular theme could customize. When producing skins,
|
||||
please consider first whether you can make your work generic enough to provide
|
||||
in a module, thereby making it available to all Drupal users.
|
||||
</p>
|
||||
<p>The good news is that providing a skin in a module rather than a theme is
|
||||
quick and easy, even if you've never used PHP. In the steps below, we outline
|
||||
how to create a module for your skins. When creating your module, simply
|
||||
substitute occurrences of "block_skins" with a "machine name" (a name suitable
|
||||
for computers to read) of your choosing and change the description accordingly.
|
||||
Drupal module names typically are all lower case with no spaces and no
|
||||
punctuation except underscores (which are used to separate words).
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Create a new folder in your modules directory using the machine name:</p>
|
||||
<pre>sites/all/modules/block_skins</pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Create a <code>block_skins.info</code> file inside the
|
||||
<code>block_skins</code> folder and include following code inside the
|
||||
file:
|
||||
</p>
|
||||
<pre>
|
||||
name = "Block Skins"
|
||||
description = "A set of skins providing configurable layout options for blocks."
|
||||
package = "Skinr"
|
||||
core = 6.x</pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Create a <code>block_skins.module</code> file inside the
|
||||
<code>block_skins</code> folder and include the following code inside the
|
||||
file:
|
||||
</p>
|
||||
<pre>
|
||||
<?php
|
||||
/**
|
||||
* Implementation of hook_skinr_api().
|
||||
*/
|
||||
function block_skins_skinr_api() {
|
||||
return array(
|
||||
'api' => 1,
|
||||
'path' => drupal_get_path('module', 'block_skins'),
|
||||
'skins' => TRUE,
|
||||
);
|
||||
}</pre>
|
||||
<li>
|
||||
<p>
|
||||
Put your skins in a folder called <code>skins</code> inside your module's
|
||||
folder.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
And that's it! You're ready to use and contribute your module, just like you
|
||||
would a theme. See the Drupal handbook documentation on
|
||||
<a href="http://drupal.org/node/7765">maintaining a project on drupal.org</a>.
|
||||
</p>
|
12
sites/all/modules/skinr/help/overview.html
Normal file
12
sites/all/modules/skinr/help/overview.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<p><a href="http://drupal.org/project/skinr">Skinr's</a> main purpose is to allow the theme to define a set of reusable and modular CSS styles, and to make those styles available in Drupal's UI . Skinr was developed for themers to allow them to tap into the power of Drupal's modularity and apply those same principals to theme development. It does not provide any styles of its own. These styles are defined in the .info file of the theme (or subtheme), by the themer and end up in various places in Drupal's UI, such as:</p>
|
||||
|
||||
<ul>
|
||||
<li>Block Configuration</li>
|
||||
<li>Node Type (and Comment) Configuration</li>
|
||||
<li><a href="http://drupal.org/project/panels">Panel</a> Panes</li>
|
||||
<li><a href="http://drupal.org/project/views">Views</a> Displays</li>
|
||||
</ul>
|
||||
|
||||
<p>One important thing to note is that Skinr is really just a tool. It can be used for different purposes, i.e. a contrib theme, or client theme. Both serve very different purposes and should probably be approached differently with the end user and overall project goals in mind. Using it to its full potential is really up to you.</p>
|
||||
|
||||
<p>If you are looking to implement Skinr on one of your projects, I highly recommend planning it out at the very beginning of the project. Converting an existing theme to use Skinr is generally not recommended if you are under time constraints, UNLESS it is a contributed theme.</p>
|
6
sites/all/modules/skinr/help/rules.html
Normal file
6
sites/all/modules/skinr/help/rules.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<p><a href="/admin/build/skinr/page">Page rules</a> allow you to use Skinr to
|
||||
add body classes to your page(s) based on user role, path, or PHP code, just
|
||||
like block visibility settings. They can be used to do things like: set a
|
||||
container width for grids, define sections of a site, change font size/face,
|
||||
background colors, etc.
|
||||
</p>
|
46
sites/all/modules/skinr/help/skinr.help.ini
Normal file
46
sites/all/modules/skinr/help/skinr.help.ini
Normal file
@@ -0,0 +1,46 @@
|
||||
[overview]
|
||||
title = "Overview"
|
||||
weight = 0
|
||||
|
||||
[syntax]
|
||||
title = "Syntax"
|
||||
weight = 1
|
||||
|
||||
[css-js]
|
||||
title = "CSS, Stylesheets & JavaScript"
|
||||
parent = syntax
|
||||
weight = 1
|
||||
|
||||
[features]
|
||||
title = "Features"
|
||||
parent = syntax
|
||||
weight = 2
|
||||
|
||||
[examples]
|
||||
title = "Examples"
|
||||
parent = syntax
|
||||
weight = 6
|
||||
|
||||
[rules]
|
||||
title = "Page Rules"
|
||||
weight = 2
|
||||
|
||||
[inheritance]
|
||||
title = "Inheriting Skins from Base Themes"
|
||||
weight = 3
|
||||
|
||||
[modules]
|
||||
title = "Providing skins in a module"
|
||||
weight = 4
|
||||
|
||||
[theme]
|
||||
title = "Making Skinr work with your theme"
|
||||
weight = 5
|
||||
|
||||
[contrib-themes]
|
||||
title = "Themes that support Skinr natively"
|
||||
weight = 6
|
||||
|
||||
[contribute]
|
||||
title = "Contribute"
|
||||
weight = 7
|
116
sites/all/modules/skinr/help/syntax.html
Normal file
116
sites/all/modules/skinr/help/syntax.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<p>These are the basic building blocks of a Skin. If you are already familiar
|
||||
with this, you might want to see some quick <a href="topic:skinr/examples">examples</a>.</p>
|
||||
<dl>
|
||||
<dt>
|
||||
<h3 id="syntax-machine-name">Machine Name</h3>
|
||||
</dt>
|
||||
<dd>
|
||||
<p>Each skin begins with the prefix <code>skinr</code> in your .info file.
|
||||
This allows Drupal and Skinr to easily identify and access information
|
||||
about your skins. It will not show up in the UI or in any markup.
|
||||
</p>
|
||||
<pre>skinr[skin_system_name]</pre>
|
||||
</dd>
|
||||
<dt>
|
||||
<h3 id="syntax-title">Title</h3>
|
||||
</dt>
|
||||
<dd>
|
||||
<p>Every skin has one title. This title will appear in the UI as the form
|
||||
element label, so it should be descriptive of what the Skin is/does.
|
||||
</p>
|
||||
<pre>skinr[skin_system_name][title] = Example</pre>
|
||||
</dd>
|
||||
<dt>
|
||||
<h3 id="syntax-description">Description</h3>
|
||||
</dt>
|
||||
<dd>
|
||||
<p>Descriptions are optional, but recommended. They will show in the UI just
|
||||
as regular form item descriptions do. They may contain HTML.
|
||||
</p>
|
||||
<pre>skinr[skin_system_name][description] = This should be a description of my Skin.</pre>
|
||||
</dd>
|
||||
<dt>
|
||||
<h3 id="syntax-type">Type</h3>
|
||||
</dt>
|
||||
<dd>
|
||||
<p>There are 3 different options for displaying your Skinr styles in the UI.
|
||||
These <strong>types</strong> correspond to Drupal's form API widgets. They
|
||||
were created to allow you to better present your skins in the UI and to
|
||||
allow fine-grained control over the options you provide.
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p><em>checkboxes (default)</em> – Can be used for singular or
|
||||
multiple options. Do not use "checkbox" as it will not work. Also
|
||||
note: Skinr applies checkboxes by default, so it's not necessary to
|
||||
specify if that's what you want to use.
|
||||
</p>
|
||||
<pre>skinr[skin_system_name][type] = checkboxes</pre>
|
||||
</li>
|
||||
<li>
|
||||
<p><em>select</em> – Good for presenting many options when only
|
||||
one can be selected. Note: multiple selects are not supported;
|
||||
checkboxes should be used instead.
|
||||
</p>
|
||||
<pre>skinr[skin_system_name][type] = select</pre>
|
||||
</li>
|
||||
<li>
|
||||
<p><em>radios</em> – Can be used for single options.</p>
|
||||
<pre>skinr[skin_system_name][type] = radios</pre>
|
||||
</li>
|
||||
</ol>
|
||||
</dd>
|
||||
<dt>
|
||||
<h3 id="syntax-options">Options</h3>
|
||||
</dt>
|
||||
<dd>
|
||||
<p>After deciding upon a widget type, you'll need to define your
|
||||
options. You'll always need to have at least one option. Each option is
|
||||
keyed, and consists of both a label and a class. The label will appear in
|
||||
the UI and the class is the CSS class(es) you want to use. See <a
|
||||
href="topic:skinr/css">CSS</a> for more information.
|
||||
</p>
|
||||
<h4 id="syntax-options-singular">Singular</h4>
|
||||
<pre>
|
||||
skinr[skin_system_name][options][1][label] = Foo
|
||||
skinr[skin_system_name][options][1][class] = foo-class</pre>
|
||||
<h4 id="syntax-options-multiple">Multiple</h4>
|
||||
<p><em>Note:</em> Skinr will include a <code><none></code> option
|
||||
automatically for skins that have multiple options so the skin can be
|
||||
unselected by the user.</p>
|
||||
<pre>
|
||||
skinr[skin_system_name][options][1][label] = Foo
|
||||
skinr[skin_system_name][options][1][class] = foo-class
|
||||
skinr[skin_system_name][options][2][label] = Bar
|
||||
skinr[skin_system_name][options][2][class] = bar-class</pre>
|
||||
<h4>Adding files</h4>
|
||||
<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.
|
||||
</p>
|
||||
<pre>
|
||||
skinr[skin_system_name][options][1][stylesheets][all][] = foo.css
|
||||
skinr[skin_system_name][options][1][scripts][] = foo.js</pre>
|
||||
</dd>
|
||||
<dt>
|
||||
<h3 id="syntax-groups">Groups</h3>
|
||||
</dt>
|
||||
<dd>
|
||||
<p>Groups allow you to place skins inside a fieldset. This is useful when
|
||||
trying to present a bunch of related Skins. You may also choose to show
|
||||
the fieldset as collapsed by default.
|
||||
</p>
|
||||
<h4 id="syntax-group">Defining a group</h4>
|
||||
<pre>
|
||||
skinr[options][groups][skin_group_name][title] = Example Group
|
||||
skinr[options][groups][skin_group_name][description] = Set font-family and size options.
|
||||
skinr[options][groups][skin_group_name][collapsible] = 1 // Defaults to 1. Options are 1 or 0.
|
||||
skinr[options][groups][skin_group_name][collapsed] = 0 // // Defaults to 0. Options are 1 or 0.
|
||||
</pre>
|
||||
<h4 id="syntax-group-skin">Associating a skin with a group</h4>
|
||||
<pre>
|
||||
skinr[skin_name][title] = Example Skin
|
||||
skinr[skin_name][description] = This should be a description of my Skin.
|
||||
skinr[skin_name][group] = skin_group_name
|
||||
...</pre>
|
||||
</dd>
|
||||
</dl>
|
||||
|
38
sites/all/modules/skinr/help/theme.html
Normal file
38
sites/all/modules/skinr/help/theme.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<p>Skinr creates a variable containing your skins class that you need to print
|
||||
inside your template files. Thankfully this will not be necessary in Drupal 7,
|
||||
but for now you'll need to add the <code>$skinr</code> variable and all the
|
||||
template files you plan to use yourself.
|
||||
</p>
|
||||
|
||||
<h3>Printing the $skinr variable</h3>
|
||||
|
||||
<p>The <code>$skinr</code> variable should be printed in the class attribute of
|
||||
the first, or outer-most <code><div></code> in your theme's template
|
||||
files. The variable is the same no matter which type you are dealing with, but
|
||||
you may need to add template files to your theme. The variable is added by
|
||||
doing:
|
||||
</p>
|
||||
|
||||
<pre><?php print $skinr; ?></pre>
|
||||
|
||||
<p>NOTE: Depending on how your template files are structured, you may need to add a blank space before the variable so it doesn't conflict with other classes you might have:</p>
|
||||
|
||||
<pre><?php print ' '. $skinr; ?></pre>
|
||||
|
||||
<h3>Template files needed in your theme</h3>
|
||||
<p>Here is a list of template files that are typically used and supported by
|
||||
Skinr. See the link for each if you need to create these from scratch in your
|
||||
theme. These links point to Drupal's default code for the template files.
|
||||
You'll be able to copy/paste that code or tpl file to your theme. Then you can
|
||||
add the <code>$skinr</code> variable and modify the code to suit your needs.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://api.drupal.org/api/drupal/modules--system--block.tpl.php/6/source">block.tpl.php</a></li>
|
||||
<li><a href="http://api.drupal.org/api/drupal/modules--node--node.tpl.php/6/source">node.tpl.php</a></li>
|
||||
<li><a href="http://api.drupal.org/api/drupal/modules--comment--comment-wrapper.tpl.php/6/source">comment-wrapper.tpl.php</a></li>
|
||||
<li><a href="http://drupalcode.org/viewvc/drupal/contributions/modules/views/theme/views-view.tpl.php?view=markup">views-view.tpl.php</a></li>
|
||||
<li><a href="http://drupalcode.org/viewvc/drupal/contributions/modules/panels/templates/panels-pane.tpl.php?view=markup">panels-pane.tpl.php</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Note: If you have other template files, i.e. node-blog.tpl.php make sure you print the <code>$skinr</code> variable in them, otherwise it wont work.</p>
|
Reference in New Issue
Block a user