Context Navigation

Tutorial: Porting an html template to Website Baker

Section 1--Editing the index.html file

I've chosen to use solucija.com's Internet Broadcast css-based template for this tutorial. You can view the demo and download the files here. The finished template's zip file is here.

Required Knowledge Level: This tutorial is for someone with a basic understanding of html and css. In most cases, you just need to replace html with Website Baker php code. If you can cut and paste, you can port a template--you don't need to understand the php. You might have some trouble customizing the advanced features, say with menus, but you can get by. This actually ended up being one of the most complicated layouts I've seen ported to Website Baker, so maybe it will help you learn how to deal with some challenges advanced layouts can bring. It also illustrates the versatility of Website Baker.

Rename file from index.html to index.php

The first step is simple enough:)

Insert Website Baker copyright notice

Copy the following and paste it above the doctype info at the very top of the file.

<?php

// $Id: index.php 310 2006-02-19 05:31:10Z ryan $

/*

Website Baker Project <http://www.websitebaker.org/>
Copyright (C) 2004-2006, Ryan Djurovich

Website Baker is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

Website Baker is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Website Baker; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

*/

?>

Replace HEAD section html with Website Baker variables

Here's the original:
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="author" content="Luka Cvrk (www.solucija.com)" />
    <meta name="description" content="My Site" />
    <meta name="keywords" content="key, words" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <title>Internet Broadcast · We share the relevant.</title>

Website Baker version:

<head>

</head>

Add Website Baker login form

The following Website Baker code should be placed after <span id="loginbutton">. Delete the text and hard-coded links.

<?php
        if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb->get_session('USER_ID') == '') {
        ?>
        <form name="login" action="<?php echo LOGIN_URL; ?>" method="post" class="login_table">
            <h2><?php echo $TEXT['LOGIN']; ?></h2>
            <?php echo $TEXT['USERNAME']; ?>:
            <input type="text" name="username" style="text-transform: lowercase;" />
            <?php echo $TEXT['PASSWORD']; ?>:
            <input type="password" name="password" />
            <input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" style="margin-top: 3px; text-transform: uppercase;" />
            <a href="<?php echo FORGOT_URL; ?>"><?php echo $TEXT['FORGOT_DETAILS']; ?></a>
                <?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
                    <a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
                <?php } ?>
        </form>
        <?php
        } elseif(FRONTEND_LOGIN == 'enabled' AND is_numeric($wb->get_session('USER_ID'))) {
        ?>
        <form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post" class="login_table">
            <h2><?php echo $TEXT['LOGGED_IN']; ?></h2>
            <?php echo $TEXT['WELCOME_BACK']; ?>, <?php echo $wb->get_display_name(); ?>
            <br />
            <input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
            <br />
            <a href="<?php echo PREFERENCES_URL; ?>"><?php echo $MENU['PREFERENCES']; ?></a>
            <a href="<?php echo ADMIN_URL; ?>/index.php"><?php echo $TEXT['ADMINISTRATION']; ?></a>
        </form>
        <?php
        }
        ?>

This section should look like this when you're done:

                <?php
       if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb->get_session('USER_ID') == '') {
       ?>
       <form name="login" action="<?php echo LOGIN_URL; ?>" method="post" class="login_table">
           <h2><?php echo $TEXT['LOGIN']; ?></h2>
           <?php echo $TEXT['USERNAME']; ?>:
           <input type="text" name="username" style="text-transform: lowercase;" />
           <?php echo $TEXT['PASSWORD']; ?>:
           <input type="password" name="password" />
           <input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" style="margin-top: 3px; text-transform: uppercase;" />
           <a href="<?php echo FORGOT_URL; ?>"><?php echo $TEXT['FORGOT_DETAILS']; ?></a>
               <?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
                   <a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
               <?php } ?>
       </form>
       <?php
       } elseif(FRONTEND_LOGIN == 'enabled' AND is_numeric($wb->get_session('USER_ID'))) {
       ?>
       <form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post" class="login_table">
           <h2><?php echo $TEXT['LOGGED_IN']; ?></h2>
           <?php echo $TEXT['WELCOME_BACK']; ?>, <?php echo $wb->get_display_name(); ?>
           <br />
           <input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
           <br />
           <a href="<?php echo PREFERENCES_URL; ?>"><?php echo $MENU['PREFERENCES']; ?></a>
           <a href="<?php echo ADMIN_URL; ?>/index.php"><?php echo $TEXT['ADMINISTRATION']; ?></a>
       </form>
       <?php
       }
       ?>

