[Pmwiki-users] New user ...

Patrick R. Michaud pmichaud
Sat Feb 21 16:24:01 CST 2004


On Sat, Feb 21, 2004 at 10:40:27AM -0500, Lee Corbridge, DVM wrote:
> 
> I have been looking at the code of PMWiki and to be honest with you ... 
> I can not see where I am suppose to be making my changes for 
> customization.  To put it lightly ... I'm 100 % totally lost in space 
> on this thing.  I have absolutely no idea as why I am pulling a blank 
> here but I am.

Hmmm, I'm sorry to hear that you're lost, but let's see if I can help
out a bit.  To change the layout, one simply sets the value of
$PageLayoutFmt[] and $PageSkin variables in a file named local/config.php.  
So, I built a sample layout for you (and others on the listserv) and will
use it as an example of the process.  You can see the finished
product at http://www.pmichaud.com/wiki/PetWiki/HomePage (compare to 
the original at http://www.allcritters.com/wiki/wakka.php?wakka=HomePage ).

Layout should be done in two phases: first, get all of the parts (content)
of the page together; second, use CSS to adjust the appearance of those
parts.

The .php configuration file I ended up with is at 
http://www.pmichaud.com/skins/skin-allcritters.php.txt (IE users may
have trouble viewing this file--IE thinks it's HTML even though the 
server sends it as text/plain and even if I put a .txt extension on it).
Essentially I just decomposed the page into its parts.  It doesn't have
a logo, so I turned that off with 

   $PageLayoutFmt['wikilogo'] = '';

I then set the 'wikihead' to be everything that appears at the top of the
page.  I went ahead and used a table to separate the QuickJump from the
links and title on the left.  I didn't bother to make the QuickJump
part functional since the purpose of this file is to demonstrate how to do
a custom layout, but it's pretty easy to see how it would be done.

After wikihead, I turned off 'wikileft', 'wikititle', and 'wikicmds'
because they aren't used in this layout.  I set 'wikiright' to contain
a div with the contents of the PetWiki.SideBar page.  Lastly, I set
'wikifoot' to contain everything at the bottom.

At this point I had all of the items structured and just needed to work
on the styling.  You can see what I had at this point at the URL
http://www.pmichaud.com/wiki/PetWiki/HomePage?skin=none .

>From here it was just a matter of setting the CSS properties to get the
look to match the original.  The properties file I came up with is
at http://www.pmichaud.com/pmwiki/pub/skins/allcritters.css .  First
I set the basic font styling based on the original:

    body { 
      font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
      color: #000000; 
    }

The body also has a border around it, so I fixed the margins and border on
the body. 

Next, the right panel is too wide, so I set its width to 180px and 
center-aligned all of its contents:

    #wikiright { text-align:center; width:180px; }

The #wikiright cell actually extends all the way from the header to the
footer, and we want the sidebar to be smaller than that.  This is the
reason for the <div> I created in #wikiright--I can easily set its borders
and background with

    .sidebar 
       { border:1px solid #575fad; background-color:#efefef; padding:5px; }

The padding keeps the sidebar content from running up next to the border.

Next I added borders and spacing to the header and footer components:

    #wikihead { border-bottom:2px solid #575fad; margin-bottom: 5px; }
    .footnav { 
      border-top:2px solid #575fad;
      border-bottom:2px solid #575fad;
      margin-top:1em; margin-bottom:1em;
      padding: 8px;
    }

then I fixed up the anchor links to appear without underlines and
visted links in read:

    a { text-decoration:none; }
    a:visited { color:red; }

then I added "font-size:smaller" to the blocks that should be displayed
with a smaller font.  Finally I removed the bottom margin from headings
to match the original more closely:

    h1,h2,h3,h4,h5,h6 { margin-bottom:0px; }

and that pretty much covers it except for some minor tweaking here and
there (e.g., setting $TimeFmt to match the time output on the original,
etc.).

How's that?  Does that help at all?

Pm



More information about the pmwiki-users mailing list