Table-less layout and CSS2

aharth · Post by **aharth** » Wed Mar 30, 2005 6:40 pm

Hi, is it possible to use a table-less layout based on CSS2 within s9y?

Thanks,
Andreas.

Post by **garvinhicking** » Thu Mar 31, 2005 2:32 pm

Yes, with Serendipity 0.8 you can edit all the HTML code easily via Smarty Templating.

Some of our templates are already tableless, only the default template still has some tables.

Regards,
Garvin

smiffy · Post by **smiffy** » Thu Apr 14, 2005 7:50 am

Delighted to hear it; that's why I came here in fact - trying to find out how I can tweak my installation so that it's WCAG 1.0* compliant.

I've found that, on the whole, most tools are pretty poor when it comes to accessibility - I generally end up having to write my own. I am, therefore, delighted that the public code [as opposed to the admin stuff] validates without modification.

Only problem is that I've started work on my templates based on the default (tables based) layout. Doh!

Cheers

M

* http://www.w3.org/TR/WCAG10/

nine-times · Post by **nine-times** » Thu Apr 14, 2005 6:22 pm

smiffy wrote:Only problem is that I've started work on my templates based on the default (tables based) layout. Doh!

Pretty much all you have to do is grab the "index.tpl" from the default template and edit it so that the table-related tags are all div tags, and then edit your CSS to place everything in the right place.

ninetimes · Post by **ninetimes** » Thu Apr 14, 2005 7:07 pm

In fact, if it helps, this is my index.tpl:

Code: Select all

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

<div id="mainpane">
{if $leftSidebarElements > 0}
        <div id="serendipityLeftSideBar">{serendipity_printSidebar side="left"}</div>
{/if}
{if $rightSidebarElements > 0}
        <div id="serendipityRightSideBar">{serendipity_printSidebar side="right"}</div>
{/if}
        <div id="content">{$CONTENT}</div>
</div>
<div id="serendipity_footer"><img src="/templates/9times/img/footer.gif" alt=""/></div>
{/if}

{$raw_data}

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

I'm assuming you know how to write CSS or you wouldn't be asking about it. However, if not, let me know. I'm working on my own template right now: http://www.ninetimes.org

Looks a little like Kubric, but is derived from the MT3 - Squash theme

nine-times · Post by **nine-times** » Thu Apr 14, 2005 7:27 pm

However, if not, let me know. I'm working on my own template right now: http://www.ninetimes.org

Sorry, that's http://www.nine-times.org.

Guest · Post by **Guest** » Fri Apr 15, 2005 12:09 am

I thank you!

Having spotted my blunder, I re-started using Kubrick, just copying and pasting my alterations into the index.tpl. I'll use yours as reference - always handy when starting out.

I'm currently going through the Kubrick CSS and changing it - I'm beginning to think that I should have started from scratch; it's absolutely full of absolute units - something of a no-no with the standards to which I'm working.

My big problem has always been getting multi-column layouts to work properly with CSS (using relative units, that is); width is easy - it's just getting the heights all the same as the tallest column which can, of course, change should the user select a larger font size.

And then I've got to work on the WYSIWYG editor so that I can get <abbr> elements in without having to switch to text view - all good fun

Thanks for your help.

nick · Post by **nick** » Fri Nov 11, 2005 7:32 pm

I heavily modified a current theme of s9y into my own taste of colors and styles ..

Now .. I want to make it absolutely table-less 3 column css style.
I tried modifying index.tpl ( copied it to my style directory first ), it's quite the same like yours, just replacing all <table> & <td> tags..
Still, the page is jumbled...

So i have to remove the index.tpl file to get my style use the default index.tpl

Will s9y implement a pure css style in index.tpl or any *.tpl in the next / coming releases ?

btw, the site is http://cryingwolf.net , any suggestion would be great !

Thx.

Post by **garvinhicking** » Fri Nov 11, 2005 7:38 pm

Nick, have you looked at moz-modern theme? This should be all table less!

Regards,
Garvin

nick · Post by **nick** » Mon Jun 26, 2006 2:10 pm

I modified Mr. Hicking's theme ( contest ) to be tableless

Well, accept for the calendar plugin & comments posts.
Hope you don't mind..

It's tableless now .. woohoow !

Table-less layout and CSS2

Table-less layout and CSS2

Re: Table-less layout and CSS2

Shouldn't be too hard to fix

3 Column Table Less CSS ?

Re: 3 Column Table Less CSS ?

Table Less :)