Skins

Blix-Talk

« Return to Blix

Summary: Talk page for Blix.
Maintainer: DaveG
Categories: Skins, Discussion

Use this page to report issues, ask questions, or make suggestions for future improvements. If you-d like to leave a quick thank you, or would like to leave a rating, please do that on the ratings page.

In order to keep things readable please:

  • Please place newer comments or issues at the top of the list
  • separate comments or issues with new level 2 headings

SiteHeader Changes

Are these changes to be made in the config.php file?

The wiki file Site.SiteHeader can be overridden with a Group level page. If you want to change the layout of the header edit either Skins.SiteHeader or Site.SiteHeader. The default value for the header is:

PmWiki

Thanks, Priscilla

Editing the Header

Wade, 3-Jan-2012: Great skin. Thanks much. How do we edit the "header," e.g., the "TAB2" link? Thanks, Wade

DaveG 3-Jan-2012: Refer to the section on Top Nav?.

Documentation mistake

Status: Closed

Fabrizio? 02-04-2010: I just would like to point out that the documentation for this skin has few mistakes. If you want to edit the SiteBar or the SiteFooter you need to edit:

Blix-SiteBar Blix-SiteFooter

cheers fabrizio

DaveG 2-Apr-2010: The site footer is stored in {$Group}.SiteFooter {$SiteGroup}.SiteFooter. The site sidebar (I think that's what you mean by 'SiteBar') is in {$Group}.SideBar {$SiteGroup}.SideBar. Are you using the most recent version?

Header issue at IE

Status: Fixed (2.1.2)

OtavioS? 08-02-2010: Dave, I´ve installed Blix and this is great. But the Header title is being cut in the very top at IE7. At FF this is OK. Seems that it is a CSS issue. Can you please verify ? Thanks

DaveG 8-Feb-2010: Yes, this looks like a bug in IE7. As a temporary work around until I fix the skin, put this in config.php:
$HTMLStylesFmt['blix'] .= '#header .sitetitle { line-height: 1em; }';

Altering alignment of icons / headings in sideboxes

Status: Resolved with thanks

GlenG? 16-10-2009: Can I just echo the difference the install of this theme has made to my use of PmWiki. From decision to use the Wiki to a complete install with Blix theme took about 20 minutes - and I'm not a coder. I have a quick (I presume) question. If you look at www.opensow.org.uk I can not find a way to align the icons to the text in the right hand side bar. I presume its a CSS setting? Can any one enlighten me?

Cheers

DaveG 16-Oct-2009: Glad you like the theme! If you mean the vertical alignment of the sidebar icon and the text, then I'm going to classify this as a bug, since it should be aligned. In the meantime add this to config.php:
$HTMLStylesFmt['blix']='#subcontent li{ background-position: left 5px !important; }';

If you're referring to the indented 'hierarchy-tree' of the elements, that's intentional and due to the way you have bulletted your sidebar items. If you don't want the tree effect, use a simple single level bullet list, rather than the multi-level list you have now.

Although, it also looks like the horizontal alignment of the tree hierarchy is a little out as well. Try this (which combines the fix above, so use one fix or the other, not both):

$HTMLStylesFmt['blix']='#subcontent li{ background-position: left 5px !important; } #subcontent ul li ul ul{ margin:0 !important; }';

GlenG? 17-10-2009: Perfect!! - It amazes me at the quality and commitment of free open source communities. (What's more I am just about able to decipher what the solution means -- no mean feat for a high school teacher)

Changing header background

Status: Problem resolved

JerryJ? 13-09-2009: I just installed your skin on a brand new PmWiki installation. Love the skin and it's elegant simplicity. The header background image is not showing (the blue gradient), however. I'm sure it has to do with my installation and not your skin but could you give me any troubleshooting ideas? Thank you.

13-Sep-2009, DaveG: If it's not showing for a standard installation, make sure you unzipped all the files. There should be a directory "images/" that itself contains sub-directories "backgrounds/" and "spring/" -- make sure these are present and accessible (so at least 0755 permissions).

JerryJ 14-09-2009: Thanks for your quick response. I did unzip the file into the directory on the server. I checked "images/" and it is 0755. I've checked several other ideas as well, to no avail. I also tried Marinee with the same problem. It had black at the top that stopped at the edges of the text area below (didn't extend to either side. It also lacked the green gradient rectangle and the check mark graphic in the sidebar to the left of the individual pages in the list.

Just a little more information. I installed PmWiki on a sub-domain with Simple Scripts. I could also give you the site address if you would like to see where I'm at.

15-Sep-2009, DaveG: If you have a url you can share, then I'll take a look at it. It does sound like either the files are not accessible (which you checked), or $SkinDirUrl is not being set correctly. You can verify this by checking the source of the page from your browser, and looking for the path of the /javascript/blix.js file. Copy/paste that path into your browser. If you get an error, then SkinDirUrl is not set correctly.

JerryJ 16-Sep-2009: Ok I found the path to /javascript/blis.js and after inputting it in the browser path I get a page with
/$(document).ready(function(){ 
	$('#subcontent .sidehead').wrapInner('<em></em>');
});
I'm not really sure what this is telling me...Actually I see that is the content of blis.js so I guess it is calling it up correctly? Also if you want to pm me @ <<snip>> I will send you the site address to check out.

17-Sep-2009, DaveG: Right, that suggests that SkinDirUrl is being set correctly. Try using that url, and adding this images/backgrounds/header_bg.jpg which is the actual background image url. Feel free to send your url to pmwiki at solidgone dt com and I'll take a quick look.

JerryJ 18-Sep-2009: I tried that and header_bg.jpg opens correctly. I also sent you the url. Thanks again for the help.

19-Sep-2009, DaveG: Problem was due to hot linking conditions in .htaccess preventing relative path images being displayed for sub-domains. Resolution was to ensure .htaccess conditions allowed for sub-domain access:
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?DOMAIN-NAME\.com/ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]

Internationalization, and headers and footers

Status: Problem resolved

Jan R. 2009-04-01: I have just upgraded to the latest version of the nice looking Blix skin. I got in to some minor problems:

  1. I want danish text in the search field button. The search field has button with the text Go. I prefer Søg, so all text in navigation are in danish. Please replace the text with an icon for Go like a loupe.
  2. Loosing changes at skin upgrade. I miss the old header, so I know which site and page surfing. I have to edit the skin.tmpl. At the next upgrade I have to reedit all changes.
  3. How to write last user and date of page edit in the footer?

DaveG 2009-04-01:

  1. Search Button: The skin makes use of internationalization strings. That means you can change the text on the button (and in most other places), without changing the template itself. I'm not too familiar with how to go about it, but PmWiki/Internationalizations should provide you more info.
  2. Headers: I did change the headers for this release, to try and remain consistent with other PmWiki skins. That means that you can copy your changes into Site.SiteHeader or {$Group}.SiteHeader. Again, no need to change the template file.
  3. Footer information: You can change the footer by editing either {$Group}.SiteFooter or {$SiteGroup}.SiteFooter (usually Site.SiteFooter). In this case refer to PmWiki/PageVariables -- you can use {$LastModified} and {$LastModifiedBy}.

Jan R. 2009-04-02: Thank you for the quick answer! Header and footer information are in place. The search text Go! is not translated eventhough I have added it to the Site.XLPage:

'Go' => 'Søg',
It didn't work. So I have replaced the text with Søg! in skin.tmpl:
<input id="searchbutton" type='submit' name="searchbutton" value='$[S&oslash;g!]' />
What is the purpose of $[ ... ]?

DaveG 2-Apr-2009: the $[ ... ] tells PmWIki to use the internationalization lookups -- thus it should translate "Go!" to the Swedish(?) values you provided. In this case at least part of the reason the translation isn't working is you need to specify the exclamation mark:

'Go!' => 'Søg!',

Jan R. 2009-04-03: Thank you for the help! It works.

LG 13.11.2009: This works indeed. The reason why the translation of Site.SiteFooter didn't work with PmWikiDe.XLPage was the excess asterisk in the SiteFooter that came with Blix:
Site.SiteFooter: [*$LastModified]
PmWikiDe.XLPage: [$LastModified]

Fabrizio? 29-04-2009: Not sure if this can help but to solve the issue of multi language I have placed conditional markups everywhere needed (and the cookbook multilanguage). For example, in the top bar (editable at (your root)/pmwiki/pmwiki.php/Site/Blix-SiteNav?action=edit) looks like this:

(:if userlang en:)
* [[Main/HomePage | Home]]
* [[Main/Services | Services]]
* [[Main/Portolio | Portfolio]]
* [[Main/News | News]]
* [[Main/Links | Links]]
* [[Main/Contact | Contacts]]
(:ifend:)
(:if userlang it:)
* [[Main/HomePage?userlang=it | Home]]
* [[Main/Services?userlang=it |Servizi]]
* [[Main/Portolio?userlang=it | Portfolio]]
* [[Main/News?userlang=it | News]]
* [[Main/Links?userlang=it | Links]]
* [[Main/Contact?userlang=it | Contatti]]
(:ifend:)
(:if userlang fr:)
* [[Main/HomePage | Home]]
* [[Main/Services | Services]]
* [[Main/Portolio | Portfolio]]
* [[Main/News | News]]
* [[Main/Links | Links]]
* [[Main/Contact | Contacts]]
(:ifend:)

I did the same for the whole website and it works pretty well so far. cheers


Wrapping an Image Caption

Status: Problem resolved

2009-03-10, JB?: Hi Dave.. Fantastic Skin! I've used it extensively with one of the projects I'm working on and have been enjoying reading through all your coding, css, etc. to get everything I need in place. One thing that has been driving me bonkers: Is there some kind of way to keep an image caption from expanding the frame the image is in and instead wrapping? I've gone ahead and attached an example to clear up any confusion. Any help on this issue would be great... I've tried adding a width, and all that goodness, but the text seems to be quite the little bugger and just won't wrap. The same occurs when I use rframe.

I understand that this is probably a PMwiki issue but was hoping you could give me some insight into the problem. In hindsight I guess I could make this work with a table instead of a frame.. But then I'd have to set the width of every table... Hopefully there's an easier way :)
%lframe% Attach:Traffic-Circle.jpg"Bristol, UK Traffic Circle" | '''Here is some text that will be expanded out beyond the image border.'''
Bristol, UK Traffic Circle
Here is some text that will be expanded out beyond the image border.

