Embedding in existing CSS website

[don0don]

Hi, all!

Please have patience with me, I'm very new at this ...

I have a CSS-based website built using an Allwebco template. I want to incorporate Serendipity into the existing template. I have a Flash intro page, but this is my actual Home Page:

http://www.pc-handyman.net/home.html

I'd like the blog to appear on a page that looks exactly like the Home Page, with the blog content falling in the same place as the "I'm your computer guy in New Hampshire's Lakes Region" text.

Serendipity is installed on the server. How can I create a page in the /serendipity directory that will use the same CSS stylesheets as all the other pages on the site, but embed the Serendipity blog code in it?

I'm assuming you can examine the source code for the Home Page to see how the CSS stylesheets are being invoked. If you need me to post some of the code, let me know.

Thanks, in advance, for your help with this.

[yellowled]

Serendipity is installed on the server. How can I create a page in the /serendipity directory that will use the same CSS stylesheets as all the other pages on the site, but embed the Serendipity blog code in it?

Installation might have been a bit premature, because in the end you might (I said "might"! Don't do anything hasty now! ) need to re-install Serendipity.

I have no experience with this whatsoever, which is why I will keep my 2 cents on this short, but in the end you'll probably want what the good folks here in s9y country call an embedded installation (can't hurt to also search this forum for that particular term).

As I said, I have never used this myself, but I'm sure other people will fix you up with advice on this, just give them some time

YL

[Don Chambers]

While it is possible to do exactly what you asked, most find that it is simply easier to port their existing HTML design to a serendipity smarty template.

Or better yet, I look at your site, and see the possibility to completely eliminate whatever created those html pages and replace the entire thing with serendipity... your existing pages could be converted to static pages and you end up maintaining your entire site with serendipity which gets installed at the root level rather than in a subfolder.....

.... but that's not what you asked...

So, if you want to investigate the painful embedding option, see here: http://www.s9y.org/123.html. I have done it a few times, and it does work, but I really prefer either of the two options above.

[don0don]

Well, just so that I have some idea of the amount of work involved, how would I go about "port[ing] [my] existing HTML design to a Serendipity smarty template"?

Thanks!

Don

[Don Chambers]

You can begin to understand what a serendipity smarty template looks like by looking at any of the existing /templates/folders... For example, look at /templates/carl_contest/ and specifically, the file index.tpl. You will see a mix of HTML and {smarty code}. The template also has a stylesheet, which is style.css, some preview images, and an info.txt file, and a few additional smarty templates. The only thing that is really required for a unique template is info.txt and style.css. Preview images are handy, but not technically required.

What I do is capture the HTML output from an existing site, then work in the required smarty elements. You can then also capture your site's css and copy it into your own template's style.css. Your css will need a bit more work though because serendiipity will be emitting lots of id's and classes that your base site is not.

You COULD also use one of the existing template's style.css (like carl_contest above, or default) as a starting point, add in your existing site's css, then modify as needed/desired.

[don0don]

I would really rather embed the Serendipity in my existing site.

I have followed the instructions given here: http://www.s9y.org/123.html . I have created a wrapper.php file, which reads:

<?php
ob_start();
chdir("/serendipity");
require("index.php");
chdir("/..");
$serendipity_contents = ob_get_contents();
ob_end_clean();
?>

