Simpla < Skins > SimpleTab   (talk? | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

Simple Skin for PmWiki

If you like simplicity, the Simple Skin is for you. There is no fixed sidebar that takes up valuable space. Instead, the sidebar is accessible through a popup menu. The available menu is also kept to the absolute minimum. It is simple, but no simpler.

Now you can choose a header background color by setting the $SkinTone variable to one of the supported colors.

Files

  • simplealt.tgzΔ or simplealt.zipΔ (September 12, 2006)
    Contains fixes for the following bugs:
    • "Preview" acts like "Save", edit buttons missing (PmWiki 2.1)
    • uses Main.SideBar (now uses Site.SideBar)
    • uses Main.SearchWiki (now uses Site.Search)
    • horizontal text alignment problem
    • popup menu gap problem
    • uses $Action global variable (now uses $ActionTitle)
    • popup menu shifts when forcing font size
  • simple.tgzΔ or simple.zipΔ (updated on September 14, 2005)
  • Use this empty page icon imageΔ to get an even cleaner look

Installation

  • Unpack the tarball in the skins directory:
    $ cd pub/skins
    $ tar xvfz simple-timestamp.tgz
  • Edit local/config.php appropriately:
    $Skin = 'simple';
    $SkinTone = 'Classic';
    $EnableMenuBar = TRUE;
    $PageLogoUrl = 'topdirectory/pub/skins/simple/image/Icon.jpg';
    $SkinCopyright = 'Contents Copyright © Acme, Inc. — All Rights Reserved';
  • Use any image of the size 64 x 64 pixels as a page icon.
  • Set $SkinTone to one of: Classic or Black, Brown, Orange, Red, Purple, Blue, and Green. Please note that these names are case sensitive. If a color is not specified, it will default to Classic or Black.
  • Use a single level (flat) list for the sidebar (popup menu). For example, it could look like this:
    * [[ Main/HomePage | $WikiTitle Home ]]                 
    * [[ Main/SideBar?action=edit | Edit Website Menu ]]    
    * [[ Main/HomePage?action=logout | Log Out {$AuthId} ]] 

Author

Other Contributions

Changes

  • September 14, 2005:
    • Fixed the issue with realm authentication required when logging out.
    • Updated menubar color scheme.
  • July 14, 2005: Added FarmD in the inclusion of author.php.
  • July 8, 2005:
    • Fixed the issue with editor width in Safari by setting it to 100% and using the monospace font. This fix works well with other browsers as well since the text area will simply fill the entire width of the application area.
    • Added the blank page icon into the image directory.
  • June 27, 2005:
    • Added the SkinTone feature. You can now select a background color, other than black, for the header. Supported colors are: Classic or Black, Brown, Orange, Red, Purple, Blue, and Green (case sensitive).
  • June 21, 2005:
    • Replaced the "GNU..." license text with the instruction on how to set site-specific copyright notice.
    • Added the directive that allows the injection of additional stylesheets.
  • May 28, 2005: Added a popup menu to replace the sidebar.
  • May 27, 2005: Fixed a bug that caused the main contents box not to show its borders in the UNIX versions of Firefox.

Websites Using Simple Skin

Frequently Asked Questions

  • I have a hard time getting the menubar to show up. Can you give me the instructions on how to get it running?
    • Sure. Follow the steps below.

Edit local/config.php and include the following line:

    $EnableMenuBar = TRUE;

Point your browser to the following URL:

    http://<your-host>/<path-to-pmwiki-root>/pmwiki.php?n=Main.SideBar&action=edit 

and then replace what you see in the editor window with the following:

    * [[ Main/HomePage | $WikiTitle Home ]]                 
    * [[ Main/SideBar?action=edit | Edit Website Menu ]]    
    * [[ Main/HomePage?action=logout | Log Out {$AuthId} ]] 

Note that there should be no space character before the asterisk ('*') characters in the example above. Save the change, and that's it, you should see the menubar activated.

  • With PmWiki 2.1, "Preview" acts like "Save" (see also: PITS #704), and the edit buttons are missing.
    • WORKAROUND: edit simple.php and delete lines 106 - 170
      (first line is "$PageEditFmt = <<< EOT", last line is "EOT;"),
      this will restore the original PmWiki edit form.

Comments and Feedback

  • Please place your comments and feedback as bullet items in this section.
  • Great skin!!!! I'm wondering (and I'm a php newbie) if the popup menu could be modified to permit nesting a second layer menu. So like one item in the menu would be "Team Member's Pages >>" and when you mouseover it, out pops a second-layer menu with "Fred's page", "Mike's page", etc. Email reply to billATtechnicalwrites.com would be appreciated.
  • I like this a lot -- many wikis are way too complicated for beginning contributors. I have made a few modifications following suggestions here. One thing escapes me -- the popup Website menu doesn't -- it is is
  • This skin is wonderful, the best one I have used yet..so fresh and so clean. But I (still a beginner) am experiencing the same problem as above where the popdown part of the menu is not popping down when you roll mouse over it. Does anyone have any solutions?-Allan(heritagemoments@gmail.com)
  • Nice skin, but I can't seem to get the skin tone to change. I have it set to Blue in local/config.php, but no change. I have a standard simple look to it no matter which tone I select. --Brad
  • Great great great. I'm using SimpleSkin now, and I like it very much. However, the 'change summary' edit box is no longer available when editing a page. Is this a known problem? --Floris
  • I like it, and will use it. However, I will use it only on a Group of pages, and so would not like to include the Menu-bar. Rather, I would only like to have "Edit Page" and "Printable View" in the header. Is this possible? If so, how can I accomplish this? Please e-mail me at hgpuke(at)gmail(dot)com. Also, I notice that you have some nice looking row of editing icons on this site. How can I get them on mine? Hans-Göran Puke :: 27 June 2005
    • Hans, I just sent you an email with the instructions on how to accomplish the above. -- Julian I. Kamil
      • Julian, you wouldn't mind posting that information here on the wiki? I'm also intrested in accomplishing that - John :: 8 October 2005
  • Looks nice Jacob :: 13 June 2005
  • If you would like to edit this page, and do not see the "Edit Page" links, simply append ?action=edit at the end of the URL in the address bar. -- Julian I. Kamil
  • The nicest skin of all!! We all love it. One question: In the second line of the header to each page name the word "spaced" is added. E.g., my start page is titled as "Main » Home Pagespaced" - kind regards from Zurich, Peter
    • Thanks, Peter, I am glad you like it! It's odd that you get the word "spaced" appended. They appear because in simple.tmpl I use the variable $Titlespaced which in my setup gets expanded to the title of the page with spaces separating the words. You can edit this file and see if you can remove it by using $Title instead. -- Julian I. Kamil
      • Thanks Julian for the quick reply. I've changed the simple.tmpl, but nothing happened. After doing the same in simple.php the "bug" (big word for this small thing) was fixed. Thanks again & greetings from Zurich! Peter
    • Peter is probably using a version of PmWiki older than 2.0.beta15, which was the release that introduced $Titlespaced. (Wonderful skin, by the way.) -Hagan
  • Wonderful skin! Thank for creating (and sharing) it. Any way to add the "save and edit" functionality in the Edit form? Best, Brent
    • Thanks, Brent. I will add that field in the next release. -- Julian I. Kamil
  • Nice skin! (a strange thing to say to someone i don't know...). I had problems with the upload 'button' on the menu and i changed code in simple.php to:
    if ($`EnableUpload == 1) {
        $SkinUploadLink = 
            "<a href='$`ScriptUrl?n=$pagename?action=upload' 
            title='Upload a file'
            rel='nofollow' >Upload</a>";
    }
  • The problem is in the missing ?n=$pagename. BTW how can i have several paragraphs as one bullet item...???
    • Hi stranger, thanks! :-) I think the subject of paragraph continuation in bullets is still being discussed in the mailing list--I don't know the answer myself. It's odd that you have to make the modification above, since the Upload link works fine in my system as is. What version of PmWiki are you using? -- Julian I. Kamil
    • I experimented with some markups, and was able to convert your comment above into a bullet with multiple paragraphs. What I still can't figure out is how to preserve the formatting of the code, much like HTML <pre>...</pre> markup. -- Julian I. Kamil
  • Very nice looking skin. I'm playing with it on a few sites. I noticed today that the tmpl file does not by default support group sidebar menus. I learned how to make the change myself on the SideBarSpecial page and made the change in my copy. It seems to work. -- PhilYanov
  • There seems to be a problem with the Website Menu in IE on Macintosh. Is there any way to fix this? It works great in all other platform/browser combos I've tried. Thanks. -- Kurtis Scaletta
    • Kurtis, I'm using 10.3.9 with IE 5.2 and noticed the same issue. Unfortunately, since Microsoft does not seem to be interested in advancing IE capabilities on the Mac I would have to be very hard pressed to try to debug and fix this issue. I would definitely recommend that you use either Safari or Camino with this skin since they also work really well with other web applications and abandon IE for the moment until a better version arrives. -- Julian I. Kamil
  • very clean design. bugs with cookbook page editors, like PostItNotes or SectionEditJuytter?
    • I reported this to the author awhile ago. My temporary fix waas to simply remove the section from "$PageEditFmt = <<< EOT" to "EOT;" in the simple.php file. This will re-activate the default PmWiki editing form and handles the problem. --ksc
    • For now you could follow ksc's suggestion above. I will fix this issue in the next release. -- Julian I. Kamil
    • I can't get this workaround to work. It always returns an error (Parse error: parse error, unexpected '<'). I did replace "$PageEditFmt = <<< EOT" with "EOT;" - thomas
      • Thomas, you need to get rid of the whole thing completely, including the "EOT;". -- Julian I. Kamil
        • Still, get an error "Parse error: parse error, unexpected '<' " - thomas
  • I have the same problem with SectionEdit also. My solution was to not use it even though it was a cool feature. Beleive the bug to be in the this skin because it does work with monobook, pmwiki default, lean, fixflow. So I know it is not an apache thing or other configuation item.
    • Signed: Navet October 21, 2005, at 12:48 PM
  • Hmmm. I followed the instructions exactly but I still can't get the menubar to work. I would love this skin if only the menu bar worked better! (I notice it is disabled for this page. To edit this page type ?action=edit after the url.)
  • I know it goes against the grain of the skin, but I put together a nice looking sidebar for SimpleSkin. A screenshotΔ and the codeΔ, with no attributions, just some raw modifications. Do with it as you wish, my changes are public domain.

    There's two minor gotchas with the bar. First, it seems to add a little padding to the right of the sidebar text. Remove the search box and you'll see what I mean. I think this is due to some oddity in pmwiki's text generation but am not certain yet. Second, the bar for some reason forces the edit box down below -- is there a clearing functionality I'm missing?

    The bar does have one nice feature I rather wish SimpleSkin would also have: it can expand to be as large or small in width as necessary. SimpleSkin is locked to a certain width, which looks stylish, but I's prefer a wiki which expands (or shrinks!) to fill the window size I set it to. To change SimpleSkin to do this, you'd need to change its top/middle/bottom arrangement of pics to a topleft/topmiddle/topright/middleleft/middleright/bottomleft/bottommiddle/bottomright array of pics, allowing stretching horizontally as well as vertically. But I'm sleepy tonight. -- Sean Luke (sean #at# cs #dot# gmu #dot# edu)
    • Nice mod, Sean, but you're right, my original motivation for adapting the skin for PmWiki is to hide static contents that don't really change that much from page to page but always take valuable screen real estate. With respect to page width expansion, I found that it will reduce readability in some cases because longer horizontal lines are typically harder to follow than shorter ones. -- Julian I. Kamil
  • I solved the Menu problems! It seems that current versions of PM Wiki locate the sidebar in Site.SideBar while the template file for this theme still uses Main.SideBar. Open up the skin template file, find and fix this, and the menu will work!!!
    • I will include Site.SideBar in the Website menu in the next release. -- Julian I. Kamil
  • I have a problem with tables: borders show even though I set border=0 and I cannot figure out why. The light grey border is quite nice, but at times I need to have no border. How can I get borderless tables, please? -- Luigi
border=0 cellpadding=5 cellspacing=0
border=1 cellpadding=5 cellspacing=0
(:table class=borderless-table:)
  • Thank you, Julian, for your kind help on borderless tables. Here is one more table issue, it seems :-)

