Help us test the next version of Skinr!

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Jacine's picture

Over the past few months we've been hard at work on a new version of Skinr. I'm writing to tell you about the awesome new features, and to request your help in testing them so we can iron out any bugs and release!


First things first.

There are lots of changes in the new version. Backup your entire site before doing anything. It is strongly recommended that you do NOT use this on production sites at this point.

Installation

Download the following modules:

  1. jQuery UI - 6.x-1.3: You'll need to download jQuery UI manually. At the time of this writing the latest version is 1.7.2, which you can download here. After downloading: unzip, rename the directory to jquery.ui, and place it inside the jquery_ui directory. Make sure you do this before attempting to enable the modules.
  2. jQuery Update - 6.x-2.x-dev. This gives you jQuery 1.3.2.
  3. Skinr - 6.x-2.x-dev or DRUPAL-6--2 in CVS.
  4. Dialog API - 6.x-1.x-dev

What's new?

Modal Skin Configuration

With the help of the jQuery UI, Dialog API module, and Contextual Links (Drupal 7 module), we've implemented a pretty cool way to edit Skinr settings.

Each Skinr-enabled element contains a "cog" icon that triggers a link to edit the current skin. Clicking that link opens a jQuery UI Dialog containing the Skinr settings form. It can be moved, resized, and changes are immediately applied on save without having to reload the page.

Page Rules

Page rules allow you to use Skinr to add body classes to your page(s) based on user role, path, or PHP code, just like the 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.

If you've used the CSS Injector module, you'll notice the UI is very similar. That's no mistake. The idea was shamelessly stolen :D

Improved "features" functionality

Skins can now target more specific subsets of hooks. Instead of restricting a skin to just block, you can specifically target the module name:

skinr[skin_name][features][] = block_menu
skinr[skin_name][features][] = block_menu_block

See this issue or the documentation for details.

Ability to add JavaScript/CSS files per option

Files can now be specified on a per option basis. This is detailed in the documentation, and shown in the packaging example below.

Package-able Skins

You no longer need to define all of your skins in your theme's .info file. Skins can now live in their own directories (think micro-themes), and can be shared across a multisite installation. An example of what this looks like is as follows:

Directory Structure:

sites/all/skins/dropdown
sites/all/skins/dropdown/dropdown.info
sites/all/skins/dropdown/css
sites/all/skins/dropdown/js

Note: This works just like regular modules and themes do: sites/all/skins, sites/x/skins and sites/x/themes/x/skins are acceptable locations for packaged skins to reside.

dropdown.info:

name = Dropdown Menus
core = 6.x
version = 1
description = This style will apply Dropdown menu styles to blocks containing menus. Choose either vertical or horizontal style.

skinr[dropdowns][title] = Dropdown Menus
skinr[dropdowns][type] = select
skinr[dropdowns][description] = Select a vertical or horizontal dropdown menu.
skinr[dropdowns][features][] = block_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

The .info syntax remains the same, but this allows you to remove some cruft from .info files and easily share them across sites and with the Drupal community!

Administration Listing

In addition to the recently added Import/Export functionality, Skinr now contains a quick listing of where Skinr is in use on your site, with links to edit and delete the skins settings.

Documentation

Documentation is now available in the module thanks to the awesome Advanced Help module. It contains fully updated documentation, so please check it out as opposed to visiting the docs from the project page, as those are only applicable to the 6.x-1.x version.

Skinr & Skinr UI

Skinr has been split into 2 modules: Skinr and Skinr UI. The idea is that once you are done configuring skins for a site, disabling Skinr UI will eliminate some of the UI cruft that is no longer needed.

Storage

In the first version of Skinr, the data was stored in the variables table. Each theme had it's own variable called skinr_themename where all the data was stored. The new version creates two of it's own database tables: skinr & skinr_rules.

So, that's it... and now we need your help to test it all out!

Please jump in wherever you think you can help with (feedback, bug reports, patches, etc). Here are the open issues for the new version:

http://drupal.org/project/issues/search/skinr?status[]=1&status[]=13&status[]=8&status[]=14&status[]=15&version[]=687722

Comments

Nice writeup and great work

ChrisBryant's picture

Nice writeup and great work on this!! Going to be testing and playing with this further soon!

Thanks for all your good work on moving this forward. :-)

Wow!

mlncn's picture