(Serendipity is installed in the /serendipity directory; the wrapper.php file is in the root of the web site, which is where the calling page -- blog.htm -- also resides.

I added the following at the top of the blog.htm:

<?php
require("wrapper.php"); // stores S9Y in a variable
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

etc., etc.

... and added the following within the appropriate table where I want the Serendipity content to appear:

<?php
echo $serendipity_contents; // Print the variable
?>

Through Serendipity admin, I turned on embedding, but left the plugins alone for the moment.

At present, I am getting none of the Serendipity content on the blog.htm page.

http://www.pc-handyman.net/blog.htm

What am I doing wrong?

[Don Chambers]

Whew, its been awhile since I did an embedded install.... and I do not have a ton of time to dig into this right now... however, the first thing that caught my attention is that you said...

I added the following at the top of the blog.htm:

<?php
require("wrapper.php"); // stores S9Y in a variable
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

What do you expect to happen when you insert php code into an htm document?

I cannot recall if your index file has to be specified or not in an embedded install. If so, make that file blog.php and specify it as such in serendipity's configuration.

Also, I'm not entirely sure, but in your wrapper, I think your chdir folder should be serendipity/, not /serendipity ie chdir("serendiptiy/");

Again, short on time, I have only done this a few times, and everyone seems to have headaches when they do it.

Also remember to search the forums here for embedded installs... there are several threads where people have discussed what worked, and what did not work.

[don0don]

Well, the page of instructions said:

"...If you want the Serendipity output anywhere other than at the top of the file, you'll need to store the output in a variable and use it later. Here's an example:

<?php
require("wrapper.php"); // stores S9Y in a variable
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
Your non-Serendipity content goes here.
<?php
echo $serendipity_contents; // Print the variable
?>
More non-Serendipity content here.
</body>
</html> "

Which, I believe, constitutes instruction on how to insert PHP code into an HTML document. What I expect when I do that is that the PHP code will be executed when the web server reads it.

You said:

"I cannot recall if your index file has to be specified or not in an embedded install. If so, make that file blog.php and specify it as such in serendipity's configuration."

Which "index file" are you talking about? And what file should I make "blog.php"?

And your remark about the chdir command is incorrect. The forward slash represents the root -- the serendipity directory is below the root, not above it.

[Don Chambers]

Sorry don0don - I am doing the best I can here.... I do not currently have access to any of the embedded installs I did, and I warned you that this is difficult at best to achieve.

php is NOT going to get parsed in an html file.... so problem #1 is to rename blog.htm to blog.php. I also think your hyperlink to the blog page should also be blog.php.

As far as the paths, I meant that I think the leading "/" was not correct, but do not know for sure. To be safe, I would try a full absolute path, ie http://www.pc-handyman.net/serendipity/

That's about as much as I can suggest for now. Hopefully Garvin, or someone else with better embedding experience than mine will chime in. I will TRY to gain access to the embedded installs I have done tomorrow. As I warned you earlier, I personally think embedding should be done as a last resort - we simply have better options in the recent versions of serendipity that make maintaining a site in the long run much easier.

[don0don]

Don -- I sincerely apologize if I have given you the impression I am ungrateful for your help, or in any way dissatisfied with it. That's certainly not the case. I am well aware that the problems I am having are entirely a result of my own ignorance. So, I am hardly in a position to be either ungrateful or impatient.

When I change the file extension from blog.htm to nlog.php, all I get is a blank page with these few characters at the top left corner:



Looking at the page source, it is clear that parsing of the page stopped the moment it hit the first PHP code -- i.e., the calling of the wrapper.php file.

Now what?

[Don Chambers]

I'm hoping that our lead developer Garvin will review this thread and provide the answer.... If not, I can continue to try solutions, but I will need ftp access.. you can send me those credentials via PM if you want me to dig deeper.

Again, I wish to express the fact that embedded installs are a bit challenging.... and while I done countless dozens of NOT EMBEDDED installs without a problem, I have only done a few embedded, and each takes a bit to tweak.

Having said that, I still think some of the suggestions above will actually solve the problem.

I need to say good night for this evening, and hopefully I will see this tomorrow morning and provide the correct response. There is also a good chance someone else will step in and provide the solution. I'm done for the day. I will review this thread tomorrow, and hopefully have better ideas.

[garvinhicking]

Hi!

Sadly I've been caught off by a flu and am not able to write up anything nice on that topic.

However, the "embed" installation is really both an old crook, and something for advanced PHP developers to toy with. It was built at a time where Smarty templating was not yet available, to get something "templateable" at all.

Nowadays, the really ideal way is to create your own index.tpl template that simply looks like the HTML that you use, referencing your usual Stylesheets and also loading the serendipity template's CSS stylesheet for some compatibility of serendipity entries, etc. This is very little overhead to pour your existing HTML body and footer into a s9y .tpl file (base it off the templates/default/index.tpl, which is easiest to read). In the end, the performance of this is MUCH better than the embed solution, you don't have to woe with PHP code, and you are much easier to utilize serendipity plugins.

Is there anything that would disallow going that route? If so, we certainly can get embed mode to work next week, when I'm on my feet (and hands) again, but meanwhile, Smarty templates is the easiest way to go -- even if you have never heard ot Smarty before, you actually don't really need that much knowledge if you follow the basic HTML of the serendipity default template, and simply structure your existing HTML into that...

HTH,
Garvin

[don0don]

Hi, Garvin!

Sorry to hear that you've got the flu. I am just getting over a severe cold, myself -- and my wife is still sick with the same cold. I just sent her off to the sauna to cook the cold out of her. Seems to be a lot of flu and colds going around, all over the world, these days. I hope you are completely well very soon.

I am willing to consider using the Smarty templates for my blog pages, but I am just unsure how to do it. Are there any step-by-step instructions I can follow?

Thanks!

[garvinhicking]

Hi!

Okay, let's try to do a quick walkthrough.

First, you create a new directory in /serendipity/templates/, let's call it /serendipty/templats/handyman/. Inside that directory, you copy the file /serendipity/templates/info.txt, /serendipity/templates/index.tpl and /serendipity/templates/style.css.

Second, you edit the info.txt file, to give your template a unique name. Change "Name: Serendipity v2.3" to "Name: Handyman".

Third, you need to edit the index.tpl file to suit your needs. Open it in a text editor. First thing to do in this file is to copy the important parts of the HTML head area into a temporary, clean and fresh file, those are:

Code: Select all

    <title>{$head_title|@default:$blogTitle} {if $head_subtitle} - {$head_subtitle}{/if}</title>
    <meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
    <meta name="Powered-By" content="Serendipity v.{$head_version}" />
    <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
    <link rel="alternate"  type="application/rss+xml" title="{$blogTitle} RSS feed" href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/index.rss2" />
    <link rel="alternate"  type="application/x.atom+xml"  title="{$blogTitle} Atom feed"  href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/atom.xml" />
{if $entry_id}
    <link rel="pingback" href="{$serendipityBaseURL}comment.php?type=pingback&entry_id={$entry_id}" />
{/if}
{serendipity_hookPlugin hook="frontend_header"}

The code above is the important core information for each serendipity page.

Now, the rest that remains of this file is actually only this bit, which you also copy to a fresh temporary file:

Code: Select all

<div id="serendipity_banner">
    <h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
    <h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
</div>

<table id="mainpane">
    <tr>
{if $leftSidebarElements > 0}
        <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
        <td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
        <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}
    </tr>
