[TW5] 3 properly functioning columns. I'm begging for help making this work. Please. I can't even sleep.

[Leo Staley]

I know it's possible. I just do not have the computer programming skills to make it happen, even after 100 hours of trying to learn CSS, HTML and TiddlyWiki the past month. 

All I want is 3 things which I know are possible. They're probably even EASY for those who know what they're doing. 

1) My 3 columns from the old TiddlyWiki back, (Okay, I also want the topbar and the columns collapsible, but this has been done already. I can't do it. (Best Case Scenario would be to have something very close to http://tbgtd.tiddlyspot.com/))

2) A simple, straightforward color scheme that doesn't hurt my eyes, like current grey one does. (Again, tbGTD is the best i've found, but other dark ones are great too)

3) A more compact, tighter presentation in both view and edit mode, without all of the extra vertical and horizontal empty space, like TWC used to do. 

It's not that I dislike the current visual setup of TW5. I just can't even work in it. I need the old look back. Everything is too vertically stretched and/or filled with empty space, and or confined too narrowly when I need it wider. (When I use Preview, the columns are just so ridiculously narrow.) I don't want to have to change the story-river and tiddler width every single time I use a different monitor! :(

I literally cannot use Tiddlywiki5 as it is currently visually setup. 

One major reason I can't even edit it to my needs is because everything is so radically decentralized and scattered compared to TWC. It's too hard. Too confusing. Everything in the style sheet(s) has its own specified colors distinct from the colourmap, and different absolute and fixed and relative positions and widths distinct from everything else. So when I try to experiment with a single change, everything breaks.

I have tried so hard, and put so many hours of reading into trying to understand how to do it myself that even I can't believe it. I've analyzed as much as I can of Ton Gerner's http://tw5topleft.tiddlyspot.com/ and I've figured out more CSS and HTML than I ever wanted to know, But I still don't know something as simple as how to make the side columns float to their respective sides instead of having their position properties. 

In the process of this though, I wrote out explicitly what I learned about Ton's buttons. Here that is, in case it helps anybody. 

Enter code here...

The Tiddler $:/_topmenu contains the HTML element <div> putting the Left Toggle Button and Right Toggle Button on the page.

This Tiddler is tagged "$:/tags/PageTemplate" so that it is displayed at the same level as the story-river and 

sidebar-header html elements. 

Displayed in that div element are two TiddlyWiki wikified items. The first transcludes (displays the wikified contents of) 

the contents of $:/_top-toggle-left-sidebar-button, and the second transcludes the contents of $:/_top-toggle-width-

sidebar-button. I'll explain how they function below.

  

And directly below that, HTML <div> element putting the breadcrumbs on the page. 

The Tiddler $:/_stylesheet/topmenu contains the CSS stylesheet how to be "Fixed" on the page and properly interact with the 

other elements. I don't understand the "TOP MENU CLEARANCE" part of this stylesheet.

The buttons work like this: 

The Tiddler $:/_top-toggle-left-sidebar-button contains 1) an HTML <span> element containing a bunch of important TiddlyWiki syntax, 

and 2) Some CSS stlying. 

The visible content of this is a Button. This button tells tiddlywiki to add, or remove, the "$:/tags/stylesheet" tag to this tiddler,
so as to toggle whether or not the CSS in this Tiddler is to be used. 

When the button is pressed, 

   this Tiddler is tagged stylesheet, 

   the Tiddler $:/_leftmenu gets tagged with "$:/tags/PageTemplate", and so will now be displayed as part of the whole page template, (like the topmenu). 

When the button is pressed again, 

   the "$:/tags/stylesheet" tag is removed, 

   and the default value is used instead. The default value is is in the Tiddler "$:/_stylesheet/leftmenu" which is just 

permanently tagged as a stylesheet. 

I don't know what the @@ thing is or does.

