Website Baker Tutorial

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>
1
Website Baker version:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php
if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content=" <?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<meta name="author" content="Valerie Robinson- http://www.robcomm.net
for Website Baker / Original design by http://www.solucija.com" />
<link href="<?php echo TEMPLATE_DIR; ?>/style.css" rel="stylesheet" type="text/css"
media="screen" />
<title><?php page_title(); ?></title>
</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"
<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
}
?>
2
This section should look like this when you're done:
<body>
<div id="content">
<div id="top_info"> <span id="loginbutton">
<?php
if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb-
>get_session('USER_ID') == '') {
?>
<form name="login" action="<?php echo LOGIN_URL; ?>" method="post"
<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"
<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>
3
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:
<div id="logo">
<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:
<ul id="tablist">
<?php show_menu(2,0,-1,false); ?>
</ul>
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:
<div id="topics">
<div class="thirds">
<p><?php page_content(2); ?>:</p>
</div>
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.
4
Repeat for the other two blocks so that the final code for the div is:
<div id="topics">
<p><?php page_content(7); ?></p>
</div>
<div class="thirds"> <?php page_content(8); ?>
</div>
<div class="thirds"><?php page_content(9); ?>
</div>
</div>
Add the Website Baker search field

Replace:
<div id="search">
<form method="post" action="?"><p><input type="text" name="search" class="search" />
<input type="submit" value="Search" class="button" /></p>
</form>
</div>
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:
<div id="left">
<div class="subheader">
<?php page_content(2); ?>
</div>
</div>
5
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:
<div id="left">
..... (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:
<div class="left_box">
</div>
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:
<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:
6
</div>
</div>
</div>
</div>
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:
<div class="right_articles">
</div>
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 class="notes">
</div>
</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.
7
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>
8
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';
9
$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';
$menu[2]='bottom menu';
?>
The graphic below shows the different blocks defined in the info.php file labeled on the layout.
10
11
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.
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;
12
}
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; }
13

Website Baker Tutorial

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Website Baker Tutorial

Caricato da

Copyright:

Formati disponibili

Tutorial: Porting an html template to Website Baker

Section 1--Editing the index.html file

Rename file from index.html to index.php

Insert Website Baker copyright notice

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

Website Baker Project <http://www.websitebaker.org/>

Website Baker is free software; you can redistribute it and/or modify

Website Baker is distributed in the hope that it will be useful,

Replace HEAD section html with Website Baker variables

Add Website Baker login form

Add the Website Baker site title and slogan

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

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

<?php page_description(); ?>

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

This is the next div:

<li><a class="current" href="#" accesskey="n"><span

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

Add the Website Baker search field

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

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

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

Left column gray footer (to the main content area)

Three-column extended footer area

Right sidebar area

Notes section at bottom of right sidebar

<a href="#">RSS Feed</a> &middot; <a href="#">Contact</a> &middot; <a

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

Then change to website credit:

<p><a href="#">RSS Feed</a> &middot; <a href="#">Contact</a> &middot; <a

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

Website Baker Project <http://www.websitebaker.org/>

Website Baker is free software; you can redistribute it and/or modify

Website Baker is distributed in the hope that it will be useful,

Edited code (without repeating the license info):

then step 4 which is to edit the css file in the WB admin.

Section 3--zip finished template files

The only changes I made were in the tablist section.

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

padding: 6px 22px;

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

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

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

Potrebbero piacerti anche

<a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a

<p><a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a