WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: FreeBSD4me on January 14, 2008, 07:25:11 PM
-
Hi All,
I currently use WebsiteBaker for personal use. I have been asked to manage a website at work. I'm not a web-guy, but now that it has fallen in my lap, I guess I am.
I must use a specific CSS template for my work site. I would like to use WebsiteBaker for our site, but I have failed miserably at trying to port the CSS template over to WB. It is a cool template, so it would make a great addition to the WB template gallery if someone is willing to help this noob navigate his way through to success.
I have followed the HOWTO and have made some progress, but I have hit a dead end. If you are interested in helping me convert this template to WB, please visit http://chaucer.homeunix.net/pages/downloads.php for a copy of the CSS template and my version of the WB template. You can also visit the official site which has fairly detailed information about the CSS template here: http://webtools.ca.gov/
Please email me if you are interested. v9jgvvx02@sneakemail.com
Thanks
-
I would like to use WebsiteBaker for our site, but I have failed miserably at trying to port the CSS template over to WB. It is a cool template, so it would make a great addition to the WB template gallery if someone is willing to help this noob navigate his way through to success...
WB is a good choice to do this.
As an advice for you, the only html you need to convert is sample3.html. Forget about the other 2 html files.
On the other hand, if you really understand what to do in order to bake a template, you will get there. Follow the instructions on the help sites.
Stefek
-
As an advice for you, the only html you need to convert is sample3.html. Forget about the other 2 html files.
Thanks for the tip Stefek.
Follow the instructions on the help sites
I have followed the the manual: http://help.WebsiteBaker.org/pages/en/advanced-docu/designer-guide/porting-an-existing-html-template.php (http://help.WebsiteBaker.org/pages/en/advanced-docu/designer-guide/porting-an-existing-html-template.php) but it is cleat that I don't know exactly what I am doing :-D
I'll continue to try until I succeed and I'll continue to manage a static website until then. I would appreciate it if someone could look at my template, compare it to the official template, and tell me where I am going wrong. I don't want someone to do the work for me, just hoping for an experienced second set of eyes to point out the obvious mistakes because I am making some obvious mistakes. I think my problem is with having multiple CSS files, but I could be wrong.
Attached below is my ported index.php, the rest of my stuff can be found here http://chaucer.homeunix.net/pages/downloads.php
Thanks
Chris
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<!-- WB page title -->
<!-- <title> <?php page_title(); ?> </title> -->
<!-- Advanced WB page title -->
<title><?php page_title('', '[WEBSITE_TITLE][SPACER][PAGE_TITLE]'); ?></title>
<!-- End Document Title -->
<meta http-equiv="Content-Type" content="text/html; charset=<?php
if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else
{ echo 'utf-8'; }?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<script type="text/javascript" src="javascript/navigation.js"></script>
<!-- Begin Style Information -->
<link rel="stylesheet" type="text/css" href="
<?php echo TEMPLATE_DIR; ?>/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="
<?php echo TEMPLATE_DIR; ?>/css/ca_master.css" media="screen" />
<link rel="stylesheet" type="text/css" href="
<?php echo TEMPLATE_DIR; ?>/css/navigation_2_level.css" media="screen" />
<link rel="stylesheet" type="text/css" href="
<?php echo TEMPLATE_DIR; ?>/css/content_3_column.css" media="screen" />
<link rel="stylesheet" type="text/css" href="
<?php echo TEMPLATE_DIR; ?>/css/color_scheme_03_eureka.css" media="screen" />
</style>
<!-- End Style Information -->
<!-- **************************************************************** -->
<!-- **************************************************************** -->
<!-- Begin JavaScript Variable to Set Active Tab -->
<!-- Change the "defaultMainList" value to match the name of the -->
<!-- page as listed in the navigation include unordered list -->
<script type="text/javascript">
<!--
var defaultMainList = "Link 2";
// -->
</script>
<!-- End JavaScript Variable to Set Active Tab -->
<!-- **************************************************************** -->
</head>
<body>
<!--#include virtual="ssi/heading.html" -->
<div id="navigation1">
<?php show_menu(1); ?>
</div>
<div id="navigation2">
<?php show_menu(2); ?>
</div>
<!-- ********** Left column begins ********** -->
<div id="left_column">
<!-- **************************************************************** -->
<!-- Begin Left Column Content - Put your right column content here -->
<!-- Begin Column Top -->
<a class="governor_website" href="http://gov.ca.gov/"><img src="images/ca_master/gov.jpg" alt="Governor Schwarzenegger" /></a>
<div class="left_column_top">
<!-- Put content here -->
<h3>Most Popular Links</h3>
<ul class="list_decorative_blue">
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
<li><a href="#">Link D</a></li>
</ul>
<!-- End content -->
</div>
<!-- End Column Top -->
<!-- Begin Column Bottom -->
<div class="column_inner">
<!-- Put content here -->
<h3>Related Links</h3>
<ul class="list_decorative_dark">
<li><a href="#">Link E</a></li>
<li><a href="#">Link F</a></li>
<li><a href="#">Link G</a></li>
<li><a href="#">Link H</a></li>
</ul>
<!-- End content -->
</div>
<!-- End Column Bottom -->
<!-- End Left Column Content -->
<!-- **************************************************************** -->
</div>
</div>
<!-- ********** Left column ends ********** -->
<!-- ********** Right column begins ********** -->
<div id="right_column">
<div class="column_inner">
<!-- **************************************************************** -->
<!-- Begin Right Column Content - Put your right column content here -->
<h3>Right Column</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a purus eget felis commodo ultricies. Nam quis purus. Morbi sodales velit in arcu. Suspendisse potenti. Cras eleifend tortor eu lacus. Ut accumsan malesuada ligula. Donec posuere ornare ipsum. Donec metus tellus, porta vel, volutpat at, eleifend nec, lacus. Aliquam gravida egestas nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque est. Praesent adipiscing rhoncus enim. Duis vulputate eros ac tellus. Quisque molestie magna ac orci. Phasellus iaculis euismod erat. Morbi placerat, felis a varius fermentum, lacus orci feugiat velit, vitae vulputate erat est at nibh. Fusce sollicitudin. Etiam nec sem eget lectus egestas mattis. Sed vel ligula. Nunc sed diam id sapien vulputate scelerisque.</p>
<!-- End Right Column Content -->
<!-- **************************************************************** -->
</div>
</div>
<!-- ********** Right column ends ********** -->
<!-- ********** Middle column begins ********** -->
<div id="middle_column">
<div class="column_inner">
<!-- **************************************************************** -->
<!-- Begin Amber Alert - Uncomment to turn on -->
<!--
<div id="amber_alert_on">
<a href="http://www.chp.ca.gov/html/amber-en.html"><img src="images/ca_master/amber_alert_on.gif" alt="Amber Alert is on. Please visit CHP's website for more information" width="580" height="57"/></a>
</div>
-->
<!-- End Amber Alert -->
<!-- **************************************************************** -->
<!-- **************************************************************** -->
<!-- Begin Middle Column Content - Put your primary page content here -->
<h2>Middle Column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque est. Praesent adipiscing rhoncus enim. Duis vulputate eros ac tellus. Quisque molestie magna ac orci. Phasellus iaculis euismod erat. Morbi placerat, felis a varius fermentum, lacus orci feugiat velit, vitae vulputate erat est at nibh. Fusce sollicitudin. Etiam nec sem eget lectus egestas mattis. Sed vel ligula. Nunc sed diam id sapien vulputate scelerisque.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a purus eget felis commodo ultricies. Nam quis purus. Morbi sodales velit in arcu. Suspendisse potenti. Cras eleifend tortor eu lacus. Ut accumsan malesuada ligula. Donec posuere ornare ipsum. Donec metus tellus, porta vel, volutpat at, eleifend nec, lacus. Aliquam gravida egestas nibh. Nulla et eros. Morbi convallis est luctus sapien. Nulla lorem neque, dapibus ut, euismod vel, vulputate tincidunt, augue. Ut sagittis aliquet urna. Donec eu sapien. Phasellus pulvinar, elit id placerat egestas, arcu ligula auctor eros, id tempus orci massa quis lectus. Sed diam. Etiam porta nibh sed lacus. Curabitur vel magna.</p>
<ul>
<li><a href="#">Link I</a></li>
<li><a href="#">Link J</a></li>
<li><a href="#">Link K</a></li>
<li><a href="#">Link L</a></li>
</ul>
<p>Nulla id ante. Vivamus nec elit. Vivamus sodales varius mi. Duis felis nisl, malesuada in, pretium sed, ultrices eu, pede. Aenean nec odio. Praesent viverra, elit sit amet consequat scelerisque, quam erat malesuada lacus, a aliquet metus purus vel lectus. Maecenas at diam. Morbi vitae nulla quis ligula luctus egestas. Ut dignissim. Aliquam erat volutpat. Vestibulum volutpat lorem et eros. Nulla viverra lectus eu neque. Vivamus tempus quam sit amet turpis. Mauris vel arcu sit amet lacus ultrices porttitor. Ut erat. Pellentesque ac ipsum. Donec accumsan velit et leo. Curabitur non arcu.</p>
<!-- End Middle Column Content -->
<!-- **************************************************************** -->
<!-- **************************************************************** -->
<!-- Begin FYP and AA Ads -->
<div class="statewide_banners">
<div>
<strong>Visit the Flex Your Power Website</strong>
<a href="http://www.fypower.org/"><img src="images/ca_master/flex_your_power.gif" alt="Saving Energy. It's a Way of Life." /></a>
Energy efficiency and conservation information. Find incentives/rebates, technical assistance, retailers, product guides, case studies and more.
</div>
<div>
<strong>Save a child with AMBER ALERT</strong>
<a href="http://www.chp.ca.gov/html/amber-en.html"><img src="images/ca_master/amber_alert.gif" alt="Amber Alert logo." /></a>
AMBER ALERT empowers law enforcement, the media and the public to combat abduction by sending out immediate information.
</div>
</div>
<!-- End FYP and AA Ads -->
<!-- **************************************************************** -->
</div>
</div>
<!-- ********** Middle column content ends ********** -->
<div class="cleaner"> </div>
</div>
</div>
<div class="cleaner"> </div>
<!--#include virtual="ssi/footer.html" -->
</body>
</html>
-
The mutiple css files is indeed going to be a administrative nightmare.
What I would do is find a template that has been already created for WB with the same layout as what you want and modify this to look like what you need.
If you use IE there is a plugin called IE Developer toolbar.
With this you can see all the DIV's and also the css code atached to it from sample3.html
There is also a plugin for firefox that does the same.
-
The mutiple css files is indeed going to be a administrative nightmare
Multiple css files won't have to be a nightmare and if they are just copy - paste them into one ;)
John