Add the Website Baker site title and slogan

The next div is <div id="logo">. To add the Website Baker site title, replace

<h1><a href="#" title="We share the relevant.">Internet Broadcast</a></h1>

with

<h1><a href="<?php echo WB_URL; ?>/" target="_top"><?php page_title(); ?></a></h1>

To add the Website Baker site slogan, replace We share the relevant. with

<?php page_description(); ?>

The <div id="logo"> should now look like this:

<h1><a href="<?php echo WB_URL; ?>/" target="_top"><?php page_title(); ?></a></h1>
<p id="slogan"><?php page_description(); ?></p>
</div>

Add the Website Baker menu code for the top menu

This is the next div:

<ul id="tablist">

Replace the html code with the Website Baker code, so delete:

<li><a class="current" href="#" accesskey="n"><span class="key">N</span>ews</a></li><li><a href="#" accesskey="b"><span class="key">B</span>logs</a></li><li><a href="#" accesskey="p"><span class="key">P</span>hotos</a></li><li><a href="#" accesskey="r">P<span class="key">r</span>ofiles</a></li><li><a href="#" accesskey="f"><span class="key">F</span>eeds</a></li><li><a href="#" accesskey="o">Br<span class="key">o</span>adcast News</a></li>
</ul>

And put this in its place:

<?php show_menu(2,0,-1,false); ?>

The result should look like this:

Make the top menu lists dynamic

In <div id="topics">, replace

<div id="topics">
<div class="thirds"> <p><br />Today's Popular Articles and Posts:</p>
</div>

So you get:

Note: I made this content block #2 because I like to save page_content() for the main text area. I also deleted the <br /> so everything lines up better in the box.

Repeat for the other two blocks so that the final code for the div is:

Add the Website Baker search field

Replace:

With:

<div id="search">
<?php if(SHOW_SEARCH) { /* Only show search box if search is enabled */ ?>
<form name="search" action="<?php echo WB_URL; ?>/search/index<?php echo PAGE_EXTENSION; ?>" method="post">
<input type="text" name="string" style="width: 100px;" />
<input type="submit" name="submit" value="Search" style="width: 80px;" />
</form>
<?php } ?>
</div>

Convert subheader to WB

Change:

<div id="left">
<div class="subheader">
<p><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>

To:

Add Website Baker news section

This will be the main content area. If you want to mimic the original layout exactly, make this a "news" section in the "manage sections" of the WB page menu.

<div id="left">

..... (subheader div is here).....

<div class="left_articles">
<h2>Today's Featured Article</h2><p class="date">Posted on 8th September</p><img class="bigimage" src="images/bigimage.gif" alt="Big Image" /><p><a href="#">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>

...... (skipped more dummy text)......

</div>

Becomes:

..... (subheader div is here).....

<div class="left_articles">
<?php page_content(); ?>
</div>

Left column gray footer (to the main content area)

<div class="left_box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
</div>

Becomes:

Three-column extended footer area

Still in the "left" div, the following is repeated three times in the original html, once for each of the three columns:

<div class="thirds">
<p><b><a href="#" class="title">Web 2.0 business startup tips</a></b><br />Lorem ipsum dolor sit amet esta pa, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. <a href="#"><img src="images/comment.gif" alt="Comment" /></a></p>
</div>

Becomes:

Notes: This is the last content inside <div class="left_articles">, so don't forget to add another closing </div> after "thirds".

Right sidebar area

In the same way, the right sidebar boxes are repeated three times:

<div class="right_articles">
<p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
</div>

Instead of repeating the divs to make separate boxes, since the column is vertical I'm just going to have one box. But you can repeat them if you want. Just remember to define each block in the info.php file. So the updated code looks like this:

Notes section at bottom of right sidebar

In <div id="right">,

<div class="notes">
<p>If you liked this template you might like some other <a href="http://templates.solucija.com/">free CSS templates</a> from <a href="http://www.solucija.com/">Solucija</a>.</p>
</div>

Becomes:

</div>

Note: This is the last content inside <div id="right">, so don't forget to add another closing </div>.

