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

A bit modern skin

  • PmWiki port of the oswd.org template of the same name
  • Top menu is populated by $Group.PageActions and $SiteGroup.PageActions

Files

This recipe was last tested on PmWiki version: 2.0.12
2005-12-01: Initial release
2005-12-07: abitmodern.zipΔ Add css for highlighting current page in the menu.

Comments

Muted tones and greys. Sets up nicely for a wiki, blog, or homepage.

See Also

Screen shotΔ

Contributors

ksc

Feedback and Questions

I love this skin, but I really want the whole thing to wider. (by about 30%) otherwise i feel like i'm wasting too much valuable screen real estate. any advice? Thanks! ~lindsey2

Some editing of abitmodern.css - body and #wrapper ... width: 900px; (actual) plus editing of images/background.gif and images/header.gif required . ~martin

How to change the Style of a horizontal ine?

This looks like a data entry field ...

Default folder for images

  • Assuming i run www.christensen-wiki.com and have full control of it what directory structure do I put the skin images in so the script that says images/image1.jpg will work without rescripting?

Menu Bar

  • Great skin--thank you. The Title shows always shows in lower case! Any idea why? Also, how can I remove the phrase "home page" which shows under the title?
    • Have a look in README.txt:
    If you don't like the site name and page name lowercased, replace $title with $WikiTitle and $currentpage with $Namespaced in abitmodern.tmpl.
  • Is it possible to add a search box in the Menu Bar?
  • Just a hint: If jou dislike to emphasize vistors to page actions for it was more for your own resources, just change #page-actions li a { text-decoration: none; color: #777; . . .
This hides the MenuBar but let it show on hover. Sample: My Page ~martin
  • This awesome skin breaks in 800x600 resolution in Opera browser (was latest build), and Mozilla FireFox (was latest build). It does not break in 800x600 in Internet Explorer. Yes I know 800x600 is obsolete but any work arounds? Oh I found it will also break in Opera when certain browser side bars are enabled etc, thus reducing effective resolution even in 1024x768
    • you can use this hack, just edit the css file: 
      html, body {
        min-height: 100%;
}

* html, * body {
        min-height: 100%;
}
  • How do I add the edit action link to the menu bar?
    • Just go to Site.PageActions&action=edit or you can add/edit on a per group basis i.e.; edit MyGroup.PageActions
  • Perhaps (i think for sure) I just didn't find it, but could we get the current page view link highlighted. Not just the hover. It's also, that I realize it is not a problem of the skin at all, but with this skin it really would better fit, if not just a hover in the sidebar links happens, but also the sidebar link we currently we're currently on would be highlighted. thanks in advance, nice skin! (cp)
    • Yeah, I debated about this. On the one hand items in a wiki system menu are really just top-level entry points into the rest of the wiki. The moment you follow a link that is only within the wiki and not an item on the menu the highlight in the menu will disappear because there will be nothing to highlight in the menu. This creates inconsistency in the visual cues of the design - sometimes there's a highlight in the menu for the current item and sometimes not. I have enabled it in the 12-07 release but if you find, as I do, it creates inconsistencies you'd prefer not to have simply comment out or delete the #sidebar a.selflink in the abitmodern.css.
  • Awesome skin! Thanx for sharing! --hartwork
  • To fix the IE bug(2) I removed the last <div class='clearfix'></div> So far I haven't seen any negative side effects in IE or Mozilla. ~Ryan
  • (hugo) Don't know why but layout breaks in some page on my site with IE (firefox don't have any problem) :
    It's because you have some large images displayed inline. For most pages it is either this, or some large preformatted text, or else a large URL address, and the whole page becomes larger. --Petko

Wow! The second skin of yours I've loved and used! One thing that worries me is the lack of site-wide History, which you have in (Not so) Simple. I like to see with a click what has been edited recently, and I can't seem to figure that out. Any help on this one? ~Katie

  • Could I put an image (logo) in the black space on the upper-left corner? ~Maximo
    • Yes you can. Just edit the header.gif to your gusto, rename, thats it:) ~I.K.

