first import

This commit is contained in:
Bachir Soussi Chiadmi
2015-04-08 11:40:19 +02:00
commit 1bc61b12ad
8435 changed files with 1582817 additions and 0 deletions

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

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

View 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 &amp; 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 &amp; 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>

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

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

View 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>
&lt;?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>

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

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

View 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

View 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> &ndash; 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> &ndash; 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> &ndash; 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>&lt;none&gt;</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>

View 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>&lt;div&gt;</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>&lt;?php print $skinr; ?&gt;</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>&lt;?php print ' '. $skinr; ?&gt;</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>