</table>
{/if}

{serendipity_hookPlugin hook="frontend_footer"}

This is the core instruction that will later define the layout of your blog.

Now that we have two temporary files, it's time to create your ACTUAL new index.tpl file. To do so, you simply open your homepage and save the raw HTML sourcecode to the editor.

The first thing with your copied HTML is to adjust some paths. The reason is that your main page resieds in the root, while serendipity is installed in /serendipity. To allow your homepage to load the necessary style sheets, you will need to change all your paths to have a "/" prefix.

Like, for example currently in your HTML code you use:

Code: Select all

<link rel="StyleSheet" href="corporatestyle.css" type="text/css">

but to make that appear properly when being called from serendipity it neads to read:

Code: Select all

<link rel="StyleSheet" href="/corporatestyle.css" type="text/css">

The easiest thing to do is use your text editor to search for "href" and for "src". Then add a "/" to every occurence you find.

Now your template is compatible to be opened from within the /serendipity subpage. The next step is to figure out where the serendipity content will go into.

Luckily your current HTML also has markers in it to identify where to put things, as it contains this:

Code: Select all

<!-- START CONTENT TABLE -->
...
</td></tr></table>
<!-- CONTENT TABLE -->

So you simply rip out everything between START CONTENT TABLE and CONTENT TABLE and inject your temporary code we copied earlier (the <table>.... stuff).

How we already got the main content. Now simply add the stuff from the other fresh temporary file in your<head> section.

After all that is done, save the file as "index.tpl", the go to your serendipity admin panel, disable embed mode, and then go to your template selection, pick your own template, and you're done!

Now, here's the actual HTML code from the steps above. Note though that your current HTML is using quite old legacy HTML markup that has been overriden by improved CSS and XHTML tags. Spacer.gif's for example are no longer required, a table layout could also be better replaced. But that's stuff that is on another page.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

<!-- CHANGE THE NEXT THREE LINES -->

<title>{$head_title|@default:$blogTitle} {if $head_subtitle} - {$head_subtitle}{/if}</title>
<meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
<meta name="Powered-By" content="Serendipity v.{$head_version}" />
<link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
<link rel="alternate"  type="application/rss+xml" title="{$blogTitle} RSS feed" href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/index.rss2" />
<link rel="alternate"  type="application/x.atom+xml"  title="{$blogTitle} Atom feed"  href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/atom.xml" />
{if $entry_id}
<link rel="pingback" href="{$serendipityBaseURL}comment.php?type=pingback&entry_id={$entry_id}" />
{/if}

{serendipity_hookPlugin hook="frontend_header"}
<meta name="Description" content="PC Handyman, LLC - Computer Repair, Installation, Support and Web Site Services in the Lakes Region of New Hampshire.">
<meta name="y_key" content="dad6a4dd74b54095" >
<meta name="KeyWords" content="computer repair, computer support, computer network, wireless network, computer repair housecall, Lakes Region, NH, New Hampshire, web site design, domain names, web hosting">


