Unable to implement Malo StyleSheet or multicolumn in TiddlyWiki

[Graeme Henson]

I've been beating my head against the wall trying to get this code/plugin to work to no avail. I'm apparently missing something huge because no matter what code or plugin I copy/paste from anywhere it never seems to work.I imagine I'm missing something about creating/implementing StyleSheets.

One example is this code for creating Multicolumn tiddlers: https://groups.google.com/forum/#!searchin/TiddlyWiki/malo$20stylesheet/tiddlywiki/5aq9cYiOmGo/80ULjcqtIQUJ  or at http://multicolumn.tiddlyspot.com/

I'll start off by creating a tiddler StyleSheet, give it a systemConfig tag and then enter in the code "[[MaloStyleSheet]]", then on that tiddler I enter in the code:

/***

Malo - CSS Library

Author:Vladimir Carrer

        

see: http://code.google.com/p/malo/

***/

/*{{{*/

  

/* CSS Grid */

/* dp = div percent */

.dp20,

.dp25,

.dp33,

.dp50,

.dp100{float:left; display: inline, *margin-left:-0.04em; } /* IE margin hack */

/*

.dp20{width:20%;}

.dp25{width:25%;}

.dp33{width:33.33%;}

.dp50{width:50%;}

.dp100{width:100%;}  */ /* original CSS. no margin possible */

.dp20{width:18%;}

.dp25{width:23%;}

.dp33{width:31.33%;}

.dp50{width:48%;}

.dp100{width:98%;}  /* changed it a little bit */

.clear{ clear:both;}

/* top border */

.dp100,.dp50,.dp33,.dp25{ border-top:1px solid #111;}

.dp100,.dp50,.dp33,.dp25{ padding-left: 1%; padding-right: 1%; margin-right:0%;} 

/*}}}*/

Then I'll create a Test tiddler with the code:

<<tiddler $1 "dp100">>
<<tiddler $2 "dp50">> <<tiddler [[$3]] "dp25">><<tiddler [[$4]] "dp25">> 

<<tiddler $5 "dp100">>

With all the $1/$2/$3/$4 stuff changed out for actual tiddlers, but nothing is happening. What am I missing? 

[Mat]

Are you using TW Classic or TW5? I.e which version? The ref you give is only for Classic.

<:-)

[Graeme Henson]

It might only be Classic, is there no way to convert a Classic plugin over to TW5?

[Mat]

On Sunday, September 6, 2015 at 11:35:19 PM UTC+2, Graeme Henson wrote:

It might only be Classic, is there no way to convert a Classic plugin over to TW5?

I'm afraid not.

<:-)

[PMario]

On Sunday, September 6, 2015 at 10:54:56 PM UTC+2, Graeme Henson wrote:

I've been beating my head against the wall trying to get this code/plugin to work to no avail. I'm apparently missing something huge because no matter what code or plugin I copy/paste from anywhere it never seems to work.I imagine I'm missing something about creating/implementing StyleSheets.

One example is this code for creating Multicolumn tiddlers: https://groups.google.com/forum/#!searchin/TiddlyWiki/malo$20stylesheet/tiddlywiki/5aq9cYiOmGo/80ULjcqtIQUJ  or at http://multicolumn.tiddlyspot.com/

I'll start off by creating a tiddler StyleSheet, give it a systemConfig tag and then enter in the code "[[MaloStyleSheet]]", then on that tiddler I enter in the code:

StyleSheets in TWc are no plugins. So __no__ systemConfig tag needed.

Just create a tiddler named MaloStyleSheet and include it into StyleSheet tiddler, as you wrote. Save the wiki. reload and it should work.

The basic functionality should also work with TW5. ... but the calls are different, since there is no <<tiddler>> macro anymore.

-mario

[PMario]

On Sunday, September 6, 2015 at 11:35:19 PM UTC+2, Graeme Henson wrote:

It might only be Classic, is there no way to convert a Classic plugin over to TW5?

Do you use TWc or TW5?
-m