Very impressive. Love the usability improvements front-end, back-end, and in between too!

benjamin, agaric

Yum Yum!

marcrobinsone's picture

Count me in. This is definitely something nice to play with for a relaxing week-end.

I'm excited to hear about the new db tables!

Keep up the good work :) We love Skinr!

great stuff

chichiMi5's picture

liking the UI improvements, will test away and report some bugs. Thanks for the great effort.

Zach Harkey's picture

Each Skinr-enabled element contains a "cog" icon that triggers a link to edit the current skin. Clicking that link opens a jQuery UI Dialog containing the Skinr settings form. It can be moved, resized, and changes are immediately applied on save without having to reload the page.

The new skinr "cog" is awesome. Is there any reason we can't expand its scope to act as more of a generalized contextual admin menu? It seems like such a shame to limit such a slick and discreet admin to just: Edit skin.

Here is a before and after mockup of the cog as an expanded contextual-admin menu as it might appear within a Story node teaser view.

Only local images are allowed.

What do you guys think?

P.S. I created a Skinr issue: Cog as ultimate contextual admin menu if you would prefer to discuss it there.

This is a really good UI

nscad_nathan's picture

This is a really good UI improvement. I hope it gets implemented!

I'm just getting into Skinr

spangaroo's picture

I'm just getting into Skinr and really like what it is offering. I'm testing the 6.x-2.x-dev version on my sandbox. One question though, when I create and position a block using Context UI, the Skinr settings wheel doesn't show up.

Are Skinr blocks editable if placed with Context UI?

I only ask because I prefer Context UI to Panels, but will stick with Panels if that's the way that Skinr works best.

nscad_nathan's picture

No Skinr 2.x <3 for me...

http://drupal.org/node/856768#comment-3230202 bug posted. Had to roll back to 1.x

additional dependency: ctools

kay_v's picture

really nice! looking forward to seeing how things grow from here!

small note: worth adding ctools to the module dependency list

thanks for all the great work!

ownsourcing.com - strategy, training, documentation

Unable to get Skinr 6.x-2.x-dev (2010-Ott-22) working

fedbccer's picture

Hello guys, i'm new to the Drupal community so I would like to ask:

Where is the best place to post the description of the problem I'm facing with Skinr 2 (Error 404 when click "Edit skin") and trying to get some support?

(I can open an Issue but probably is not a Skinr problem, may be I did something wrong in the installation)

The issue queue

bonobo's picture

The issue queue is probably the best place to start.

Include info about your version of Skinr, other modules on your site, your PHP version, your Drupal version, and your OS, and your browser.

Dialog Not Working

R-H's picture

Am I suppose to see the Skinr option in a dialog when I click on the cog? If so, I am not.

If you are using a theme that

ChrisBryant's picture

If you are using a theme that provides skins (skinr doesn't provide any default skins) and you have those skins enabled in the skinr admin page then yes, you should see Skinr options in the dialog when clicking on the cog.

Skins are disabled by default and if you don't enable them in the admin, then you won't have any skinr options in the cog. This may vary depending on the version of skinr you are using.

Feel free to post in the Skinr issue queue with any support requests or issues you may have.

I'm confused which isn't hard

businsky's picture

I just installed this for Drupal 7 and I am new to drupal. I'm not clear on exactly what Skinr does. I'm not sure if it's something still under development and I'm not seeing it or what. I do have it enabled for Drupal 7 however the only thing I see in my Cog is "edit skin" and that doesn't appear to have any options aside from the name.

Then my question is: Does Skinr have a UI that allows you to build the new skin, or is it just an interface that brings in skins that are created, downloaded or whatever?

Again, this could just be that it's still under dev, but having never used it before I'm a little confused. Thanks for your feedback.

There is a patch for Skinr

Hari's picture

There is a patch for Skinr that will help you to create/build skins. Get it here. Skinr.org has documentation for Skinr that might help you. Skinr doesn't provide any skins itself which is why when you select edit skin you aren't seeing anything.

What is the status of 6.x-2.x dev?

davemaxg's picture

In looking at the project page it looks like all recent effort is going into the 7.x version. I also see warnings about using 2.x on a production site.

Can anyone tell me if 6.x-2.x is stable and worth looking into? I'm stuck on 6.x due to some modules not available yet for 7.x

Thanks,
dmg

Skinr

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week