sidebar at the bottom

Skinning and designing Serendipity (CSS, HTML, Smarty)
Guest

sidebar at the bottom

Post by Guest » Sat Jul 16, 2005 7:25 pm

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
Regular
Posts: 146
Joined: Tue Jul 12, 2005 9:12 pm
Location: Ottawa, Canada
Contact:

Post by gwilsonmail » Sat Jul 16, 2005 9:50 pm

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

cdtavijit
Regular
Posts: 12
Joined: Tue Jul 12, 2005 4:51 am
Location: Malaysia

cool

Post by cdtavijit » Sun Jul 17, 2005 3:51 am

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
Regular
Posts: 167
Joined: Fri Oct 29, 2004 3:09 pm
Contact:

Post by davecjr » Sun Jul 17, 2005 4:03 am

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.

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Sun Jul 17, 2005 9:04 pm

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

cdtavijit
Regular
Posts: 12
Joined: Tue Jul 12, 2005 4:51 am
Location: Malaysia

at the bottom?

Post by cdtavijit » Mon Jul 18, 2005 9:14 am

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

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: at the bottom?

Post by garvinhicking » Mon Jul 18, 2005 9:38 am

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

cdtavijit
Regular
Posts: 12
Joined: Tue Jul 12, 2005 4:51 am
Location: Malaysia

hmmm

Post by cdtavijit » Mon Jul 18, 2005 10:20 am

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.

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: hmmm

Post by garvinhicking » Mon Jul 18, 2005 2:10 pm

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

cdtavijit
Regular
Posts: 12
Joined: Tue Jul 12, 2005 4:51 am
Location: Malaysia

it works!!

Post by cdtavijit » Tue Jul 19, 2005 7:51 am

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. :(

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: it works!!

Post by garvinhicking » Tue Jul 19, 2005 12:32 pm

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

cdtavijit
Regular
Posts: 12
Joined: Tue Jul 12, 2005 4:51 am
Location: Malaysia

sure man

Post by cdtavijit » Tue Jul 19, 2005 2:08 pm

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&amp;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

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: sure man

Post by garvinhicking » Tue Jul 19, 2005 4:27 pm

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

cdtavijit
Regular
Posts: 12
Joined: Tue Jul 12, 2005 4:51 am
Location: Malaysia

heh

Post by cdtavijit » Wed Jul 20, 2005 5:17 am

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.

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: heh

Post by garvinhicking » Wed Jul 20, 2005 11:22 am

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

Post Reply