Footer

This footer contains both the bottom menu and the normal website credits.

Convert bottom menu to WB

In <div id="footer">, replace the hard-coded menu:

<a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a href="#">Accessibility</a> · <a href="#">Products</a> · <a href="#">Disclaimer</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a>

with <?php show_menu(2,0,-1,false); ?>

Then change to website credit:

<p class="right">
© 2006 Internet Broadcast, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a></p><p><a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a href="#">Accessibility</a> · <a href="#">Products</a> · <a href="#">Disclaimer</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
</p>
</div>

You can edit this however you want, but a link/attribution is always appreciated:

<div id="footer">
<p class="right">Design © 2006 | Luka Cvrk - <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a> | Ported to Website Baker by <a href="http://www.robcomm.net">Valerie Robinson--RCC Creative</a></p>

<p><a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a href="#">Accessibility</a> · <a href="#">Products</a> · <a href="#">Disclaimer</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br /></p>
</div>

Tutorial: Porting an html template to Website Baker

Section 2--Editing the info.php file

Copy an existing info.php file and write in the custom values for this template. I'll use the info.php file from my port of What's Your Solution, another solucija.com template.

Original code:

<?php

// $Id: info.php 310 2006-02-19 05:31:10Z ryan $

/*

Website Baker Project <http://www.websitebaker.org/>
Copyright (C) 2004-2006, Ryan Djurovich

Website Baker is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

Website Baker is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Website Baker; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

*/

$template_directory = 'wys';
$template_name = 'Whats your Solution - WB';
$template_version = '2.6';
$template_platform = '2.6.x';
$template_author = 'Valerie Robinson, robcomm.net';
$template_license = 'GNU General Public License';
$template_description = 'business template by solucija.com ported to WB by Valerie Robinson. Uses WBs feature of multiple blocks and menus';
$block[2]='bluebar';
$block[3]='center bottom left block';
$block[4]='center bottom right block';
$block[5]='left column block';
$menu[2]='vertical menu';
?>

Edited code (without repeating the license info):

$template_directory = 'ibroadcast';
$template_name = 'Internet Broadcast - WB';
$template_version = '2.6';
$template_platform = '2.6.x';
$template_author = 'Valerie Robinson, http://www.robcomm.net';
$template_license = 'GNU General Public License';
$template_description = 'solucija.com ported to WB by Valerie Robinson. Uses WBs feature of multiple blocks and menus';

$block[2]='subheader text';
$block[3]='main block footer';
$block[4]='right sidebar;
$block[5]='right sidebar notes;
$block[6]='top menu box--left';
$block[7]='top menu box--middle';
$block[8]='top menu box--right';
$block[9]='bottom box1';
$block[10]='bottom box2';
$block[11]='bottom box3';
$menu[2]='bottom menu';
?>

The graphic below shows the different blocks defined in the info.php file labeled on the layout.

Tutorial: Porting an html template to Website Baker

Note: You can switch and edit the css in section 4 before zipping (section 3) if you want to avoid reuploading and rezipping. I use WB's template edit module, so I do step 3 first and then step 4 which is to edit the css file in the WB admin.

Section 3--zip finished template files

Zip

Select your template files and zip. Make sure that these are what you select, NOT the folder containing these files. WB will create a folder on your server to put these in.

template files for zipping

Upload

In the WB admin, go to add-ons>templates and upload your zipped file.

You did it! Well, almost. I had to tweak the style.css file to get the top menu to display right. I'll briefly show you what changes were necessary in Section 4.

Section 4--Tweak css to make WB use all the css from the original file.

Style.css

The only changes I made were in the tablist section.

First, I had to tie WB's showmenu with the original menu styling. The current-page code wasn't being "seen" by WB so I changed

#tablist li a.current

{

background: #9FC7D8 url(images/corner.gif) no-repeat top right;

color: #2F637A;

padding: 6px 22px;

}

to #tablist li a.menu_current

Last, in the news boxes under the top menu, the unordered list WB was using the styling intended for the menu tabs.

So I added some styling that is specific and will only apply to lists in the .thirds area not in the the menu itself:

#tablist .thirds li a { text-decoration: underline; color: #2F637A;

background: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left;

}

#tablist .thirds li a:hover { color: #808080; background: inherit; }

Download in other formats:

Plain Text