Dumping Serendipity into an existing webpage!

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Considerin

Dumping Serendipity into an existing webpage!

Post by Considerin »

Hi, I have a website in development and I have tried various blogging engines before finally coming to a choice of this software or the pMachine Pro engine.

My preference is this one.

I have read the tutorial about how to put the blog into an existing website and I do not understand it at all so I was hoping that someone here could help me.

I have a basic template... http://consider.in

What I would like to know is what is the EASIEST way that I could drop this blog software into that template so that I can use the same site for all my applications...

I have already dropped 4images and bbv2 forum into the site...this blog software however is proving troublesome....

Anyone know where I could start?

Thanks in advance :)
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Dumping Serendipity into an existing webpage!

Post by garvinhicking »

The easiest way would be to take your template's HTML stuff and merge that with an index.tpl file of a Serendipity Template. This way you would have the best performance and easiest editing.

The drawback would be that you have to maintain two HTML sets. If you change the look of your webpage, you'd have to change to things.

The other way would be to use Serendipity Embedding. Actually I tried to describe this as good as I can on www.s9y.org Documentation already. If you can show me your Template and how you embed 4images and bbv2, I can tell you how to integrate Serendipity.

Basically let's say you have an myindex.php file like this:

Code: Select all

<?php ob_start(); ?>
<html>
<body>

<div>My nice markup here</div>

... blabla, design and stuff ...

<?php
if ($app == '4images') {
  include_once '4images/index.php';
} elseif ($app == 'bbv2') {
  include_once 'bbv2/index.php';
} elseif ($app == 'blog') {
  chdir('serendipity');
  include_once 'index.php';
  chdir('..');
}
?>

</body>
</html>
Now in your serendipity blog, just turn on the "Embed" configuration switch. Then set the "index file" option to "s9yindex.php".

Create a s9yindex.php file with this content:

Code: Select all

<?php
$app = 'blog';
chdir('..');
include 'myindex.php';
?>
Now it should all be working with one central template. I can be more specific if you give me more details about your template setup.

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Considerin

Post by Considerin »

Hi Gavin,

Thanks for replying.

The problem is that I am not using a template as such, I am just using the very basic html found on the homepage together with a css stylesheet.

I would not even know where to begin creating .tpl files if I am completely honest.

You can see examples of the bbv2 forum and the 4images at the following locations...

http://youre.consider.in (bbv2 integration complete)
http://gallery.consider.in (4images, only index page completed so far)

I don't know if that helps you to know what I am looking for or not?
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking »

Okay, then in your case it will be VERY simple.

1. Create a directory templates/considerin
2. Copy the file templates/default/info.txt and /templates/default/index.tpl into your templates/considerin/ directory
3. Edit the file info.txt. Make up a template name and insert it. This will be the template name you can then choose on the Serendipity Admin Interface in "Styles".
4. Edit the index.tpl file in your template directory. This is the important part. This is a HTML template with some Smarty markup in. Here you can change the HTML so that it matches your layout. You can add your header HTML blocks, and you can insert the CSS calls to your central CSS file instead of the Serendipity ones. Just take a look at the simple file and modify it. Take some time to go through every line and try to understand what it does.

In the end it will look something like this:

Code: Select all

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset={$head_charset}" />
    <meta name="Powered-By" content="Serendipity v.{$head_version}" />
    <title>{$head_title|@default:$blogTitle} {if $head_subtitle} - {$head_subtitle}{/if}</title>
    <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}
    <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
{serendipity_hookPlugin hook="frontend_header"}
	<style type="text/css">
		@import url( "http://consider.in/site.css" );
textarea,select {
background: url('http://youre.consider.in/bbim/watermark.jpg');
background-attachment: fixed;
}


.user {
       font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: bold;
       color: #2A3E52;
 }

.title {
       font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: bold;
}

