Cookbook

Marinee

<< Marble | Skins | Monobook >> (test page)

Summary: Marinee is based on Green Marinee by Ian Main.
Version: 1.0.1 (11-Nov-2007)
Prerequisites: None.
Status: Active
Maintainer: DaveG
Categories: Skins
Download: marinee.zipΔ
License: Dual licensed under the MIT and GPL licenses.

Version 1.0.1 (11-Nov-2007): Minor bug fix replaces the HR tag, and expands the skin to 800px.

This skin provides a simple, 2-column interface.

I'd love to know if you use this skin, or even if you like or hate it -- leave a comment below!

Click to enlarge

Feature Summary

  • Customizable: Main sections (headers and footers) of the page are stored as wiki pages, so you don't need to know HTML.
  • Edit icons: Provides icons for commonly used wiki markup -- no more forgetting which markup to use!
  • Color switching: Easily switch skin colors (3 basic versions come standard), or create your own skin colors.
  • Supports removal of header/title/right/footer elements using directives on specific pages or site wide.
  • Fully CSS driven, is valid XHTML, for those that care about such things. All files are fully commented, and the design has been made easy to modify. The CSS used for layout and coloring are in separate files allowing easy customization of colors, without having to wander throughout the layout styles.

Download and Installation

  1. Download the skin package (marinee.zipΔ) and unzip it into your skins directory (usually pmwiki/pub/skins).
  2. Add the following to your local configuration file: 
$Skin = 'marinee';
  1. Optional: Add a specific color theme (green is the default). Refer to colors for more color options. 
$SkinColor = 'orange';

Features

Color Switching

You can switch the color theme site wide by updating your config.php with: 

$SkinColor = 'blue';

Or simply pass a parameter: 

?color=orange

The included color schemes are: blue, green, orange.

If the existing color themes don't do it for you, simply:

  1. Copy one of the existing color directories (named /color-xxx in the marinee/ directory)
  2. Edit skin.php in the marinee/ directory.
  3. Change the colors appropriately.

Page Layout

HEADER includes Site.SiteHeader, Site.Marinee-SiteHeader ACTION MENU includes Site.PageActions
MAIN

no pages included

SEARCH BAR

no pages included RIGHT SIDE BAR includes {$Group}.SideBar Site.SideBar

FOOTER includes {$Group}.GroupFooter Site.SiteFooter

Changing the Content of the Skin Sections

Header

Typically you'll want to change the Header. Create a page called Site.SiteHeader. You can use the page Site.Marinee-SiteHeader as a template, or use the format below: 

(:div id="headertext":)Your Title
(:divend:)
(:div class="tagline":)Your Tagline
(:divend:)

Site Menu

The other likely change you'll want to make is on the Site Bar. In this case edit Site.SideBar, and use a list format as below: 

%sidehead% [[Header 1]]
* [[First Level]]
** [[Second level]]

Marinee Layout

Marinee consists of a header and footer, and fixed-width left and right columns. Sections can be removed from the page or the site with special markup.

  • Turn off sections on a page with markup (:noXXX:). Where XXX is Header,Actions,Right,Title,Footer.
  • Turn off sections for the whole site in config.php by setting: 
SetTmplDisplay('PageXXXFmt', 0);   #XXX: Header,Actions,Right,Title,Footer

FAQ

Browser Compatibility

This is an incomplete listing of the browsers which have been seen working with this skin.

  • Works under Windows with: Firefox 1.5; Firefox 2; IE7; IE6; Safari 3; Opera 9.

How to Replace the Title with a Logo

  1. Edit Site.SiteHeader, adding a link to your image.

XHTML compatibility

  • add a <fieldset> ... </fieldset> around the <input ... /> of the searchbox form.

Known Issues

  • bug: add the <fieldset></fieldset> tag pair in the searchbox (ref JDem)
  • bug: history page: changes float to end of right nav bar. Also in Firefox a
    pushes everything after it below the bottom of the content in my SideBar. (ref DavidASpitzley)
  • bug: replace site header/footer, removing Site.SiteFooter. (ref DavidASpitzley)

Change Log

1.0.1 (11-Nov-2007)

  • Bug: Add HR tag back into skin.
  • Chg: Widen view area to 800px.

1.0.0 (21-Oct-2007)

Contributors: DaveG

  • Initial release.

Credit

  • The main layout and the CSS is based on the Green Marinee theme for Wordpress, created by Ian Main.

Comments

