The idea of a "skin" is quite new to me, I am a css/php themer and so far using Zen theme and all theme settings were hardcoded using files. I have read the documentation on this site, but still have no idea where to start in practice. My site has installed Fusion Lite theme as the default and installed Fusion Accelerator module.

I have read someone's post with a screenshot. The vertical tab title is "Apply skins node settings" and it seems that this should be visible on the Appearance admin page. I would like to open this page. But on my site I when am on path http://mydomain.local/#overlay=admin/appearance/settings/fusion_starter_lite there is no such thing. Perhaps this is the place where everything is defined? I am logged in as admin Id=1. Here is a screenshot from my site:
http://img109.imageshack.us/img109/4580/fusionxi.png

For starters, I'd like to create a very simple skin. The skin would have only one option - to choose the html list style. In my understanding, it should create a user interface where the user can choose from e.g. "disc" and "circle" or "dash", instead of relying on the themer to do it directly in CSS. Is this posisble to achieve using Fusion Accelerator and what are the steps?

[My guess is that the themer should write some function similar to this fusion_core_fusion_apply_skin_core_info() given as an example, but where to put this function, from where to call it and how to create the interface for the user to choose the list style? and how the user will access this interface? ]

Comments

sheena_d’s picture

Title: I don't know where to start to define a skin » Fusion Accelerator Documentation is Insufficent
Component: Miscellaneous » Documentation
Assigned: Unassigned » esmerel
Category: support » task
Status: Active » Needs work

The Skins need to be defined within your theme using the code that is described on the documentation page that you linked to. However, that documentation does not describe where to save this code, which we will need to update.

Basically, you will create a folder in your sub-theme called "skins" and then a sub-folder with whatever name you want to call your set of skins. So, you will place your skin-related files in my_theme/skins/my_skins. You will need a minimum of two files; my-skins.inc and my-skins.css. The code described on the documentation page you linked to is placed into my-skins.inc and your CSS styles are placed into my-skins.css. You may want to use the Skins folders/files in Fusion Core as an example as you are building your custom skins.

There is a little bit more information on this and some guidelines for creating good skins here: http://drupal.org/node/1366618

The screenshot that you linked to above shows an "Edit Skins" page. This is the page you see when you are actually editing the skin that is applied to a node, block, view, etc. To view this screen (and test whether your skins are working) you can go to the blocks administration page (admin/structure/blocks) and click "edit skins" next to any of the blocks listed on that page. You will see the skin options that are available with Fusion Core and any additional options you may have successfully created.

I hope this helps you get started. Let us know if you run into any other problems so we can further improve our documentation.

sheena_d’s picture

@esmerel - basically, we need to go into a little more detail in the FDT.com documentation about how to begin building skins, what different files are needed, and more detailed descriptions of the different parts of the skin definition function. Basing this on the info found at http://fusiondrupalthemes.com/support/theme-developers/using-skins. If there is another page with more of this info on it, I was not able to easily find it.

Rough outline:

Getting Started:
- add necessary lines to theme/module's .info file if not using a fusion starter

fusion[api] = 2
fusion[directory] = skins

- create a skins/my-skins folder
- create my-skins.inc

Here, I would probably link to a secondary "more details" page (the page I linked to above is getting a bit huge).

Defining Skins
- Example skin Function
- "Type: options
-- Select
-- Radios
-- Checkboxes
- Group Options
-- general
-- layout
-- box
-- Custom (link to 'how to create custom groups')
- Theme Hook Options - if you specify no theme hooks, the skin will be available to all.
-- node
-- block
-- views_view
-- panels_pane
-- panels_panel
-- panels_display
-- region
-- page
- Default status
-- TRUE = skins are available for use by all themes by default
-- FALSE = skins must be enabled per-theme at admin/appearance/fusion/skins

Attaching files
Some skins may require special JS or CSS, you can attach those files conditionally. (Ask me for an example when you get to this).

Custom Groups
How to create custom Skin groups (Ask me for an example when you get to this).

Enabling Skins
- Go through steps to enable skins, or link to page that already does this
- Creating Page and Region rules
- Disabling/Deleting Skin configurations (at admin/appearance/fusion).
- Exporting/Importing Skin configurations

Troubleshooting Skins
- Check permissions for Fusion Apply UI
- Check syntax and naming conventions in .inc file
- Check syntax and specificity of CSS
- [I will need to come up with some other common problems]

esmerel’s picture

Yup, you're right, there's not much more than the one page we have already, and there's a lot more that could be documented. I'll add it to the list of things what need doing :)

esmerel’s picture

Status: Needs work » Active

Some thoughts - maybe we should replace http://fusiondrupalthemes.com/support/theme-developers/using-skins/creat... with your 'getting started'. Then we can link it to the 'creating styles/skins' page, along with all of the other stuff you've got in the list there. I think that may make more sense. There's enough there that I'm starting to be a little concerned that it's going to need it's own category

esmerel’s picture

http://fusiondrupalthemes.com/support/theme-developers/using-skins/skin-... is now published. I'm sure parts of it could use a little more fleshing out (like using the rules section), but there's something there now!

Still to-do
Attaching files
Some skins may require special JS or CSS, you can attach those files conditionally.

Custom Groups
How to create custom Skin groups .

Troubleshooting skins

(why don't I save issues when I add info?!)

esmerel’s picture

esmerel’s picture

http://fusiondrupalthemes.com/support/theme-developers/using-skins/troub... - this could use a little more fleshing out in the troubleshooting section.

That leaves custom groups!

esmerel’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

lolmaus’s picture

Status: Closed (fixed) » Active

The documentation pages have been created, but how do i access those pages from the documentation? There are no links to them, and they aren't listed in the TOC.

lolmaus’s picture

Issue summary: View changes

edit