.normal {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.online {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.small {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
}
.small2 {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
}

input,textarea,select {
   font-size: 10px;
   font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
}


td { 
font-family: Verdana;
font-size: 12px;
}

A:link { COLOR: #26384B;
                    TEXT-DECORATION: none;}
A:visited { COLOR: #26384B;
                    TEXT-DECORATION: none;}
A:active { COLOR: #26384B;
                     TEXT-DECORATION: none;}
A:hover { COLOR: #B50905;
                      TEXT-DECORATION: none;}
A.red:link { COLOR: #8A032E;
                    TEXT-DECORATION: underline;}
A.red:visited { COLOR: #8A032E;
                    TEXT-DECORATION: underline;}
A.red:active { COLOR: #8A032E;
                     TEXT-DECORATION: underline;}
A.red:hover { COLOR: #293E51;
                      TEXT-DECORATION: underline;}
A.footnav:link { COLOR: #FFFFFF;
                    TEXT-DECORATION: underline;}
A.footnav:visited { COLOR: #FFFFFF;
                    TEXT-DECORATION: underline;}
A.footnav:active { COLOR: #FFFFFF;
                     TEXT-DECORATION: underline;}
A.footnav:hover { COLOR: #B50905;
                      TEXT-DECORATION: none;}

</style>
	    <style type="text/css">
	    td.tdbdr,tr.tdbdr { border: 1px;
	      border-style: solid;
		       border-color:#3d4463;
	    background:#8B012E;
	      background:url('http://youre.consider.in/bbim/titlebg.gif');
		   }
	</style>
	    </head>

<body>

<div id="notice">
	Copyright © 2005 <a href="http://www.consider.in">Consider.in</a>. Forums Powered by: <a href="http://www.bbv2.com" target=_blank>bbBoard v2</a> (Licensed to: youre.consider.in)
	 Copyright 2003-2005 bbNetwork Ltd</font></div>

<div id="header">
	<div id="headerAura"> </div>
	<div id="headerIcon"><img src="images/icon.png" alt=""/></div>
	<div id="headerTitle"><img src="images/title.png" alt="" /></div>

	<div id="headerNavigation">
               <ul>
		<li><a href="http://consider.in">Home</a></li>
		<li><a href="http://consider.in">Blog</a></li>
		<li><a href="http://consider.in">Forums</a></li>
		<li><a href="http://consider.in">Gallery</a></li>
		</ul>

	</div>

    <div id="content">
        <p>
            <em>You're viewing the <b>BLOG</b></em>
        </p>
    </div>
</div>
 
<!-- Header over -->

<!-- Content -->

<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>

</body>
</html>
That's all the whole magic! Only some simple and very few Smarty tags define the Serendipity content. The reast can be fully customizable HTML by you.

Regards
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Considerin

Post by Considerin »

Hi Garvin,

That assistance proved to be most useful...

I needed to tinker a bit with the default css file to avoid conflicts with the blog css file which stretched the page massively, but that was a relativey simple matter.

I would like to say a massive thank you for helping me in my efforts to skin your vastly superior software.

I have the blog operational @ http://im.consider.in

I have one remaining question regarding the templating of the blog...

It is possible to remove the powered by notice in the right sidebar at all and if so how would I do this. (I wish to have the powered by in the "notice" div as I have with bbv2 forums and with 4images gallery), because this is part of the index I was hoping that it would be possible to do so because the "powered by" link back here in the div will be on every page.

Is this possible and is this permitted?
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking »

Hi!
I would like to say a massive thank you for helping me in my efforts to skin your vastly superior software.
No problem, glad that you got it working. Spread the word how cool Serendipity templating is. :-)
It is possible to remove the powered by notice in the right sidebar at all and if so how would I do this. (I wish to have the powered by in the "notice" div as I have with bbv2 forums and with 4images gallery), because this is part of the index I was hoping that it would be possible to do so because the "powered by" link back here in the div will be on every page.
Yes, you are not required to show the powered by bumper. This is a so called "Sidebar plugin". You can go to your s9y Admin panel, go to Plugin configuration. There you see a list of all sidebar plugins. One is titled "Powered By". Check the checkbox in front of it and click on "Delete" on the lower part. That will remove the plugin from the page.

If you ever want to put it online again, just go again to plugin config, click on the link "Click here to install a sidebar plugin" and add it again.

So with our license it's alright if you do that. We just kindly ask for credit somewhere, so that people can see what a cool blogsoftware you are using, to spread the word about Serendipity. :-)

And now, have fun! :)

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Considerin

Post by Considerin »

Thanks for all your help Garvin, it really is appreciated and so refreshing to find a developer so helpful and patient.

Now all I need to do is get anyone using one of the inferior blogs on my server to convert to Serendipity ;)

Thanks again :D
Post Reply