It's something that is probably useful to many, so I dare elaborating here. Also because it has to do with rouded corners, and, you know, this very skin... I'm trying to add boxes somewhere on my pages, and I found a suitable box example here: [(approve links) edit diff] (Note: I linked directly to Peter's images, which is not a correct practice, usually; but I did so here for it's just a test.) I managed to extract the code, and created an example stand-alone page http://kirpi.it/wiki/pub/skins/simple/boxes.html which works fine. The plan is to include it with an (:includeurl:) tag and float it right. The problem is that the table comes out broken somehow. Please try (:includeurl http://kirpi.it/wiki/pub/skins/simple/boxes.html:) (it doesn't work here, maybe includeurl is not enabled) or see this screen-capture .

Now:

a) would it be the right way to build a rounded-corners box around text? b) if so, what's wrong with it? c) otherwise, could you point me (us) to a better way, please? -- Luigi

  • At first glance, they look like nice boxes. I'll take a quick look at the code and see if I can find anything that is broken. Update: I found some missing closing @td@ tags in the code at the URL above. See the extracted lines below. -- Julian I. Kamil
    <td width="142" valign="top" class="normal">
        <a href="http://mit.edu/">Sexy Eva: wow!</a>
    <td width="142" valign="top" class="normal">
        <span class="madewithmacSchrift">
        <small>Le caselle che belle che belle! Caricati linux e taci...</small>
        </span>
    <td width="142" valign="top" class="normal">
        <a href="http://kirpi.it/">
            Ma che bel kirpino che vedo qua, mi pare un pollo...
        </a>
  • I'm having a problem with tables in this skin. For some reason, no matter how I set the align attribute, the table will always center. Any suggestions?
    You're probably using Firefox. Instead of ||align=left use ||style="margin-left:0px;" . Sorry. /jm
  • Very nice, simple skin ! There is a problem with the popup menu, however. I have configured a minimum font size of 12 in Firefox (and Camino, and Safari). This produces a small gap between "Website Menu" and the actual menu:
    When the mouse pointer touches this gap, the menu disappears. Can this be fixed ?
    --Alexander
    • Change the #popupmenu li ul"-entry "top: 1em;" to "top: 10px;" in simple.css.
      -- Andreas 06/18/06
  • How do I use the simple skin for only one group on my wiki? After several hours, I've got it mostly working. E.g., killing all the spaced names took awhile. However, the pulldown menu fails. Changing Site.SideBar would affect my whole wiki. Changing Mygroup.SideBar does nothing.