<!-- CHANGE THE ABOVE THREE LINES -->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="Copyright" content="Copyright PC Handyman, LLC http://www.pc-handyman.net/">
<META http-equiv="Content-Language" content="en">

<META name="Rating" content="General">



<link rel="StyleSheet" href="/corporatestyle.css" type="text/css">


<script language="JavaScript" type="text/javascript" src="/javascripts.js"></script>
<script language="JavaScript" type="text/javascript" src="/pop-closeup.js"></script>
<script language="JavaScript" type="text/javascript" src="/mouseover.js"></script>
</head>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">

<!-- PAGE TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP">


<script language="JavaScript" type="text/javascript" src="http://www.pc-handyman.net/header.js"></script>


<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" class="printhide"><tr><td background="picts/home.jpg">
<img src="/picts/spacer.gif" border="0" width="700" height="80" title="image"><br>
</td></tr><tr class="printhide"><td class="pagebars">
<img src="/picts/spacer.gif" width="10" height="1" title="image"><br>
</td></tr></table>
<!-- PICTURE TABLE -->

<script language="JavaScript" type="text/javascript" src="/menu.js"></script>


<!-- CORNER TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/shadow1.gif" class="printhide"><tr><td width="227">
<img src="/picts/corner.gif" height="40" width="227"><br>
</td><td>
<img src="/picts/spacer.gif" height="40" width="10" border="0"><br>
</td></tr></table>
<!-- CORNER TABLE -->


<!-- OUTER TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="left" VALIGN="top" class="sidebar-background">

<!-- SPLIT TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP" width="15">
<script language="JavaScript" type="text/javascript" src="/pageheight.js"></script>
</td><td ALIGN="LEFT" VALIGN="TOP" width="150">





<!-- SIDEBAR AREA -->


<script language="JavaScript" type="text/javascript" src="/sidebar.js"></script>


<br>


<img src="/picts/spacer.gif" height="5" width="150" border="0"><br>


</td><td ALIGN="LEFT" VALIGN="TOP" width="30">

<img src="/picts/spacer.gif" height="400" width="30" border="0"><br>

</td><td ALIGN="CENTER" VALIGN="TOP">






<!-- START CONTENT TABLE -->
<div id="serendipity_banner">
    <h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
    <h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
</div>

<table id="mainpane">
    <tr>
{if $leftSidebarElements > 0}
        <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
        <td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
        <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}
    </tr>
</table>
{/if}

{serendipity_hookPlugin hook="frontend_footer"}

<!-- CONTENT TABLE -->


</td></tr></table>
<!-- SPLIT TABLE -->


</td></tr></table>
<!-- OUTER TABLE-->






<!-- PAGE TABLE-->
</TD></TR><TR><TD VALIGN="BOTTOM">

<script language="JavaScript" type="text/javascript" src="/menu.js"></script>



<!-- BOTTOM PAGEBAR -->
<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr class="printhide"><td class="pagebar-bottom">
<img src="/picts/spacer.gif" width="10" height="1" title="image"><br>

</td></tr></table>



<!-- COPYRIGHT -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/bottom-shade.gif"><tr><td width="10">
<img src="/picts/spacer.gif" height="45" width="10" border="0" title="image"><br>
</td><td ALIGN="left" VALIGN="middle">
<script language="JavaScript" type="text/javascript" src="/copyright.js"></script>
</td><td ALIGN="right" VALIGN="middle">
<script language="JavaScript" type="text/javascript" src="/copyright-allwebco.js"></script>
</TD><td width="10">
<img src="/picts/spacer.gif" height="10" width="10" border="0" title="image"><br>
</td></tr></table>
<!-- COPYRIGHT -->




</td></tr></table>
<!-- END PAGE TABLE-->

</BODY>
</HTML>

HTH,
Garvin

[don0don]

Hi again, Garvin!

I followed the instructions faithfully, but my new template doesn't work -- all I get is a blank page. When I look at the page source, it is totally blank as well.

Almost all the other templates seem to work, with these two exceptions:

• "blue" doesn't display correctly -- the formatting is way off.

• XML Engine (Dev) doesn't display at all -- I get an error message: XML Parsing Error: not well-formed
Location: http://www.pc-handyman.net/serendipity/ Line Number 44, Column 2:</serendipity>-^

I appreciate your help, but would understand if you wanted to wait until you are feeling better to further troubleshoot this problem.

Thanks!