The $:/_top-toggle-width-sidebar-button does basically the same thing, but for the other sidebar. (unfortunately, the story river doesn't expand to fill the whole remaining area when this one is collapsed)

Please. Someone. Help me. I'm begging. I can't write the necessary code. I can't even edit it. I've been trying.

I know it's not a big deal to anyone here, but I personally can't use TW5 until I get these things fixed and working, and I've now given up trying. 

I've given it my best, but I have to stop now, so if anyone would be kind enough to spend some time on this for me, I would be so very, inexpressibly grateful. 

If you can't help, I understand. I'm not trying to demand anything from anyone or insult or offend anyone. 

Cheers,

-Leo

[Jeremy Ruston]

Hi Leo

I'm travelling today and so can't answer fully, but I would like to point out that what you are trying to achieve (giving TW5 the appearance of TWC) is not really something I would class as "easy".

Doing it would require pretty good knowledge of HTML and CSS, and TiddlyWiki's internals. So, you shouldn't beat yourself up for not being able to achieve it with your present level of knowledge.

Of course it would be good to make what you want to do be an easy thing to accomplish. That will require a new theme, so that users can just switch.

From my perspective you're doing pretty well. You are from time to time setting yourself goals that make you a pioneer, doing stuff that no one else has yet tried. As such, your achievements are an impressive testament to your intuition and dedication.

Anyhow, one part of what you are after will definitely be in 5.0.8 - the ability to switch between colour palettes independently of the current theme.

I won't promise to get a TWC theme in for 5.0.8 but I will give it a go,

Best wishes

Jeremy

—
jeremy...@gmail.com

--
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.
For more options, visit https://groups.google.com/groups/opt_out.

[PMario]

On Wednesday, February 19, 2014 10:02:39 AM UTC+1, Leo Staley wrote:

One major reason I can't even edit it to my needs is because everything is so radically decentralized and scattered compared to TWC. It's too hard. Too confusing. Everything in the style sheet(s) has its own specified colors distinct from the colourmap, and different absolute and fixed and relative positions and widths distinct from everything else. So when I try to experiment with a single change, everything breaks.

As Jeremy pointed out, It won't be easy to have a TWc theme with the current TW5 setting. Because the general concept of the theme is _totally_ different by design. There haven't been any smartphones and tablets around as TWc was developed. ... Now 2014 there are _more_ smartphones and tables in use as PCs and the number is growing. ... So imo that's why TW5 has a mobile setup in mind, which dosn't allways fit a desktop setting.

... You pinted to tbGTD, which is a great application, but it wasn't designed in a month or two. It evolved over time (probably years). eg: the x-tag ... tagsearchplugin / dialog imo needed 2 month, to look and work like it does atm. And this is only one dialog!!! ... so creating an eg dGSD like theme will take a year, if you don't do it fulltime.

As an example: tbGTD uses 36 dedicated plugins. Some of them work with every TWc and have not been written by Tobias. Many of them, have been written by Tobias and are explicitely written for tbGTD. So may be Tobias may jump in here and tell, how long he needed, till _everyting_ worked in a way, like it is now.

So I think you need to set yourself SMARTER goals [1]. Otherwise you will be overwhelmed and frustrated. ... Be aware, Jeremy started to hack on TWc at 2004. So there is 10++ years of do's and don'ts in his head :)

In general goals should be:

S ... Selective
 - You have to start with something specific. ... I want tbGTD with TW5,  is not specific. Simply because there may be a 1000 specific goals in it. So reading your post it is overwhelming, because ... it is!

M ... Manageable
 - Start with small goals. One at a time. As you wrote you needed to learn about CSS and HTML tags. So this is a problem for everyone from time to time. You don't need to know all the stuff, you just need to know, where to find the info :) So if you know the listed sources [2..7] I use a lot .. fine. If not, take some time to see, if they are usefull. Have a look for "reference guides" and tutorials if needed. -> May be make this a SMARTER goal !;)

A ... Achievable
 - Small goals are easier to achieve than big goals. ... So break them down, to small chunks. Eg: You wrote, that TW5 has a lot of "whitespace" in the existing theme. So knowing / understanding, how it actually works is key here. Because if you don't know the existing theme, how will you make it better / different ... (and forget, how TWc did it. It won't help you. see my "Last words")