Also, is it possible to hide the edit, history, and upload buttons unless the user has entered an edit password? The idea is that one group of people is uploading info to the wiki, and another group will read the info.

Thanks. / WRF 1Mar06

  • This skin is very well design and is ... simply beautiful :), below are 3 mods to get it even better
    • readability of text in edit box

in simple.css, grab the #text style and add font-size #text { margin-top: 12px; margin-bottom: 12px; font-size: 14px; font-family: monospace; }

  • modification date in the footer

In the simple.tmpl file around $SkinCopyrightNotice tag, replace the boring copyright notice by a modification date.

<span style="float: left; display: block; padding-left: 20px;">
   $[Page last modified on $LastModified]
</span>
  • main toolbar bug?

Add PmWiki functionnalities. In the simple.tmpl file, adding this around $SkinMenuBarVisible code

<li><a href='$PageUrl?action=print' target='_blank'>$[Print]</a></li>
<li><a href='$ScriptUrl/$[$Group/RecentChanges]'>$[Recent Changes]</a></li>
<li><a href='$ScriptUrl/$[$SiteGroup/Search]'>$[Search]</a></li>

Thanks for your skin - Nop March2006

  • Hello and and thanks very much for this skin, so flexible.
I use it for my site (i'm novice) and there's no bug on iE, but i've problems with firefox : two tables on my home page and they go away on the right of the screen (hey, come back !)
Any idea to solution this bug ?
The url is http://ronanjoncour.free.fr
Ronan 03/24/06
  • Is it possible that your two tables are being displayed side-by-side making for the wide page? Try forcing some vertical space between the two tables?
    D. Sides 3/28/06
  • For guiedit :

my solution (not the better) : look for "simple.php", open it and write this at line 39

## Use GUI buttons on edit pages, including add some extra buttons.
global $EnableGUIButtons, $GUIButtons;
$EnableGUIButtons = 1;
$GUIButtons['h3'] = array(402, '\\n!!! ', '\\n', '$[Subheading]',
'$GUIButtonDirUrlFmt/h3.gif"$[Subheading]"');
$GUIButtons['indent'] = array(500, '\\n->', '\\n', '$[Indented text]',
'$GUIButtonDirUrlFmt/indent.gif"$[Indented text]"');
$GUIButtons['ul'] = array(530, '\\n* ', '\\n', '$[Unordered list]',
'$GUIButtonDirUrlFmt/ul.gif"$[Unordered (bullet) list]"');
$GUIButtons['ol'] = array(520, '\\n# ', '\\n', '$[Ordered list]',
'$GUIButtonDirUrlFmt/ol.gif"$[Ordered (numbered) list]"');
$GUIButtons['table'] = array(600, '(:table border=1 width=80%:)\\n(:cell style=\'padding:5px\;\':)\\n1a\\n(:cell style=\'padding:5px\;\':)\\n1b\\n(:cellnr style=\'padding:5px\;\':)\\n2a\\n(:cell style=\'padding:5px\;\':)\\n2b\\n(:tableend:)\\n', '', '',
'$GUIButtonDirUrlFmt/table.gif"$[Table]"');

Ronan 04/15/06

  • Fix for "Website-Menu-gap-bug" (see Alexander above):

Change the #popupmenu li ul"-entry "top: 1em;" to "top: 10px;" in simple.css.
-- Andreas 06/18/06

AxelGroll? 07/11/06

Hi, small prob with image styles and frames on my installation. When stuff described here, especially http://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1''' and %rframe% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!''' is used on images, it's simply ignored, besides the image.

Take a look: http://reise.selbst-doku.de/Main/TurbaxelsWichtigsteLinks

Here, it's rendered correctly. Do I have to use a new version of SimpleSkin or PmWiki?

Take Care, Axel, Munich

  • I have uploaded a version of Simple with fixes for some of the problems mentioned on this page (see Files section above).
    -- Alexander 09/10/06
    • Updated the files with fixes for popup menu alignment at different font sizes and incorrect page title strings.
      -- Alexander 09/12/06

  • I made a small modification in the simple.tmpl to include an extra website menu to the left of the original menu. I use it for another language group in the wiki. It worked for me. The changes are on lines 123 to 127:
<li>Menu do Website
                                <!--wiki:PmWikiPtBr.SideBar-->
                            </li>
                            <li>Website Menu
                                <!--wiki:Site.SideBar-->
                            </li>
  • The only problem now is that I'm having some difficulties with Wikipublisher that didn't use to occur with the notsosimple skin.

-- Erik

  • The wiki messages ('wikimessage') aren't displayed with this skin. If for example $EnablePostAuthorRequired is enabled, the message that an author name is required doesn't appear. -- Raphael 02/14/2007

  • How does one increase the width of the editing pane? It's only using about 50% of the content width, which makes it difficult to edit longer documents. When I edit this particular page, it's the full width, but that's not happening with my default install. Great skin, btw. --David 02/21/07
  • I like the skin, but found as my wiki got more complex that it was easier to search than navigate. I added a small search box beside the left header menu because I got tired of clicking on search all the time before I entered text. Here's the changes.

In simple.tmpl, to the <script> section in <head>, add this function:

    function outputSearchBox()
     {
         if ("$FullName" != "Site.Search") {
           document.write("<li>" + 
              "<input type='text' name='q' value='' class='menusearchbox' size='20'/>" +
              "<input type='submit' class='menusearchbutton' value='Search' />" + 
              "<input type='hidden' name='n' value='Site.Search' />" + 
              "<input type='hidden' name='action' value='search' /></li>"); 

         }
     }

Note that it looked bad to have 2 search boxes on the page when looking at the search results, so I suppress the header menu search box on the site search page.

Then about 3/4 of down simple.tmpl, replace

<li><a href='$ScriptUrl/$[Site/Search]'>$[Search]</a></li>

with

<script>outputSearchBox();</script>

Finally, to simple.css I added

 
input.menusearchbox { 
   font: 8pt Verdana; 
   padding-top: 0px;
   padding-bottom: 0px;
}
input.menusearchbutton { 
   font: 8pt Verdana; 
   border: 1px solid;
   margin-left: 5px;
}

-- WRK 05/08/2007

  • Hi, very nice skin. But there is a problem with tables. The align-attribute works well (style="margin-left:0px;"). I tried out the float:right attribute as well but it doesn't work. Don't know why. I'm using firefox. The code is:
 
(:table border='1' width='15%' bgcolor='#cccc99' style='float:right; margin-right:0px':)
(:cellnr align='center':)blablabla
(:cellnr:)some more rows
(:tableend:)
floatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloat floatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloat floatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloat
blablabla
some more rows

floatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloat floatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloat floatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloatfloat

And the Text doesn't float! :-(
Using other skins there are no problems like this.
Markus 06/12/2007


  • One more problem - I changed the website menü in simple.tmpl to the following:
<span id="popupmenu" style="float: right;">
  <ul id="menu">
      <li>Klassen
          <!--wiki:Klassen.SideBar-->
      </li>
      <li>Lehrer
                   <!--wiki:Lehrer.SideBar-->&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      </li>
      <li>Werkzeuge
         <!--wiki:Werkzeuge.SideBar-->
      </li>
      <li>Service
                                <!--wiki:Service.SideBar-->&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      </li>
      <li>Verschiedenes
                                <!--wiki:Site.SideBar-->&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      </li>
      <li>Website Menu
          <!--wiki:$Group.SideBar-->
      </li>
   </ul>
</span>

The &nbsp is for more space between the menus. It works for me.

But in case of simultaneous editing I got this warning message:

Warning: popen() has been disabled for security reasons in /public_html/scripts/simuledit.php on line 31
Warning: Cannot modify header information - headers already sent by (output started at /public_html/scripts/simuledit.php:31) in /public_html/pmwiki.php on line 885

This message appears while using the IE as well as using the Firefox. Any ideas?

Unless when I'm using the original simple.tmpl it's overwriting the changes while simultaneous editing as well.

Markus, 06/13/2007


  • Long links extend beyond the frame of the skin.

I added the following in simple.css , in the " #content " section:

 word-wrap: break-word; 

This will tell the browser to force a line break.

I am no programmer, so, use at your own risk.

nikos? February 12, 2019, at 10:12 PM


Category: Skins, PHP81, PHP72