version=pmwiki-2.2.44 ordered=1 urlencoded=1
author=Petko
charset=UTF-8
csum=
name=PmWiki.Skins
rev=116
targets=PmWiki.Skins,Cookbook.Cookbook,PmWiki.SkinTemplates,Cookbook.Standalone,Cookbook.InstallOnIIS,Site.EditQuickReference
text=(:Summary: Change the look and feel of part or all of PmWiki:)(:Audience: administrators (basic) :)%0a(:div class='rfloat frame' style="font-size:smaller; clear:right;" :)%0a!! Contents%0a* [[#what | What is a skin?]]%0a* [[#where | Where do I get skins?]]%0a* [[#use | How do I use a skin?]]%0a* [[#modify | How can I modify an existing skin?]]%0a* [[#make | How can I make a skin?]]%0a(:divend:)%0a!!What's a skin? [[#what]]%0a%0aA skin changes the look and feel of a PmWiki page, Group of pages, or the entire wiki.%0aTo see this try some skins out using the links below.%0a %0a* [[PmWiki:Skins?skin=beeblebrox-gila2  | BeeblebroxNetGila ]]%0a* [[PmWiki:Skins?skin=jhskin | JHSkin ]]%0a* [[PmWiki:Skins?skin=gemini | Gemini ]]%0a* [[PmWiki:Skins?skin=light | Light ]]%0a* [[PmWiki:Skins?skin=monobook | Monobook ]]%0a* [[PmWiki:Skins?skin=simple | Simple ]]%0a* [[PmWiki:Skins?skin= | PmWiki (default) ]]%0a%0aAs you see, all skins show the same page contents, but the other elements such as the sidebar, header, and footer, have changed.  %0aFor example, different skins may display the sidebar on the left, on the right, or even not at all.  %0aSome skins have action links and features that others do not, especially if they were designed to take advantage of particular [[cookbook recipes -> Cookbook:Cookbook]].%0a%0aSo, a skin is just the set of files that determine how pages are displayed in PmWiki.  Skins are stored as subfolders of ''pub/skins/''.  For example you might create the ''example'' skin in ''pub/skins/example/''. Each skin typically has one or more of the following kinds of files:%0a* A template file, such as ''skin.tmpl'' or ''example.tmpl''.  The template is written in HTML or XHTML, and is the skeleton for the skin.  It contains special markers that tell PmWiki where to insert the page's contents.%0a* CSS stylesheet files, which can control the skin's appearance, such as ''pmwiki.css'' or ''example.css''.%0a* Image files, for decorating a page with images.%0a* PHP files, such as ''skin.php'' or ''example.php''.  These let skins provide extra customization setting or capabilities that HTML and CSS alone cannot.%0a* Documentation files for the administrator, usually with names like ''readme.txt'', ''install.txt'' or ''skinname.txt''.  These usually give you information about any special installation steps or nifty features the skin has.%0a%0a!! Where do I get skins? [[#where]]%0a%0aSkins are available in the [[http://www.pmwiki.org/wiki/Skins/Skins|Skins]] collection.  %0aThe skins in the collection have been contributed by many PmWiki administrators for all to use, and typically have their own set of customization possibilities.  %0aWhen you find a skin you like, follow the link to download the skin package.%0aYou can also [[{$FullName}#make|make your own]] skin.%0a%0a!! How do I use or install a skin? [[#use]]%0a%0aMost skin packages are .zip, .tgz, or .tar.gz files.  You should be able to unpack these with most archiving software.%0a%0a# Unpack the skin to ''pub/skins/'' inside your pmwiki folder.  Most well-designed skin packages will create a subfolder in ''pub/skins/'' named after the skin.%0a** If the skin did not make a folder of its own, create one and move the skin files to it.%0a%0a# Open up your ''local/config.php'' file, and add a line like%0a-> [@$Skin = 'example';@]%0awhere ''example'' is the name of the skin's folder.%0a%0aReload a page from your wiki in the browser, and you should be able to see the difference.%0a%0aIf you'd like to let your site's visitors choose one skin from a selection of skins you've installed, look at the [[http://www.pmwiki.org/wiki/Skins/SkinChange|Skin Change]] recipe.  (That's what we used for the demo above.)%0a%0a!! How can I modify an existing skin? [[#modify]] [[#further]]%0a%0aThere are a number of ways to further customize the appearance of a skin, including %0a* adding statements to /local/config.php that are compatible with your chosen skin; %0a* adding css files to /pub/css/, such as local.css (for your entire wiki) and MyGroup.css (for MyGroup); and %0a* directly editing the skin's files. %0aIf the skin is updated regularly, you probably will want to avoid editing the files in the skin's folder. %0aCheck the skin's page in the Cookbook for specific suggestions.%0a%0aIf you want to modify the default pmwiki or print skins included with the PmWiki distribution, you should copy the pub/skins/pmwiki/ and pub/skins/print/ directories to another name and then use those skins instead of the default ones.  While the name of the skin.tmpl and skin.css files don't usually matter, the optional skin.php file MUST match the name of the skin.%0a%0a!! How can I make a skin? [[#make]]%0a%0aThe best way to make your first skin is to modify a copy of PmWiki's default skin.  %0a%0a# Make a copy of the folder ''pub/skins/pmwiki'' and name it whatever your new skin should be named.%0a# In your ''local/config.php'' file, set $Skin to be the name of your new skin.%0a# Modify the template and CSS files to suit you.%0a# Test your new skin.%0a# Repeat steps 3 and 4 until you're happy with the results.%0a%0aThe reason we recommend starting with the default PmWiki skin is that it's quite a simple skin, much more so than many of the skins you'll find in [[http://www.pmwiki.org/wiki/Skins/Skins|Skins]].  The starting point is the template (.tmpl) file, which provides the overall layout of the page.  Inside of the template file are a number of special substitutions and directives that provide places for PmWiki to insert the data relevant to the current page being displayed.  [[Skin Templates]] describes the format and directives in more detail.  There are also [[http://www.pmwiki.org/wiki/Skins/SkinGuidelines|skin guidelines]] available on pmwiki.org.%0a%0aIt's beyond the scope of this page to explain how to write HTML (hypertext markup language), XHTML (extensible HTML, which is a bit newer) or CSS (cascading style sheets), but there are many good tutorials on the web for all three of them.  One caution: if you run into an HTML tutorial that explains about how to use %3cfont> or %3cblink> tags, or spacer gifs, it's at least five years out of date, so skip it and find another one.  %0a%0aYou should test your skin on a variety of browsers -- ideally as many as you can, on as many different platforms as you can -- but at minimum you should be testing on Internet Explorer 8, Firefox 3, and Chrome, since those are the most common, and have different bugs, it is also useful to test on Opera and Safari.  Don't forget to do things like resize windows and change text size during your testing.%0a%0a!! Print Skins%0aBy default your new skin will use the standard /pub/skins/print/ skin. %0a%0aTo over-ride this add the following to local/config.php:%0a%0a->[@$ActionSkin['print'] = 'yourprintskin';@]%0a%0aThis says to use 'yourprintskin' for ?action=print instead of the default.%0a%0a!!! Tools that you'll need%0a%0aThere are good examples of all these programs available for free.  %0a%0a'''HTML and CSS editor(s).''' There are two types of editors: graphical (WYSIWYG, or "what you see is what you get"), and hand-coding or programmer's editors.  Graphical editors are less intimidating to novices, but you won't learn as much, or know your code as intimately as you will by using a hand-coding editor.  Whichever you choose, get one that has syntax highlighting for the code, because it will help you spot mistakes.  Also, live preview features are not that helpful when writing a PmWiki skin, because PmWiki does stuff that the live preview won't, such as substitute values for variables and insert sidebar content.%0a%0a'''Test wiki'''.  You don't want to be wreaking havoc on your skin while visitors can see your site.  It's a better idea to set up a test wiki, either on your real webserver or on your own machine.  Linux or [=MacOS=] computer owners may have webservers and PHP already running on their machines, but Windows users often don't.  If that describes you, then you might want to take a look at the [[Cookbook:Standalone]] recipe, which runs PmWiki without needing a complex webserver, or [[Cookbook:InstallOnIIS]].  Or, you can find many local server packages which install a webserver, PHP, and other stuff (e.g. `MySQL), all configured to work together.  Try to get a package that has the same software and versions as used on your live setup, since then there will be less to go wrong when the site goes live.%0a%0a'''FTP client''' to transfer files to your webserver.  You probably had one of these already.%0a%0a'''Color picker'''.  Your editor might include one, or you could pick up a standalone application.  Extremely helpful for creating and saving color palettes.%0a%0a!! See also%0a(:pagelist fmt=#titlesummary order=name name=PmWiki/SkinTemplates,PmWiki/Installation :)%0a* [[http://www.pmwiki.org/wiki/Skins/Skins|Skins]]%0a* [[http://www.pmwiki.org/wiki/Skins/SkinGuidelines|Skin Guidelines]]%0a* [[Cookbook:Standalone]]%0a%0a%0a>>faq%3c%3c [[#faq]]%0a%0aQ: How do I change the Wiki's default name in the upper left corner of the Main Page?%0a%0aA: Put the following config.php%0a%0a->[@$WikiTitle = 'My Wiki Site';@]%0a%0aThe ''docs/sample-config.php'' file has an example of changing the title.%0a%0a%0aQ: How can I embed PmWiki pages inside a web page?%0a%0aA: Source them through a PHP page, or place them in a frame.%0a%0a%0aQ: How do I change the font or background color of the hints block on the Edit Page?%0a%0aA: Add a CSS style to pub/css/local.css: [@.quickref {background:...; color:... }@]. The hints are provided by the [[Site.EditQuickReference]] page, which is in the PmWiki or Site wikigroup.  Edit that page, and change the "bgcolor" or specify the font "color" to get the contrast you need.
time=1354478836