So experimenting with the existing stuff and make it less whitespace is easy, if you know how to experiment with a browser. ... Just use the "dev tools" in Chrome or FireFox. I'll upload a short video, how I do theme experiments. ... just for you, and others that may be interested. It won't solve your problems, but it may help you to see what's going on.

R ... Relevant
 - So your achievable goals should be relevant for your "big goal" ... eg: experiment with the existing theme, to understand how CSS works. experiment with the existing theme, to understand the general concept of it. ... so in the future you will be able to create your own concept, that may fit your needs.
 - For TW5 in specific:
   - Understand PageLayout
   - ViewTemplate
   - EditTemplate
   - _plus_ the relevant CSS sections.
 - as in Manageable described. .... one by one. not everything at the same time. ..... It's easy to measure. If you get frustrated, the goal was not SMART enough ;)

T ... Time-bound
 - Important: __Write down the time you tink, you will need for "one SMART goal"__
 - If you think, it will need 20 minutes to find something out, but you only have 10 minutes, until you need to go for a bus. ... It doesn't work, because the goal is not Achievable or Realistic. (so the R could be Realistic too :)
 - If you need to deal with parameters, that you don't understand, it isn't achievable or realistic by design. You need to go to the reference pages first. This is a SMART goal!

E ... Evaluate
 - After you achieved your goal, have a look at the time you needed and the time you planned (that's why you need to write it down!). When you do this several times, you'll see your forcast will be better and better, So you are less frustrated, because you know in advance how long it will take.

R ... Reward
 - If you achieved a "major" goal, which may be 2 or 3 SMART goals. Give yourself a Reward, that makes you happy. ... eg: Take time for your girlfriend. That will make her happy too :)
 - The important part here is, to really "consume" the Reward. If you don't do it, the system described above will fail and you will be frustrated ;)

--------------------
Last words:

One info, that I personally think, that is important. ... TWc theme works with mechanisms that are 10 years old. If you try to use the exact same stuff in TW5 imo you will fail. TW5 needs to use HTML5 components to create a similar layout but you can't copy the underlaying templates and concepts. TWclassic reached its limits. And the theme tweaking imo was one of the reasons to reboot with TW5

--------
For the beginning the above system works well with pen and paper ;)
Here's a template.

----- begin of template ------

S ... Selective



M ... Manageable



A ... Achievable



R ... Relevant



T ... Time-bound


E ... Evaluate


R ... Reward



-------- end of template

have fun!
mario
PS: the video will follow.
PPS: The above template is no joke.

[1] http://en.wikipedia.org/wiki/SMART_goals
[2] https://developer.mozilla.org/en-US/   at the bottom left see "Web Plattform"
[3] https://developer.mozilla.org/en-US/docs/Web/HTML   .... Page with links
[4] https://developer.mozilla.org/en-US/docs/Web/HTML/Element ... HTML Element overview detailed reference
[5] https://developer.mozilla.org/en-US/docs/Web/CSS   ... CSS Page with links
[6] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference  .... CSS Element overview
[7] https://developer.mozilla.org/en-US/docs/Web/JavaScript ... Javascript ... you'll find the reference guid now :)

[Ton Gerner]

Hi Leo,

First of all:

If you like TW Classic better than TW5, why don't you stay with TWc?
At the moment I use my TWc wikis alongside my TW5 ones.
And to be honest, the main things I still do in TWc (like my wiki about the history of the western part of Amsterdam [1], wikis about TWc itself, about portable software and so on).

Just wait and there will be more color schemes, themes etc.

On the other hand, if you want to use TW5, you have to learn step by step.
I think you have to read Mario's post very well and act accordingly.

When I started (in 2007) to use TW Classic for my description about the history of the western part of Amsterdam [1], I started with the default layout of TiddlyWiki. At that moment I knew a little bit of HTML and nothing about CSS.
During the years I learned the basics of CSS step by step. I just learned what I needed to change my TWc the way I wanted it.
It took me to april 2011 before I reached the layout I use now (with dropdown menus, tiddlersbar, tabs etc.).

