Apply Table Layout

[janggu]

Hi there,

How can I change the default CSS layout to a table layout? Is there a sample code available?

Thank you!

[tsw]

I would advice against table layouts

but you can do it by changing template. create new template, paste your table code inside template and change your content area to say {content} and so on.

[Dr.CSS]

i thought it was supposed to be the other way around.... 
but i guess if you are used to table layout ....

    mark

[quadracer]

But how can I create a summary template for news with 2 columns without a table column  ?

[tsw]

with css

div#newsItem {
float:left;
width:49%;
}

will float all newsItems to left and becouse its width will be ~50% of containing div one row can hold two news items.

(not tested, so might need some tweaking

[baconburgare]

Yea skip tables and try to learn how the div elements works. It's really worth the trouble. I've been a table-guy myself but finally gave myself time to step up. It's much more flexible and faster as well. The div with 2 columns would look something like this in your template:


 
    The text in the left column
 
 
    Some other text in the right column
 


and the stylesheet

div#background {
  width: 50em;
}

div#left_area {
  position: relative;
  float: left;
  width: 10em;
}

div#right_area {
  position: relative;
  float: left;
  width: 40em;
}


Havent tested this, should work tho. Anyway might help u on the way to understand how it works.

[EDIT]
Adding different background colors to the "blocks" is a good help to see where the blocks end up on the page. Just add "background-color: #nnn;" to each block.

[quadracer]

Hey guys,

thx for your fast reply - think I've understood.

But how can I tell news module to use left and right area  like


 
    news_1
 
 
    news_2
 


and so on ...

[tsw]

You dont need to name one news item left and another right,

baconburgare example was about having one news item have two columns like

Code: Select all

Header here     news content here
author             more news content
title                 and some more
                      last line

(well didnt lay out as I thought but I think you get the point)

get wedeveloper toolbar for FF and you can edit css on the fly to see changes as you type them (really helpfull)

throw a url and well see what we can do

[quadracer]

I've googled a little bit and I'm afraid I need smarty power like

{if $news_ID is odd}


    summarytemplate
 

{else}


    summarytemplate
 

But I have not the knowledge about smarty and php.

Could it work? What's the right variable?

[quadracer]

Bump

[Dr.CSS]

something like this...
http://www.multiintech.com/index.php?page=wireframe3col
available in the themes section of CMSMS :..

[quadracer]

Thx mark - but don't found a solution for me.

Now I've added this in a news summary template after foreach

Code: Select all

<div {if $entry->id is even}class="left49"{else}class="right49"{/if}>news template</div>

It works but now I've another problem - if id of last news item is not even, it will shown in right div.

But I want to show the last news item every time on the left.

Any ideas?

[Dr.CSS]

Put your news in 2 diff. categories put one cat. in the left, other in the right, just change the category in this tag...


{cms_module module='news' in 1.0 it's just news category='left' or whatever you call it, and for templates summarytemplate='yours.tpl' detailtemplate='yours'.tpl} template needs to live in the modules/news/templates folder

[quadracer]

Hi mark,

thx for your answer but I woun't have two categories  . So I've searched and found a (simple) solution on a xoops forum.

Instead this

Code: Select all

<div {if $entry->id is even}class="left49"{else}class="right49"{/if}>news template</div>

I must insert this

Code: Select all

<div class="

{php}
global $newscount;
$newscount = $newscount + 1;
if (($newscount % 2)==1) {
   echo "left49";
}
else {
   echo "right49";
}
{/php}

">news template</div>

Works for me, thanks for your ideas / help ...