Simple Stack, or is there an easier way with code?

Classic Stacks
1

Hello, first of all thanks to all the contributors who make this a great forum. I’m redesigning my photography website using the Photographis VI theme. It consists mostly of image galleries which look great, and the only pages left are a couple of text pages using the RW styled text page, but with a nice background image displayed within the Photographis theme.

I want 2 columns of separate text, as opposed to 2 columns where the text wraps from the first to the second one. The code that I have seen to make a simple 2 column page all seems to wrap the text from one to the other. Is it possible to set up 2 columns with separate text pasting code into the inspector in RW?

Or, do I need to buy the Stacks plugin. This is a one time use, as I don’t design web sites often. Am I correct in understanding that any stacks page must start with the Stacks2 (soon to be Stacks3) plugin? I have tried uploading an image, but this forum will not allow new users to upload. Thanks for your help!

2

For a Styled Page you can use the CSS Column Property.

Here’s the simple version:

<div style="-webkit-columns: 100px 3; -moz-columns: 100px 3; columns: 100px 3;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Before the text add:

<div style="-webkit-columns: 100px 3; -moz-columns: 100px 3; columns: 100px 3;">

After your text add:

You can also as you mention add the code to RapidWeaver’s Custom CSS area – and just wrap the text within a div class. It will look like this:

<div class="columns">Here goes your text</div>

And then add the css to the RapidWeavers Custom CSS area:

.columns {
-webkit-columns: 100px 3;
-moz-columns: 100px 3;
columns: 100px 3;
}

For more info & code visit:

http://css3gen.com/css3-multi-column-generator/
http://www.w3schools.com/cssref/css3_pr_columns.asp

The advantage of the last solution is - less code mixed within your code, especially if you have different areas on your page that uses columns.

You can of course define different classes if you want to use both 2 and/or 3, 4… columns in your layout.

And for Stacks users:
At the bottom of there page (the free stacks area) there’s a free Column Stack with custom breakpoints:
www.defligra.com

PS: The Stacks Plugin isn’t a bad investments… the new version 3 coming soon kicks ass.

3

Defligra, thanks for taking the time to post your information. But I absolutely cannot get this to work at all. I’m sure it’s crystal clear to you, but I can’t get anything at all to display.

For the first simple version, I have copied and pasted (as plain text) your code into a styled text page, and nothing shows up in the preview mode. I tried selecting the text to Ignore Formatting, still nothing.

I have also tried your 2nd method of pasting the code you provided into the Custom CSS area, and still nothing will display in preview mode.

The links you provided appear to be for columns for a single block of text that flows from one column to the next, unless I’m missing something. I’m looking for 2 adjustable width columns, each with its’ own text that doesn’t flow to the next one.

Any help is much appreciated.