«  | Skin Index | Gemini Skin »




The design of Beeblebrox Net Gila is based on gila by haran(approve sites) and Right Brain?. It has some very nice virtues:


Standards compliant
100% compliant with XHTML 1.0 Transitional and CSS 2 for more consistent browser rendering. Actually the template is XHTML 1.0 Strict but PmWiki doesn’t always produce Strict XHTML code.


Layout without tables
No tables were harmed during the making of this design.


Browser-specific styles without JavaScript
Styles which are perculiar to a specific web browser paradigm are encoded in the stylesheet itself.


Document metrics (widths, lengths and spacings) are font-size relative
This means that a user can increase the default font size of the page (using their browser) without compromising its layout.



Access Keys


Beeblebrox Net Gila supports access keys (original implementation: Access Key Skin?).


  • AK + V: View
  • AK + E: Edit
  • AK + A: Attach
  • AK + R: Print
  • AK + H: History


AK is either ALT+CTRL (GNU/Linux), CTRL (Mac OS X) or ALT (Windows).



To use Beeblebrox Net Gila for your own Wiki, just download the theme from http://files.beeblebrox.net/beeblebrox-pmwiki2-theme-1.0.tar.gz(approve sites) or use darcs to get the latest version:


  darcs get http://darcs.beeblebrox.net/beeblebrox-pmwiki2-theme(approve sites)


Extract it into /path/to/pmwiki/pub/skins/ and add the following code to your local configuration file



 # Specifies the name of the template file to be used to generate pages. $Skin = 'beeblebrox-gila2'; # The HTML code to be generated for the page logo. $PageLogoFmt = "<a href='$ScriptUrl'>Wiki<span>Title</span></a><br /> <span id='tag'>Subtitle</span>";


If you don’t want to have a search box in the right upper corner, comment out


 <form id="headerSearch" action='$ScriptUrl/$[Main/SearchWiki]'> <div> <input type='hidden' name='pagename' value='$[Main/SearchWiki]' /> <label for='searchbox'>Search</label> <input id='searchbox' type='text' name='q' value='' /> <input class='searchbutton' type='submit' value='&raquo;' /> </div> </form>


in gila.tmpl.






I have been having problems with the large size of the heading on the editing page.
This appears to be caused by the editing section of the PM Wiki? module being fixed to show H1.


This is the section of code:


<h1 class=‘wikiaction’>Editing (groupname.pagename)</h1>


I have changed this to:


<h2 class=‘wikiaction’>Editing (groupname.pagename)</h2>


Not only is the heading a better size, but it appears to have cured the large space between the Title and the Editing section.


Kevin Leech
Mar 13, 2005 20:30 GMT

Hi, this is a beautiful skin, but on editing a page, there’s a huge vertical gap between the top of the page and the edit box.  That is with Just Me?’s fix for the GU Iedit? bar installed.  IE6.  Seems to be related to jstr’s note below. Jan 12, 2005, 17:03 EST Paul B?


Fixed. -- thom?


Needs some changes to support PmWiki’s new guiedit button bar. NeilHerber? January 11, 2005, at 07:29 AM


Fixed. -- thom?


You need to add id=‘text’ to the textarea tag in beeblebrox-gila2/skin.php. That’s it to make guiedit working. January 11, 2005, at 19:17 GMT Just Me?


Fixed. --thom?



Access Key Skin? would be nice :)


Added (see above). --thom?


I noticed that on IE6 this skin does not work well with tables (but I want this skin, it’s really neat!): If you have a table its top will be aligned to the end of the sidebar. Is it possible to bring the content for the ‘middle area’ (sidebar and page content) into a table? (This is what PmWiki does.) I fixed the resulting HTML file of the output as rendered by GILA with a table like this and it works... (You will have to change the margin for #wikibody to 0.) Viewed with Mozilla Firefox there is no problem at all, but we have to use IE6 :-( Maybe this helps. --jstr


This is a feature, not a bug. I don’t want to use tables for the layout. --thom?


Suggestion 1:  Provide a default setting for $PageLogoFmt in a skin.php file distributed in pub/skins/beeblebrox-gila2.  For example, here’s the skin.php I used on pmwiki.org:
     <?php global $PageLogoFmt; SDV($PageLogoFmt,"<a href='$ScriptUrl'>Wiki<span>Title</span></a><br /> <span id='tag'>Subtitle</span>"); ?>


Fixed. --thom?


Suggestion 2: Change the width of the edit box to be 98%, via:


    #wikiedit textarea { width:99%; }


This is a very useful suggestion - I strongly advise implementing it, otherwise editing is a nightmare in a tiny textbox (tested on Firefox, Mozilla and Konqueror on SUSE 9.2 Pro) - Gareth H?


Fixed. --thom?


Suggestion 3: the sidebar needs some left-padding (see “PmWiki 2″ and “PmWiki 1.0″ show up against the edge of my browser window in Firefox)  --Pm?


Fixed. --thom?


To suppress the vertical space in the history page, you can add this lines in your gila.css :


 .difftype { clear:none; font-family:verdana,sans-serif; font-size:66%; font-weight:bold; } .diffrestore { clear:none; font-family:verdana,sans-serif; font-size:66%; margin:1.5em 0px; }


Thanks. I added this to gila.css. thom?



I think this skin looks so beautiful, EXCEPT for the colors, they’re not ugly by any means but not to my liking.  I know I know, it’s CSS and I can change that, but I’m not so good at coordinating colors myself, it requires figuring out what matches with what in the CSS, etc.  Anyone customized this with a good alternative?  Any possibility of bundling alternate color schemes with the skin? Aaron?



It seems the theme does not have control over the edit page and you must edit your pmwiki.php file as follows


<input type=‘submit’ name=‘post’ value=‘ Save ‘ />
<input type=‘submit’ name=‘preview’ value=‘ Preview ‘ />




<input type=‘submit’ name=‘post’ value=‘ Save ‘ accesskey=‘s’ />
<input type=‘submit’ name=‘preview’ value=‘ Preview ‘ accesskey=‘p’ />