2009-03-10, DaveG: Glad you like the skin, thanks. This is really a PmWiki issue, rather than being Blix specific -- take a look at this test page which uses PmWiki's standard skin, same result. I played around a little, and didn't find a quick solution. You'll get many more eyes, and thus a more ilkely response if you post this as a question on the mailing list.


$Blix_Width Bug

Status: Bug fixed

2009-03-01, cmstrekker?: Bug of some kind in blix, setting $Blix_Width from config.php produced a blank page in latest Firefox. Had to revert.

2009-03-01, DaveG: Thanks for pointing this out. If you are able, then change line 17 of skin.php, adding [$HTMLStylesFmt@], to read:

global $Blix_Width, $Blix_TitleBg, $Blix_TitleColor, $SkinDirUrl, $HTMLStylesFmt;

cmstrekker 2009-03-04: didn't help

DaveG 2009-03-04: I double checked the fix above on another site, and it seems to work. I uploaded a new version with the fix in it, so try downloading that lets see if it works. If it doesn't let me know what happens, or if you have a demo that would be very useful. Set $Blix_Width using either percentage or px values:

$Blix_Width='70%';

or,

$Blix_Width='600px';

Remove link above page title

Status: Problem resolved

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.

June 16, 2008 Ian MacGregor: 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.

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.