[Graeme Henson]

TW5. Mostly I'm just trying to implement multiple columns using Transclusions of separate tiddlers (each is filled with lists), but getting problems at every turn.

I tried throwing together this code with Transcluded tiddlers:

/*COLUMNS*/

.twocolumns { display:block; 

column-count:2;

-moz-column-count:2; 

-webkit-column-count:2;}

.threecolumns { display:block; 

column-count:3;

-moz-column-count:3; 

-webkit-column-count:3;}

.fourcolumns { display:block; 

column-count:4;

-moz-column-count:4; 

-webkit-column-count:4;}

.fivecolumns { display:block; 

column-count:5;

-moz-column-count:5; 

-webkit-column-count:5;}

...but it just displays them as one big long list instead of breaking the tiddlers into multiple columns. At this point I don't really care how I'm able to achieve the effect, but holy carp is the coding in this driving me nuts.

[Ton Gerner]

Hi Graeme,

I tried throwing together this code with Transcluded tiddlers:

/*COLUMNS*/

.twocolumns { display:block; 

column-count:2;

-moz-column-count:2; 

-webkit-column-count:2;}

.threecolumns { display:block; 

column-count:3;

-moz-column-count:3; 

-webkit-column-count:3;}

.fourcolumns { display:block; 

column-count:4;

-moz-column-count:4; 

-webkit-column-count:4;}

.fivecolumns { display:block; 

column-count:5;

-moz-column-count:5; 

-webkit-column-count:5;}

In case of text in a tiddler use:

@@.threecolumns
All text to be displayed in three columns
@@

In case of transclusion use:

@@.threecolumns
<div>

{{Tiddler to be transcluded}}

</div>
@@

Hope that helps,

Ton

[Graeme Henson]

I tried doing something like that earlier, but it wasn't giving me the results I was looking for. I was able to cobble something together through trial and error that more or less achieves what I was looking for, but the code looks jacked up and it will likely break on different screens:

https://drive.google.com/file/d/0B8oiLzPSpgM6T0laa0hRaFY4LTA/view?usp=sharing

My StyleSheet looks like this:

/* custom styles for parallel columns. Classes cola and colb */ 

.ha {

    display:inline-block;

    width:30%;

    overflow:auto;

}

.hb {

    float:right;

    width:40%;

}

.hc {

    float:right;

    width:30%;

}

.cola {

    display:inline-block;

    width:30%;

    overflow:auto;

}

.colb {

    float:right;

    width:40%;

}

.colc {

    float:right;

    width:30%;

} 

.clearfix {

    overflow: auto;

} 

and my page code looks like this:

@@.ha

!!Helpful Links

@@

@@.hc

!!Department & Office Info

@@

@@.hb

!!Labeling Process

@@

@@.cola

First column List goes in here

@@

@@.colc

Third column List goes here

@@

@@.colb

Middle column List goes here

@@

There were a few problems when I tried transcluding multiple tiddlers, but mostly it would just dump them all in one big list and not distribute anything across columns. I had to break apart the headings from the Lists themselves because the List and Heading wouldn't play nice together and it would put the Heading in one column and then move the list to the next column. I had to do column .cola as a display:inline-block because if I tried to do float:left on it, all the lists would overflow outside of the tiddler box/container/thing (that overflow:auto part didn't seem to do anything). So everything I have in there just happened to work on my screen, but I know it won't work on other screens and ideally I'd like to do transclusion if that's more effecient, but I just don't know enough of CSS coding to know how to go about that. At some point even I'd like to change out alot of these text links and make it a bit more visually appealing with small buttons on a grid (while still maintaining these same column groupings), but that's a bit further down the road.

[Jeremy Ruston]

Hi Graeme

Just to be clarify, the CSS column-count property is really designed for situations where you want text to flow between columns. In your situation, where the content of the columns is entirely separate, then it's more appropriate to use floats, as you have done, or even tables.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f78d2828-27c6-4a3e-8134-f98a4a96ed9b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com