I'd love to know if you use this skin, or even if you like or hate it -- edit this page and leave a comment below!

Please use this format for comments.

  • Name, 3-Feb-2008: Comment
  • Steven, 2007-10-28: I'm trying to put a solid white logo in the top left corner, and I'm having trouble getting it to fit into the layout. I've tried adding the logo to the skin.tmpl file and aligning it, but it aligns about an inch down the page. Any recommendations would be helpful. Other than that, I think the skin is great. Here is the page I'm using it on, http://consumer.crl1.com
  • DaveG, 29-Oct-07: Looks like you managed to get it working. For those who are trying to do something similar, refer to the FAQ above. (Steven: Feel free to update or add to the FAQ if you ended up using another method.)
  • Tom, 2007-11-9: I like this skin. I'm using it for a personal wiki. Four hyphens won't make a horizontal line, at least in Safari. I get the lines when using other skins. Any suggestions?
  • DaveG, 11-Nov-2007: That was an error on my part. It's now fixed with version 1.0.1 (11-Nov-2007).
  • Jose, 2007-11-11: I'm using too for a personal wiki, very nice skin :)
  • MichaelS, 2007-12-15: I'm using Marinee with some changes for our church see here - site is only available in german(approve links) and for a personal wiki, I like it very much! - Thank you !
  • Ravi, 2008-01-03: I am trying this skin. I have difficulty with "table of contents (:toc:), as it is at top (proper place) in internet explorer, and at bottom (improper place) in firefox and opera. Additionally I have changed in template to display and print indic language scripts using utf-8. Site is http://nirog.budcare.org/(approve links).
  • DaveG, 7-Jan-2008: Looks like you now have a different skin on that URL. If you let me know which cookbook you are using for TOC I'll take a look. Also, let me know what you had to do to enable utf-8 -- simply the HTML header?
  • JDem, 2008-01-05: I have installed this skin. A very nice and smart skin. It functions perfectly for me. A suggestion: to add the <fieldset></fieldset> tag pair in the searchbox <form></form>. After what, it is fully conformant with XHTML 1.0 strict and XHTML 1.1.
  • DaveG, 7-Jan-2008: Good catch; I'll address it in the next release.
  • Blues, 2008-01-16: History page needs some fixing...
  • DaveG, 7-Jan-2008: On the history page, the first change appears mid-way down the page, aligned with the bottom of the right nav bar. I'll fix that in the next release.
  • Roger, 20-feb-2008: I'm having trouble installing your skin. I'm using pmwiki 2.1.27, copied the marinee folder into pub/skins and edited the $Skins variable in the config.php. I've tried other skins without problems.
  • DaveG, 20-Feb-2008: Can you give me more details on the specific problem you're having -- what exactly is going wrong? Is the skin being applied, but has some problems? Is the skin not even being applied?
    As a few starters, make sure you set the skin, and just in case, set the skin color as well: $Skin = 'marinee'; $SkinColor = 'green';.
    Also make sure the marinee directory name is in lower case, and spelled correctly.
  • Steve, 9-Aug-2008: I really like this skin, it's perfect for what I need it for. I've made a couple of graphic changes to flow seamlessly into our intranet site but I would like to see if a couple of modifications can be made.
    Add a "Last Modified: " field option.
    If the title is too long the "View, Edit, History, Print" buttons move down over the search box. Any possibilities of fixing this?
    Keep up the good work!
  • Thomas, 24-Apr-2008: Thanks for this great and easy customable skin! But i would like to insert a text line with "copyright by xxx, powered by xxx" on the bottom of the page. Could someone explain me how to insert this? I tried with "$SkinCopyright" and "$SkinDirUrl" in config.php, but this doesn't work with this skin? Thanks a lot!
  • DaveG, 24-Apr-2008: The page [={$Group}=].GroupFooter and Site.SiteFooter contain the text for the footer. So simply edit either of those pages and put whatever text or variable references you need.
  • anon, 03 Sep 2008:* great skin :) very nice! thanks!!
  • Adam 03 Sep 2008 - How can I increase the width of the centre area? what function is it in the the *.css, also any easy option for adding pictures? thanks has been very usefull so far.
  • Unfortunately this isn't as simple as we'd like. You need to change the width properties for the following CSS classes: container, header, content, footer-container. In addition you'll have to use an image editor to manually change the size of container.gif, container_top.gif, and footer.gif. I'll try to make this easier in a future version of the skin.