Blix

<< Blog | Skins | Bonny >> (test page)

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 edit icons for commonly used wiki markup -- no more forgetting which markup to use!
• Color switching: Easily switch skin colors (2 basic versions come standard) and page header backgrounds, 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 (Blix.zipΔ) and unzip it into your skins directory (usually pmwiki/pub/skins).
2. Add the following to your local configuration file:

$Skin = 'Blix';

1. Optional:
   1. Add a specific color theme (spring is the default). Refer to colors for more color options.
   2. Replace the default page header background image.

$SkinColor = 'autumn';
$TitleBg = 'gradient_gold.png';

Features

Color Switching

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

$SkinColor = 'autumn';

Or simply pass a parameter:

?color=spring

The included color schemes are: spring and autumn.

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

1. Copy one of the existing color directories (named /color-xxx.css in the Blix/ directory)
2. Change the colors appropriately.
3. If you want to use different icons in your theme, then create a directory under images, and point the color-xxx.css to that directory.

Header Backgrounds

The directory Blix/images/backgrounds contains a number of background images. You can override the image used as the title background by adding this to you config.php:

$TitleBg = 'gradient_gold.png';

The background images pre-packaged with Blix are: blocks_blue.png, blocks_chocolate.png, blocks_granite.png, blocks_green.png, drapes_gray.png, drapes_white.png, gradient_blue.png, gradient_bronze.png, gradient_chocolate.png, gradient_gold.png, gradient_green.png, gradient_green2.png, gradient_sky.png, gradient_warm_green.png, header_bg.jpg, pattern_blue.png, pattern_green.png.

Page Layout

Changing the Content of the Skin Sections

Header

Typically you'll want to change the Header. Create a page called Site.Blix-SiteHeader. You can use the page Site.Blix-SiteHeader as a template. To add a site title (top left) use the format below:

(:div class="sitetitle":)Title
(:divend:)

To place an icon in the top left of the page header use this format. Depending on the size of the logo you may want to adjust the top-margin.

(:div style="margin-top: 20px;":)Attach:my-logo.gif
(:divend:)

Top Navigation bar

The other likely change you'll want to make is to add links to the top navigation bar. In this case edit Site.Blix-SiteNav, and use a list format as below:

* [[Grp/MyPage | Page 1]]
* [[Grp/MyPage | Page 2]]

Removing Page Sections

Blix 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,Action,Right,Title,Footer.
• Turn off sections for the whole site in config.php by setting:

SetTmplDisplay('PageXXXFmt', 0);   #XXX: Header,Action,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.

Known Issues

Also refer to the Planned Releases for know issues that have a planned fix date.

• chg: make #sitelogo .vspace have display:none to prevent gap between header and top nav links.
• new: Add markup to hide search bar.
• bug: IE6: right menu appears at the bottom of the page (ref Stephane)
• bug: IE6: page is not centered (left positioned) (ref Stephane)
• bug: the buttons for bullet and ordered list are mixed up. (ref Matthias)
• bug: footer link points to wrong url. (ref ostro)
• bug: GUI strikethrough button does not work. (ref Matthias)
• bug: Add TITLE attribute, using $WikiTitle (ref Stephane)

Planned Releases

Change Log

1.0.1 (24-Nov-2007)

• new: allow footer and top-nav override at Group level.
• new: provide means of removing search bar from page (:nosearch:).
• chg: placed version info outside of footer.
• chg: .quickref: change P/vspace to padding:0
• bug: addressed right nav positioning error in IE6 when long lines encountered.

1.0.0 (7-Nov-2007)

Contributors: DaveG

• Initial release.

Credit

• The main layout and the CSS is based on the Blix theme for Wordpress, created by King Cosmonaut.
• The extra header backgrounds came from http://devon.freepgs.com/2007/blix.php

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!

• Edwin Marte, 15-Nov-2007: Hi Dave, I am using the blix Skin in Asoiacion de Robotica(approve links) Wich is a Robotics society. At this Moment we are just organizing the information and integrating with our old site wich is nuke based.

• DaveG, 15-Nov-2007: Glad you like the skin! I *think* you mean the vertical shaded line that separates the right nav bar from the main content. You'll need to update the background property in #container style in color-spring.css, changing 648px to 748px:

#container {
   background:white url(images/spring/container_bg.gif) repeat-y scroll 748px 0px;
   border-top:30px solid white;
   padding-top:0pt;
}

• Edwin Marte, 15-Nov-2007: Thanks for your pointers and Reply. That was exactly what I meant ( the vertical shaded ) sorry for my English :) I could not find a better way to explain. I tried modifying the number to 748 and I got what I wanted but After reviewing yes I decided to go back to the Original untouched Skin (thinking about 800x600 support).

• Rommel Pascual, 22-Nov-2007: Hi. Thanks for this skin. I'm trying to transition to it from a monobook skin. Pages with (:notabs:) and (:nosidebar:) will break. However, what I'm trying to achieve is to have an all content page so I tried the markup (:noheader:)(:nofooter:)(:noright:)(:notitle:)(:noaction:) but there's no way to hide the SITENAV ACTION and SEARCH section all together.