At the end of september 2013 I started as a newbie with TW5. For sure it helped I used and experimented with TWc.
Since I missed a few things in the layout I got used to in TiddlyWiki Classic 1, I started with modifying the layout of TW5.
And I used TW5 also to document my experiments. And that led to the guides I made.
(But for me there is still a lot to learn about TW5, especially that list and filter stuff).

So, start simple and experiment, experiment, experiment. Small steps at a time!
As an example look at the 'Changelog' of my guides (e.g. the 'oldest' tw5toolbar), and you will see I did it step by step.

That said, some clarifications about what you observed, hope that helps.

On Wednesday, February 19, 2014 10:02:39 AM UTC+1, Leo Staley wrote:

I know it's possible. I just do not have the computer programming skills to make it happen, even after 100 hours of trying to learn CSS, HTML and TiddlyWiki the past month. 

All I want is 3 things which I know are possible. They're probably even EASY for those who know what they're doing. 

1) My 3 columns from the old TiddlyWiki back, (Okay, I also want the topbar and the columns collapsible, but this has been done already. I can't do it. (Best Case Scenario would be to have something very close to http://tbgtd.tiddlyspot.com/))

2) A simple, straightforward color scheme that doesn't hurt my eyes, like current grey one does. (Again, tbGTD is the best i've found, but other dark ones are great too)

3) A more compact, tighter presentation in both view and edit mode, without all of the extra vertical and horizontal empty space, like TWC used to do. 

It's not that I dislike the current visual setup of TW5. I just can't even work in it. I need the old look back. Everything is too vertically stretched and/or filled with empty space, and or confined too narrowly when I need it wider. (When I use Preview, the columns are just so ridiculously narrow.) I don't want to have to change the story-river and tiddler width every single time I use a different monitor! :(

Did you have a look at my guide about a top menu and toolbars?
There are 4 options for fixed width/fluid width and sidebar/hidden sidebar.
 

I literally cannot use Tiddlywiki5 as it is currently visually setup. 

One major reason I can't even edit it to my needs is because everything is so radically decentralized and scattered compared to TWC. It's too hard. Too confusing. Everything in the style sheet(s) has its own specified colors distinct from the colourmap, and different absolute and fixed and relative positions and widths distinct from everything else. So when I try to experiment with a single change, everything breaks.

I have tried so hard, and put so many hours of reading into trying to understand how to do it myself that even I can't believe it. I've analyzed as much as I can of Ton Gerner's http://tw5topleft.tiddlyspot.com/ and I've figured out more CSS and HTML than I ever wanted to know, But I still don't know something as simple as how to make the side columns float to their respective sides instead of having their position properties. 

In the process of this though, I wrote out explicitly what I learned about Ton's buttons. Here that is, in case it helps anybody. 

Enter code here...

The Tiddler $:/_topmenu contains the HTML element <div> putting the Left Toggle Button and Right Toggle Button on the page.

This Tiddler is tagged "$:/tags/PageTemplate" so that it is displayed at the same level as the story-river and 

sidebar-header html elements. 

Displayed in that div element are two TiddlyWiki wikified items. The first transcludes (displays the wikified contents of) 

the contents of $:/_top-toggle-left-sidebar-button, and the second transcludes the contents of $:/_top-toggle-width-

sidebar-button. I'll explain how they function below.

  

And directly below that, HTML <div> element putting the breadcrumbs on the page. 

The Tiddler $:/_stylesheet/topmenu contains the CSS stylesheet how to be "Fixed" on the page and properly interact with the 

other elements. I don't understand the "TOP MENU CLEARANCE" part of this stylesheet.

The height of the top menu depends on what you need to display.
For the height of the top menu with only both 'arrow' buttons I needed 25px.
For the height of the top menu with both 'arrow' buttons and 2 rows of breadcrumbs I needed 70px.
(For the height of the top menu with toolbar buttons (tw5toolbar) I needed 45px)
If you add a top menu, it can overlay the top of your tiddlers. Therefore you need to shift the top of the story river downwards.
That you can do with "transform: translate".
I use a line under the title of the tiddler and a line under the title of the wiki and I want to align these 2 lines.
You can shift the title of the tiddler up/down (transform: translate) and/or shift the title of the wiki (sidebar-header top) up/down.
It becomes even trickier when you modify the tiddler layout as I did with the toolbar above the title, but the principle stays the same.
Experiment with changing these values and yes lines under the titles will help ;)

