SkinTutorials-Talk

General comments, requests & discussion on the Skin Tutorials.

XES Brainstorm:

I'm thinking 3 phases:

  1. beginner (skinning an easy pre-made CSS template),
  2. intermediate (skinning & customizing a more complicated pre-made CSS responsive template -- picked out a template to adapt already)
  3. advanced (take the blank-slate 1140 "Mobile" skin and actually add a logo, colors, divvy the page into rows, etc. to make a website -- so this will tackle some css work).
    • Example: http://bte18.com (that's the 1140 mobile skin + tweaks - responsive so play with browser widths). There's a PTV to define which image to use on each page + the image credits. Images are from Flickr's creative commons BY attribution only -- I can add in a tip about that too. I found panoramic golf course views, cropped to the size and ratio I wanted in an image editor.
    • I do have to find a great responsive drop-down menu though. Still working on that. http://myindependentliving.org has a KINDA responsive drop-down, but I know I could do better with some work.

Tips to include:

  • hint on how to pick colors for a palette so you don't have to "be a designer" to design something that looks nice.
  • Note: the wonderful Web 3.0 trend towards white backgrounds
  • Google font libraries. That's an easy CSS statement or two, and since Google provides the CSS statements it's just cut & paste + assigning the font to the whole "body" and you don't have to rely on boring same-old "browser-safe" fonts.
  • Using "View Source" on an HTML page to see how it works. If I see a feature I like on a website, I'll peek at the code -- sometimes it's a plug-in and the name is right there in the source code for further seeking online...

There are other Skin Jockeys who do more advanced stuff than I do -- I don't do JS, AJAX, etc. It would be great if they contributed! I like keeping things simple and content-focused.


How about additional resources -- both in-wiki (Template markup, debugging, etc.) and out (CSS, HTML, JS references) ?

Reminder to check the cookbook for an existing recipe, or the mailing list, before you reinventing the wheel.

Look at an existing skin that you like, copy it, and play around.

Michael Paulukonis February 10, 2014, at 08:34 AM

I don't think there's anyone actually giving step-by-steps on creating Skins. The guidelines page gives a bunch of lumps of code and best practices, but don't TEACH how to make a skin out of a pre-existing design. I plan to do a 1-2-3 style tutorial with an already-existing HTML/CSS design and how to change it over to a PmWiki skin, aimed at PmWiki admins/authors and code developers, not designers, although I'm sure designers who are new to PmWiki and use Photoshop/Dreamweaver/Illustrator and any other design software that outputs raw HTML/CSS will also find it useful to take their design and change it into a skin. Thanks for reminders and such. Oh, I just added the !PmWikiDeveloper tag to a bunch of pages, too -- yes, that's advanced although PageVariables and the like is appropriate and I'll probably include a mention of some of them such as {$WikiTitle} {$Description} and such. But even more-so on the skin template end of things in using variables in the skin. Thanks!! XES February 10, 2014, at 10:44 AM

Any updates to add to this?

PmWiki has such awesome potential, but lacks so many of the resources that something like WordPress has.

MichaelPaulukonis June 02, 2015, at 09:03 AM