• DaveG, 22-Nov-2007: If I'm reading you correctly you need a way to hide the search bar. It also sounds like you're having an issue with the action bar as well, but I'm not clear if that's an issue, or not. There isn't currently a way to hide the search bar -- I'll add that in the next release, possibly in the next day or so.

• Rommel Pascual, 22-Nov-2007: Hi, Thanks for the reply. What I was trying to achieve was a way to hide the sections HEADER, SITENAV, ACTION MENU, and SEARCH BAR for some pages. I have a few of these pages that I want to present as generic as possible. I like the Blix Skin, it looks neat and the SITENAV is very useful. I'm looking forward to the next release. I don't have any issue with the action bar, the text disappeared with (:noaction:).

• DaveG, 22-Nov-2007: Looks like adding a nosearch markup will get you where you want to be, so I'll add that.

• Rommel Pascual, 22-Nov-2007: Yes it had - thanks. I also have this issue with IE with regards to single line pre-formatted text. The following 2 lines are coded slightly different (You may need to edit this page to see the difference). I prefer the first one which looks fine in Firefox but in IE the vertical height is so small, the text is actually obscured. Is there a work around for it?

A relatively long preformated single line, that may be used to document a command line syntax will have an obscured look because of the scroll bars

A relatively long preformated single line, that may be used to document a command line syntax will have an obscured look because of the scroll bars

• DaveG, 22-Nov-2007: The scroll-bar obscuring the line in IE, is a known issue on IE, but I have been unable to find a solution. As a temporary work around (until I work out a permanent fix) is to add a single carriage return at the end of the line (again, edit the page to see what I did):

A relatively long preformated single line, that may be used to document a command line syntax will have an obscured look because of the scroll bars
* '''DaveG, 24-Nov-2007:''' Added (:nosearch:) directive -- hope that helps.

• ostro, 4-Dec-2007: I love the skin. Great work! Though it is somewhat incompatible with UserAuth2. UserAuth2 does not allow the use of - in pagenames. Therefor i can't set permissions for Site.Blix-SiteFooter, Site.Blix-SiteHeader and so on. Not a problem if you don't restrict use of Site. pages.
• DaveG, 5-Dec-2007: Interesting. I could rename the pages to use an underscore in place of a hyphen, but it sounds like a pretty fundamental problem in UserAuth2 -- I'll do some research to make sure I'm not missing something, and thus need to rename the skin pages.
• ostro, 17-Dec-2007: Well it's not really a problem with my current configuration. I simply don't allow editing Site. pages, only viewing. Though someone who wants a more elegant solution might find it troublesome. Just thought i'd let you know. Again, thanks for the great work and quick response.

• Matthias Günther, 26-Dec-2007: Hello Dave, I really love your Skin it's very simple and has a good look but I have found a mistake. If you edit a page the buttons for bullet and ordered list are wrong - you have mixed them up. So best greetings from Germany and habe a nice day!
• DaveG, 6-Jan-08: Thanks for the heads-up Matthias; I've added it to the bug-list, and a fix should be coming soon.

• ostro, 11-Jan-08: Hi again! Small thing. The link to the skin in the footer is incorrect. It now points to http://www.pmwiki.org/Skins/Blix when it should be http://www.pmwiki.org/wiki/Cookbook/Blix. Thanks!
• DaveG, 12-Jan-08: Yeah, looks like I screwed that up on all my skins. Fix will come in next release.

• Matthias Günther, 18-Jan-2008: Hello again Dave, I found again a little minor mistake in the list of the gui buttons, just click on the strikethrough symbol an you will see, what I mean. Instead of

Strike the output is (-Strikethrough-). So then have a nice day :-)

• DaveG, 18-Jan-08: Thanks again -- I've added this to the list for all my skins. I'll also do a little of my own testing on the toolbar ;)

• Jan R., 20-april-2008: I work on the second installation of PmWiki using Blix. It is for a layer, so I have to made a bit more noble. It is straight forward to customize. I do not understand how to customize the header. a bit more explanation is requireed for me.
• DaveG, 22-Apr-08:' I'm not quite sure what you mean by "It is for a layer, so I have to made a bit more noble. It is straight forward to customize." -- could you provide a little more explanation?
  To change the header, start by editing the file Site.Blix-SiteHeader. You can put whatever text you like in there. There are some CSS classes you can use, like:

(:div class="sitetitle":)Title
(:divend:)

  Again, if you can give me more detail on how you'd like the header to look, I'll try to help.

• Louis E., 16-june-2008: Hello Dave, nice work! Do you have any clue on how I could remove the link just above the page title in the header (in this page : the cookbook link). Thanks in advance.
  • See line no. 17 in skin.tmpl. The skin uses "{$Group}" for that link (appears as Cookbook above) and "{$Titlespaced}" for the "Blix" title, this is typical of many skins. -- June 16, 2008 Ian MacGregor
• Louis E., 16-june-2008: EDIT: it's alright, I changed a couple of things in skin.tmpl and layout.css and it works fine.