Multi-Column Option at the Article Level

herb200mph · **Posted:** Fri Dec 14, 2007 7:51 pm

At present, J!1.5 allows selection of single or multiple column display on the front page, within Sections and within Categories

I'd like to suggest a new element whereby single or multiple, let's say maximum of 3 or 4, columns could be selected for layout of individual articles that appear by themselves as single articles that are intended to be listed as "Uncategorized" or static content.

I believe that allowing users to create 2-column layouts at the article level would be a good addition and allow more creative use of space to create narrower, easier-reading columns, vs screen wide run-on text for static content not assigned to sections or categories.

If I've missed something in the process of article-type selection, please reply and advise.

kelb · **Posted:** Wed Dec 26, 2007 12:49 am

Trying to columnize (!?) in article level is not an easy option. So many people wouldn't need this type options.

tcp · **Posted:** Wed Dec 26, 2007 9:45 pm

Not a Q&T issue. Moving to the parent forum.

tcp

hamsel · **Joined:** Sun Oct 30, 2005 1:39 am **Posts:** 19

herb200mph -

I agree with you - the readability of a text-savvy article is poor with the one-column approach at the article level. The only way I've found around the problem is to stuff the text into a table and make the text divisioning the hard way.

It would be a real nice feature to be able to select a multi-column lay-out at the article level, making the text flow from one column to the next.

Anyone having a more elegant solution than mine?

/Per Hertz

herb200mph · **Posted:** Mon Mar 24, 2008 4:13 pm

Don't you know it!!! Maybe a script driven thingy that will allow "column linking" for text flow from Col 1 > Col 2 > Col 3, for example. The static table requires manual breaking of the article text flow and that can be a pain when doing back-edits.

Hey....we can dream and hope...LOLLLL

logicalnot · **Joined:** Mon Feb 18, 2008 10:01 am **Posts:** 15

I am looking the same features.

Most of the screens are horizontal, so why bother scrolling down if you have enought screen real estate to have your text spanning on two or more collumns.
And yes, it will be SO much easier to read.

jjsmulo · **Joined:** Fri Dec 08, 2006 8:59 am **Posts:** 31

I have a client who desires this. I wish it were already a possibility.

docdik · **Joined:** Sat Jan 10, 2009 12:39 am **Posts:** 9

I guess this is still not possibe is it I could do with this too

corradomatt · **Posted:** Sat Apr 25, 2009 4:28 am

I managed to get the page to divide into multiple columns through css....(actually I stole the code from another website!)

The only problem is that I can't get the text to move over to the other columns.

Here is the css....

Code:

/* All */
.col2-set, .col3-set, .col4-set, .col5-set { column-count:2; }

/* Col2 */
.col2-set .col-1, .col2-set .col-2 { width:48.5%; }
.col2-set .col-1 { float:left; }
.col2-set .col-2 { float:right; }

/* Col2-alt */
.col2-alt-set .col-1 { width:32%; }
.col2-alt-set .col-2 { width:65%; }
.col2-alt-set .col-1 { float:left; }
.col2-alt-set .col-2 { float:right; }

/* Col3 */
.col3-set .col-1, .col3-set .col-2, .col3-set .col-3 { float:left; width:31.3%; }
.col3-set .col-1, .col3-set .col-2 { margin-right:3%; }

/* Col4 */
.col4-set .col-1, .col4-set .col-2, .col4-set .col-3, .col4-set .col-4 { float:left; width:22%; }
.col4-set .col-1, .col4-set .col-2, .col4-set .col-3 { margin-right:4%; }

/* Table Columns */
table .col-1, table .col-2, table .col-3, table .col-4 { float:none !important; margin:0 !important; }
.col3-set td.spacer { width:3%; }
.col4-set td.spacer { width:4%; }

Here is the way that I was using the code in the html for a 3 column layout.....

Code:

<span class="col3-set">
<span class="col-1">blah blah blah</span>
<span class="col-2">blah blah blah picture or something</span>
<span class="col-3">more blah blah blah</span>
</span>

As I said, the columns break up nicely...but not text is sent over to the columns. Maybe that has something to do with my particular template css (I didn't design the template or right the majority of the CSS for it.) I am going to try this with another template and see what happens.

Maybe someone here can help me sort this out and figure out what I'm missing.

corradomatt · **Posted:** Sat Apr 25, 2009 4:33 am

Ok...so testing within another theme and the above code works.....now I just need to figure out why this doesn't work with the theme I am currently using. Maybe something to do with the floating divs or something.....I don't know CSS that well......

Wish me luck!

becyn · **Joined:** Mon Aug 11, 2008 1:16 am **Posts:** 312

You really don't need anything but span or divs with a bit of CSS.
I read somewhere that future versions of Joomla will be "tableless" designs.
So i've been honing my skills( such as the are). None of my components use tables for positioning.

Something like this may work for you:

Code:

/*CSS*/
div.main{width:100%}
div.col{width:33%}

<body>
<div class="main">
<div class="col">bla bla</div.<div class="col"> more bla</div><div class="col">excesssive blather</div>
</div>

Of coarse the css has to be in the head with the appropriate style tags.

petermatra · **Joined:** Fri Mar 28, 2008 6:45 pm **Posts:** 75

So has anyone figured out the ability to get article text to flow through columns without a manual layout?

cool_edward · **Joined:** Thu Apr 09, 2009 12:32 pm **Posts:** 2

The beset solution I found (it's easy to integrate with a joomla template):
http://randysimons.nl/125,english/129,m ... lumn-text/
http://randysimons.com/overige/multicolumn/

petermatra · **Joined:** Fri Mar 28, 2008 6:45 pm **Posts:** 75

Cool, thanks. It definitely looks cleaner than everything else I have seen out there. How are you invoking the JS? Do you put it at the end or the beginning of the text? What plugin do you use? My site is 950 wide which is very wide and hard to read long lengths of text. I have had several comments on this.

My other concern is adding images? I like to float images in the text as you can see from my site. Have you experimented with this. Unfortunately we are about to launch our next issue so I need to wait before I implement this as I need to test the code.

You can see my site at http://www.awantedmag.com
Cheers :pop

Pete

cool_edward · **Joined:** Thu Apr 09, 2009 12:32 pm **Posts:** 2

Peter,
Quite nice layout but the code is at least messy! Keep a proper DIVs structure - that's crucial for the multicolumn solution. Just try the code below.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="multicolumn.js"></script>
<script type="text/javascript">   
multiColumnSettings=new MultiColumnSettings;
multiColumnSettings.classNameScreen='columnized';               
window.onload = function () {
new MultiColumn(document.getElementById("content"),multiColumnSettings);
}
</script>

<style type="text/css">
.columnized div {float:left; width:18em; padding:10px; position:relative; text-align: left; margin:0;}
/*.columnized div .readOn {position: absolute; right: 1em; bottom: -0.5em; color: #999999; }*/
</style>

</head>

<body>
<!--BEGIN: SIMPLIFIED CONTENT-->
<div id="content">
   <div id="proper_content">
<p>
<!-- paste here a lot of text -->
</p>
   </div>
</div>
<!--END: SIMPLIFIED CONTENT-->
</body>
</html>

I experimentally integrate multicolumn layout into my jooma template (based on beez): http://ci.swps.pl/test/index.php?option ... Itemid=126 - thats only a test so the layout is rather obscure.

Good luck
Krzysztof

Joomla! Discussion Forums

Multi-Column Option at the Article Level

Quick reply

Who is online