website baker tutorial
TRANSCRIPT
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.phpThe first step is simple enough:)
Insert Website Baker copyright noticeCopy 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 variablesHere'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:
1
<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 formThe 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:
<body> <div id="content"> <div id="top_info"> <span id="loginbutton">
2
<?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 sloganThe 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:
<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>
3
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 dynamicIn <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.
Repeat for the other two blocks so that the final code for the div is:
<div id="topics"> <div class="thirds"> <p><?php page_content(7); ?></p> </div> <div class="thirds"> <?php page_content(8); ?> </div> <div class="thirds"><?php page_content(9); ?> </div></div>
4
Add the Website Baker search fieldReplace:
<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 WBChange:
<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>
Add Website Baker news sectionThis 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)......
5
</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"><?php page_content(3); ?></div>
Three-column extended footer areaStill 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:
<div class="thirds"><?php page_content(9); ?></div><div class="thirds"><?php page_content(10); ?></div><div class="thirds"><?php page_content(11); ?></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:
6
<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"><?php page_content(5); ?></div>
Notes section at bottom of right sidebarIn <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"><?php page_content(6); ?></div> </div>
Note: This is the last content inside <div id="right">, so don't forget to add another closing </div>.
FooterThis footer contains both the bottom menu and the normal website credits.
Convert bottom menu to WBIn <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 />
7
</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
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
9
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.
10
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
ZipSelect 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.
UploadIn 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;
11
}
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; }
12