sidebar at the bottom

[Guest]

Hi,
I was just wondering if we can place the side bar at the bottom.
I mean, not all, say the "most popular" entry, i want to put it under the blog entry. And a google adsense under that perhaps. So can i do that?

Because all the sites of s9y i saw the side bars are on the side (well, logically thats it is to be duh!!) but i want one to go bottom.

May i know what i might need to do that to acheive it?

thanks a lot.

Paul

[gwilsonmail]

Overall I think the solution would be to have the concept of a footer in addition to a left and right sidebar.

With the footer you should be able to add sidebar plugins so that you can have google ads or html code at the bottom of the page.

To take this further it would also be useful to have areas at the top of the page configurable. I'd be happy to go into details if there is interest in developing this further.

[cdtavijit]

ah!! that sounds cool.

Well, i am very very new to s9y, (3 days i have downloaded this) so i still dont know much how to make it, but i am willing to assist you if you want to develop it. Perhaps i will start reading the API for now and i will keep you posted about it?

And i think a lot of people would be happy if its there. I remember reading in another thread someone wants to configure a header option like what you said. So i guess it wont be long when someone wants a footer as well.

Besides, i was the one who started this thread. I was not logged on that time, so it put guest for me.

Peace.

[davecjr]

I asked earlier in another thread how to put the coppermine pluging in the header and I know you have to edit the .tpl file for one. I did get the plugin to show up above the header but of course it was vertical and I don't know where to start on getting the output to be horizontal! Any help there would be greatly appreciated.

[garvinhicking]

It is very easy possible to edit the index.tpl template and move sidebar plugins to the footer.

You could make the "left" sidebar plugins go to the bottom, and only the "right" show up on the right plugin. Read the templating docs on www.s9y.org for more information on that.

Added to that you can define only certain plugins to show on the bottom. Also that is covered in our advanced templating documentation.

Have fun,
Garvin

[cdtavijit]

may be i am doing something wrong, but what i did was this (index.tpl) file:

{if $leftSidebarElements > 0}
<td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="bottom"}</td>

but it dint go to bottom =(

can i know what i was doing wrong?

edit: and as well, i went to admin, and then placed a new html nugget in the sidebar plugin, and placed it to the left. so that it goes bottom, but well, as i said, it dint =(

[garvinhicking]

Yes, that will not work. Serendipity only knows "left" and "right" placements. You can put that printSidebar code to your footer position in HTML and still use "left" or "right" as a faked position.

So even the admin shows you "left" and "right" it is your Template that controls where "left" is put and where "right" is put.

Think of "left" as "Position A" and "right" as "Position B". And in your index.tpl you tell where Positions A and B are.

Regards,
Garvin

[cdtavijit]

hmmm.. ok....
will it be too stupid to ask how to add the footer?
because, i looked at the index.tpl but dint find a place to add the footer.

<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>
should i add the footer here?? like, add a table or a td here? but even if i do, what am i going to add here?

should it be another
<td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td> ?? but how does it go as footer?
</table>

or i need to create a footer file and include it here with include command?

thanks a lot.

besides, where is the "advanced" style guyide mentioned? I dont see any place that has more than just two lines about index.tpl in the documentation.

thnks again.

[garvinhicking]

Make it like this:

Code: Select all

<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>
</tr> 
</table>
<br /><br /><hr /><hr /><hr />
<div id="footer">
{if $rightSidebarElements > 0}
<div id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</div>
{/if}
</div>

See http://www.s9y.org/78.html and http://www.s9y.org/44.html. And maybe something like SelfHTML or the Smarty Documentation may also come in handy

Best regards,
Garvin

[cdtavijit]

fantastic... it rocks.
Well, it works for most of the themes. But some has problem. those which is using fixed layout, the bottom plugin stays at the left hand side. Like this one, the MT3 gettisbarg and the similar ones has this problem.
http://www.moneyarchives.com/

well, i tried to put the alignment in the index.tpl as

<div id="footer" align = "center">
{if $leftSidebarElements > 0}
<div id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</div>
{/if}
</div>

but it dint work. I tried to put centers for the sidebar css, but dint work either.

And i feel bad to ask it again and again, because it sounds like i want all the info spoon fed, but hmm... just cant seem to get my head working =(

sorry, and thanks.

[garvinhicking]

Please provide me with your full index.tpl template, so that I can see what you modified.

It definitely works, it just needs to be placed right.

Regards,
Garvin

[cdtavijit]

Sure Garvin, here you go

{if $is_embedded != true}
{if $is_xhtml}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{else}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
{/if}

<html>
<head>
<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"}
</head>

<body>
{else}
{serendipity_hookPlugin hook="frontend_header"}
{/if}

{if $is_raw_mode != true}
<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>
<td id="content" valign="top">{$CONTENT}</td>

{if $rightSidebarElements > 0}
<td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}

</tr>
</table>

<div id="footer">
{if $leftSidebarElements > 0}
<div id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</div>
{/if}
</div>
{/if}


{$raw_data}

{if $is_embedded != true}
</body>
</html>
{/if}

Besides, i finally understood today that you all are using smarty. I mean i saw smarty in a lot of places in your documentation and so on, but i dint know what it is. Thats why when i saw your php codes, i was quite puzzled. Because i do some sort of php stuffs, and i was lost seeing your codes.

So, i went to smart site and now i am downloading their whole API, so that i can go back home and read where I still dont have internet.

After that, i hope i wont have to trouble you again and rather I can help people to solve their problems as well.

For the time being, thanks a million for your help.

besides, i have another question, Say if i want a left side bar, right side bar, and a footer, what am i supposed to do? Duplicate one of the sidebar twice and place it as footer?

thanks a lot

[garvinhicking]

Your index.tpl file looks absolutely right. Do you have a URL so I could look at it? The only thing I could imagine is that the CSS is not matchign in the template. Try to use a different id="..." for the leftsidebar, like "id='serendipityMyOwnSidebar' instead?

Hope I you get into the Smarty documentation!:)

About a third sidebar: That will not properly work. The only way to get this right is to place plugins in the footer manually, by calling specific plugins via the smarty functions shown on the s9y documentation link I gave you. Another way would be to abuse the "hidden" sidebar switch. You could display all items set to "hidden" in the footer, but then you loose the functionality to hide sidebar elements

Regards,
Garvin

[cdtavijit]

hello Garvin,
Well, i did post the URL before, but i guess i talk too much, so u dint notice it.
Anyway, here it is: http://www.moneyarchives.com/

U can see that the bottom is sitting in the left. My res is 1280 X 1024

I am actually using the default css of the MT 3 gettisberg style.

And all those MT3 style has the exact same problem. If there is a footer, it doesnt obey the content style.

thanks.

[garvinhicking]

Okay. This is entirely a CSS problem. The HTML Code is properly emitted.

You now need to style your #serendipityLeftSidebar container in the CSS properly. It does not work out of the box, since you modified it, and now need to adapt the CSS properly.

Try this code for a start in your index.tpl so that it looks like your content pane:

Code: Select all

<div id="footer">
{if $leftSidebarElements > 0}
<div class="serendipity_entry">{serendipity_printSidebar side="left"}</div>
{/if}
</div> 

And in your style.css use this:

Code: Select all

#footer {
 width: 320px;
 margin-left: auto;
 margin-right: auto;
 border: 5px solid red;
 text-align: center
}

You may need to get yourself familiar with CSS first, though.

Regards,
Garvin