Header customization

Status: Problem closed

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.


Bug in GUI Edit Icons

Status: Bug fixed

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 ;)


Footer information incorrect

Status: Bug fixed

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.


Bug in GUI Edit Icons

Status: Bug fixed

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.


Incompatibility with UserAuth2

Status: Problem closed

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.


Removing skin sections

Status: Problem resolved

Rommel Pascual, 22-Nov-2007: Hi. Thanks for this skin. I'm trying to transition to it from a monobook skin. Pages with 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.

I've also tried adding a logo in the Blix-SiteHeader and used margin-top to position the logo. (The example shows top-margin, which didn't work for me).

Cheers.

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.

With regard to the logo, and margin-top. When you say it doesn't work, what problem are you having? Is there something I can look at?

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:).

As for the logo, the example shown in the Blix-SiteHeader is top-margin which may be a typo and should read as margin-top.

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

You're correct, that was a typo, not sure how I managed that. It should be "margin-top". Does that fix the problem you had?

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.

Changing skin look

Status: Problem resolved

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

We have made some modifications like increased the size of the content area 100 pixels bigger. There is a Separator (Horizontal Line) between the content and the right side bar that I have not been able to relocate. Do you remember in what part of the skin or layout should I be able to relocate the separator ?

I have work locally and in internet with several wikis and I have used and test a few skins, I really like the look and feel of the blix skins, congrats.

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;
}

Just so you know, I selected the size of the content section so ensure that users running at 800x600 screen resolution would not have to scroll horizontally. You might want to consider whether that will be an issue for your users.

Also, it looks like you have a single paragraph return in the header section, sitelogo, which is causing a gap between the header and the top nav links.

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).

Now about " it looks like you have a single paragraph return in the header section," I could not find any piece of code in the wiki pages that produce that. I reupload the whole skin and could not get it back to the Original.

I found it There was an empty Line in the Site.Blix-SiteNav Page. I''let know you how it goes
Thanks Dave.

Talk page for Blix (users).

Cookbook

PmWiki

pmwiki.org

Blix theme adapted by David Gilbert, powered by PmWiki