Pure CSS Flexible Layout Possible with Smarty Templating?

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
User avatar
RobA
Regular
Posts: 317
Joined: Wed Apr 27, 2005 5:11 pm
Contact:

Pure CSS Flexible Layout Possible with Smarty Templating?

Post by RobA » Thu Jan 26, 2006 9:37 pm

I recently discovered this layout:

http://www.webproducer.at/flexible-layout/

that has some very nice features:
* Everything in EM (change your browser font size to see the effect)
* Source ordered (so the center column content appears first in non-css browsers/readers)
* Full height columns (or any column can be longest)
* Switch between one two or three columns (JS or server side to toggle them)
* Fluid center but fixed width side-columns (very nice!)
* Min-max width for IE (experimental)

They provide the full CSS in four files, but I'm not sure how to start with somthing like this and make it fit the smarty templating and serendipity framework...

Any suggestions?


-Rob A>
* My s9y blog:
* Rob A's (Im)Personal Blog
* http://www.silent9.com/blog

User avatar
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert » Fri Jan 27, 2006 4:48 am

When I made Ladybug, I wanted to do an all-CSS source-ordered layout. It worked, too. I had to get a little creative to account for the possibility that I might not have any particular side column, but I got it.

Ladybug also uses fixed-width sides with a fluid center. I'm not sure how they managed the full-height columns, but that's cool.

It's not that difficult to accomplish anything, with Smarty templating. You basically modify the index.tpl to link your stylesheets, then call the appropriate functions at the appropriate places.

There is no header function; we basically write our own and include the hompage link ($serendipityBaseURL) and the link titles ($head_title and $head_subtitle). You could include anything you like.

The left and right sidebars are created by calling {serendipity_printSidebar} with side="left" or side="right". Again, you could put that anywhere you liked.

The blog content is in the variable $CONTENT. That's #col_a in your example.

The footer (if any) is printed by calling {serendipity_hookPlugin hook="frontend_footer"}.

Tah-dah! The layout you've been looking for.

Incidentally, is this a variant of the Jello Mold layout? I haven't had the opportunity to examine that one in detail, but it sure looks interesting.
Judebert
---
Website | Wishlist | PayPal

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Thu Feb 02, 2006 4:33 pm

Hi all,

Could I seek clarification on a point in judeberts reply, the {serendipity_hookPlugin hook="frontend_footer"} I thought was a legacy of the past (support for older versions of s9y), if this isn't the case, how do I edit the content of footer so that this piece of code will print it. Is this achieved in admin suite somehow, or does this open a smarty template file, if so how is it named?

Cheers
Carl

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

Post by garvinhicking » Thu Feb 02, 2006 4:45 pm

That frontend_footer plugin is just used for emitting HTML code specified in Page Nugget plugins.

So not from a Smarty file, but coming from a plugin.

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/

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Thu Feb 02, 2006 5:00 pm

Ah, so if I want a footer for a theme design I still need to hard code the html, thanks Garvin.

Carl

User avatar
RobA
Regular
Posts: 317
Joined: Wed Apr 27, 2005 5:11 pm
Contact:

Post by RobA » Wed Feb 08, 2006 6:57 pm

Well,

I took a stab at it and turned this into a theme. There are still some rough edges though. I see it more as a starting point for anyone who wants a flexing three column layout :)

Most everything uses the same formating as the default s9y theme (I just cut and pasted them in).

If someone wants to include it in a theme tester/site, feel free...I don't think it is too broken ;)

Here is a screen-shot:
Image

Details here.

Download here: [url]http://ffaat.pointclark.net/blog/index.php?serendipity[subpage]=downloads&thiscat=3&file=15[/url].

-Rob A>
* My s9y blog:
* Rob A's (Im)Personal Blog
* http://www.silent9.com/blog

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Wed Feb 08, 2006 8:02 pm

Rob, great effort. I for one will be very keen to dissect your work and see what we can do with it.

Carl

Post Reply