The buttons work like this: 

The Tiddler $:/_top-toggle-left-sidebar-button contains 1) an HTML <span> element containing a bunch of important TiddlyWiki syntax, 

and 2) Some CSS stlying. 

The <span> ...</span> is only used to add a tooltip.
With the fieldmangler you can add/remove the tag $:/stylesheet
If it is tagged with $:/tags/stylesheet the given CSS in that tiddler will be used (the styles itself do not display in the tiddler by adding @@display:none; ... @@ around the styles.
 

The visible content of this is a Button. This button tells tiddlywiki to add, or remove, the "$:/tags/stylesheet" tag to this tiddler,
so as to toggle whether or not the CSS in this Tiddler is to be used. 

When the button is pressed, 

   this Tiddler is tagged stylesheet, 

   the Tiddler $:/_leftmenu gets tagged with "$:/tags/PageTemplate", and so will now be displayed as part of the whole page template, (like the topmenu). 

When the button is pressed again, 

   the "$:/tags/stylesheet" tag is removed, 

   and the default value is used instead. The default value is is in the Tiddler "$:/_stylesheet/leftmenu" which is just 

permanently tagged as a stylesheet. 

Correction:
$:/_leftmenu is tagged with with $:/tags/PageTemplate ALL THE TIME, while the tag $:/tags/stylesheet will be toggled on/off.

$:/_stylesheet/leftmenu just contains display: none, so you see nothing of it.
The styles in $:/_top-toggle-left-sidebar-button will be applied when this tiddler gets tagged with $:/tags/stylesheet.
 

I don't know what the @@ thing is or does.

See Styles and Classes in WikiText at http://tiddlywiki.com/
 

The $:/_top-toggle-width-sidebar-button does basically the same thing, but for the other sidebar. (unfortunately, the story river doesn't expand to fill the whole remaining area when this one is collapsed)

The $:/_top-toggle-width-sidebar-button does exactly what is described in my guide (tw5topleft):
The button increases the width (in my case from 686 to 868px but that can be changed) of the tiddlers and hides the sidebar.
If you want more functionality like fluid width, see my guide tw5toolbar which gives you 4 options for tiddler width/sidebar.

As I already said, start simple and experiment, experiment, experiment. Small steps at a time!

Cheers,

Ton

[1] http://www.tongerner.tk/
[2] http://tongerner.tiddlyspot.com/
 

[PMario]

On Wednesday, February 19, 2014 12:49:02 PM UTC+1, PMario wrote:

...

So experimenting with the existing stuff and make it less whitespace is easy, if you know how to experiment with a browser. ... Just use the "dev tools" in Chrome or FireFox. I'll upload a short video, how I do theme experiments. ... just for you, and others that may be interested. It won't solve your problems, but it may help you to see what's going on.

Here's the video: http://youtu.be/Jva7Azqu0hs  about 16 minutes
Any feeback very welcome!

have fun!
mario

[Ton Gerner]

Hi Mario,

Very instructive video.

Thanks,

Ton

[HansWobbe]

Thanks, Mario !!  Cheers -- Hans

[Danielo Rodríguez]

Very useful Mario. Thank you very much! Danke schön!

[Leo Staley]

Hey Guys.

Thanks very much. You made me rethink my decision to try doing all I'm trying to do with TiddlyWiki5. I've gone back to TWC, and am going to try to build what I want from the ground up. It's going to take a lot of hours of work, and it won't be very future-proof, but It's the best route, i think. I've seen all the things I want already implemented in TWC in various places, and I think it just may be possible to pull it off. I've actually made a lot of progress this last week, have a clear set of ToDo's, etc.

Ton: Thanks for all your additional explanations there. 

Pmario: Thanks for that video! And thanks for all the advice on setting goals.