Three columns of text on a static page?

davidpmccormick · 2011-11-22 16:05:04

Hi,

Can anyone tell me the best way to get three or more columns of text on a static page?

At present, I’ve defined three categories (‘left-col’, ‘middle-col’ and ‘right-col’) and I pull in three article bodies.

This feels a bit hacky, though (I’d be a bit embarrassed having to explain it to a client).

Are there any simpler, more elegant ways to achieve something similar (and/or any plugins that give you more than one body/excerpt per article)?

Thanks,
D

jakob · 2011-11-22 16:33:39

You can use jcb_columnize which allows you to define a “break string” in your body at which a new div is created, e.g. +++++ or similar. With jcb_columnize you have a few more options including numbering your divs, but if your needs are simply, you can also use rah_replace and the same approach, e.g. something along these lines:

<div class="col">
<txp:rah_replace from="+++++" to='</div>
<div class="col">'><txp:body /></txp:rah_replace>
</div>

Would that help in your situation?

Last edited by jakob (2011-11-22 16:34:16)

merz1 · 2011-11-22 17:50:23

davidpmccormick Are you talking about a static page like the imprint or the about page?
Or is your question aimed at a kind of blog where articles appear in three columns?

You can always – in pages, articles and forms – use a classical HTML <div class="col1"> markup + CSS .col1 {width:100px; float:left;} to achieve an additional column layout. Not sure how CSS savy you are?

Last edited by merz1 (2011-11-22 17:51:08)

davidpmccormick · 2011-11-22 19:13:10

Jakob: thanks – I’ll take a look.

Merzi: I’m talking about something akin to an ‘about’ page, yes – essentially a page with static content (although I’d like to provide a client with the capacity to change the information in each of the three columns). Understanding the CSS isn’t the problem; it’s that after I’ve used up the ‘body’ and ‘excerpt’ sections, I’m only left with 255 custom field characters, which aren’t really suited to filling up my third column.

elwins · 2011-11-22 19:29:20

davidpmccormick wrote:

…. I’m only left with 255 custom field characters, which aren’t really suited to filling up my third column.

Go in database and change 255 to whatever you need.
Table: textpattern
In database you can add more custom fields too.
textpattern,txp_lang

[Edit]
About 3 collums. You need just TXP tags, HTML and CSS.
.col1
{float:left;
margin-right:20px;}
.col2
{float:left;
margin-right:20px;}
.col3
{float:right;}

Last edited by elwins (2011-11-22 19:55:03)

els · 2011-11-22 20:18:25

davidpmccormick wrote:

essentially a page with static content (although I’d like to provide a client with the capacity to change the information in each of the three columns).

My first thought would be to create three articles. If you need this more often, you could use a custom field to indicate the column number.

BKawalec · 2011-11-23 08:07:01

I’d also just create three articles. I wouldn’t use categories or custom fields to indicate column numbers but pull these articles into columns by their Ids. The client won’t see anything in the Write tab. He will not be able to change column order, only article content.

merz1 · 2011-11-23 08:34:02

For a static page use:

one article and put the divs inside the article (The lazy way. Put a space before the div and the /div.)
three articles and use article_custom id="n" ... inside each div (that’s the best TXP way: content and design are separated)
code the whole static page template (the content part) in HTML (fire and forget)

For a client I recommend to edit three separate articles to not break the 3-col layout. This way the page template is not touched, the article form used is not touched, the CSS is not touched and the article is parsed via textile.

jakob · 2011-11-23 09:15:29

For a static page use:

one article and put the divs inside the article (The lazy way. Put a space before the div and the /div.)

… or what I suggested. It’s much easier to explain to a client to type ‘#####’ on a blank line or ‘+++++’ as a column break indicator than it is to get them to put in html divs with a space beforehand. Someday we’ll be able to do this approach with css multicolumns but IE is still a problem, although google will show you combined js/css approaches for retrofitting IE with that.

Given the various ideas in this thread – all valid in their own way – I would say the kind and distinctness of content and the reason for content separation should inform how you decide to deal with it in the back end. I’d be cautious about recommending one or the other as “best”.

davidpmccormick · 2011-11-23 10:18:11

Thanks all for the help.

D

philwareham · 2011-11-24 10:32:47

The simplest way is to use CSS3 columns, but unfortunately browser support is patchy at the moment – current webkit (Safari, Chrome), IE10 beta, Firefox and Opera all support it. Internet Explorer < 10 will fallback a single wide column. If you are OK with that go ahead and use it now…

.3column {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

Textpattern CMS

Textpattern CMS support forum

#1 2011-11-22 16:05:04

Three columns of text on a static page?

#2 2011-11-22 16:33:39

Re: Three columns of text on a static page?

#3 2011-11-22 17:50:23

Re: Three columns of text on a static page?

#4 2011-11-22 19:13:10

Re: Three columns of text on a static page?

#5 2011-11-22 19:29:20

Re: Three columns of text on a static page?

#6 2011-11-22 20:18:25

Re: Three columns of text on a static page?

#7 2011-11-23 08:07:01

Re: Three columns of text on a static page?

#8 2011-11-23 08:34:02

Re: Three columns of text on a static page?

#9 2011-11-23 09:15:29

Re: Three columns of text on a static page?

#10 2011-11-23 10:18:11

Re: Three columns of text on a static page?

#11 2011-11-24 10:32:47

Re: Three columns of text on a static page?

Board footer