Bugs

  • the site's header shows readitle instead of my wiki's title, and centerurrentpage instead of the page's title. Is this a bug or do just I have this problem?
  • The (:title:) page directive doesn't seem to work.
  • The seperator ---- for a horizontal line produces two lines with a filled square at the right end (both in Firefox and IE):
  • This isn't a bug. you can fix it in the CSS by deleting the current hr section and uncommenting the one-line one.
  • a new link in the SideBar is resolved on two link lines, the second with the ?. I didn't find out why. -PatrickOgay
  • When viewing this skin on IE, the bottom 1/8" of each page appears to be jogged right about 2 or 3 pixels?
    • A hacked solution to this problem is to add the following three lines to abitmodrern.css under the #content section: 
    _position: absolute;
    _height: 90%;
    _background: #92847b url(images/background.gif) top center repeat-y;
  • Each link directly under a top-level entry doesn't appear to highlight or get the little triangle correctly. All others appear to work.
  • Last strange bug can be fixed by adding "width=98%;" in abitmodern.css to "#sidebar ul li a{".
    • I find that throws the hover highlighting a bit out of whack. Better to use width:97.5% or, more accurately, width:167px.
  • The text layer doesn't fit the background images with Opera 8.5, the text gets over the boundaries of the background image. This should be some CSS stuff, but I don't know CSS well enough.
  • Problems with IExplorer 7 (text layer not matching) can be solved by editing "abitmodern-ie.css": 
#head { 
    position: relative;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    width: 900px;
    margin: 0px auto;
}
#col-left {
    position: relative;
    float: left;    
    width: 171px;
	  margin: 15px 0px 0px 40px;
}
#col-right {
    position: relative;
    float: left;    
    width: 600px;
    margin: 20px 0px 0px 20px;
}
.quickref { width: 97% }
  • this last fix works fine, but leaves you with having to choose between supporting IE6 or IE7. Is there an easy way of supporting both?
  • u can change the script in the tmpl file to support both IE6 and IE7 :
    browser_type = navigator.appName;
    ver = navigator.appVersion;
    thestart = parseFloat(ver.indexOf("MSIE"))+5;
    browser_version = parseFloat(ver.substring(thestart,thestart+3));
    if (browser_type == "Microsoft Internet Explorer" && browser_version <= 6) {
    document.write("<link href='$SkinDirUrl/abitmodern-ie.css' rel='stylesheet' type='text/css' />"); 
	}
  • Alternatively, you can replace the Javascript with conditional comments, which is arguably easier to follow. This is what's in my template: 
         <link href="$SkinDirUrl/abitmodern.css" rel="stylesheet"
         type="text/css" title="A Bit Modern" />
         <!--[if IE]>
         <link href="$SkinDirUrl/abitmodern-ie.css" rel="stylesheet"
         type="text/css" />
         <![endif]-->
         <!--[if IE 6]>
         <link href="$SkinDirUrl/abitmodern-ie6.css" rel="stylesheet"
         type="text/css" />
         <![endif]-->
         <!--[if IE 7]>
         <link href="$SkinDirUrl/abitmodern-ie7.css" rel="stylesheet"
         type="text/css" />
         <![endif]-->
Then, collating all the above bug-fixes, I have the following CSS:
Add this to the bottom of abitmodern-ie.css: 
         #sidebar ul li a { 
           width: 167px;
         }
         #content {
           position: absolute;
           height: 90%;
           background: #92847b url(images/background.gif) top center repeat-y;
         }
Then create these files:
abitmodern-ie6.css: 
         #col-left {
           margin: 15px 0px 0px 20px;
         }
         #col-right {
           float: right;    
           margin: 15px 31px 0px 0px;
         }
abitmodern-ie7.css: 
         #col-left {
           margin: 15px 0px 0px 40px;
         }
         #col-right {
           float: left;    
           margin: 20px 0px 0px 20px;
         }
Works like a dream.
Cheers.
~ Squander Two
  • the buttons View/Edit/History/Attach/Print/Backlinks disappear when I install this skin. Furthermore, the menu needs to be redone for each group separately (under previous skin it was one for all). I can do manually the latter (it's just copy and save under proper names), but I cannot seem to cope with the first. Can anyone help?
  • WikiSandbox.This&That?
Category: Skins