Critique my implementation of creating a centered layout

#1

hello all

I made several modifications in order to have a centered layout. As it has been brought up in The problem with “custom solutions”, whenever one starts making modifications to core tiddlers, it is periodic work to ensure your core changes do not break something in the future when you upgrade your TiddlyWiki.

My is dilemma I made a number of changes to the PageTemplate story at one point to have a static sidebar and a centered layout which is different than the Centralised theme. Two questions: 1. any general feedback on my approach for this and 2. how would I go about packaging these changes into a plugin?

$ _core_ui_PageTemplate_story.json (1.3 KB)

CustomStyleCenter.json (613 Bytes)

Creating a new page layout, centered edition
#2

So this is how it looks on my screen when I dump them onto tiddlywiki .com (and zoom out my screen some steps to clearly show everything here)

image
image1918×907 53.6 KB

Maybe there’s something on tiddlywiki .com interfering with your layout?

  1. any general feedback on my approach for this and

First off, I actually don’t think you have to overwrite any core tids for this. You can, for example, enforce styling by adding !important to the style defs. Or maybe it’s enough with higher specificity. Another approach might be to create a proper theme that the system lets you switch to.

I’ve done the former; one example would be my leftbar plugin, just to name something that is at least a bit related to your stuff, which is css based. I’ve never created a theme but the way to go about it is probably to copy an existing theme tiddler and modify it.

  1. how would I go about packaging these changes into a plugin?

Personally, the only way I know is to create stuff with TW itself and package them into plugins using the Tinka Plugin Packer.

1 Like
#3

Mark,

See Alternative Page Layouts which provides the mechanism to introduce modified PageTemplates as and alternative to the default one. This allows someone to switch back, but also for you to publish your alternate layout without core tiddler changes. It should be possibly for you to move your current work into a layout.

#4

Just in case it gives you any ideas …

A work-in-progress that I’m gearing towards not modifying any core tiddlers: BASIC Anywhere Machine.

Maybe the only trick worth pointing out is my use of HTML dialog element as a layer on top of the entire TiddlyWiki interface to provide my own custom GUI.

You’ll find stuff of interest in the tiddlers:

  • BASIC IDE
  • Startup Actions
  • $:/DefaultTiddlers
  • TW CSS override

Rock’n roll !

#5

Oh yeah, I should have mentioned: I’m doing the same sort of thing with the related BASIC Anywhere Machine: Programmer’s Reference.

Yeah, I’m a fan of HTML dialogs for this kind of GUI trickery.

#6

In the time since I posted it, I figured out a simpler way to achieve the same effect, by transcluding the sidebar into this modified PageTemplate/story. @twMat, I forgot to mention I removed the tag from the existing PageTemplate/sidebar

I did not know about Alternative Page Layouts, although I would have to spend more time figuring out how to reimplement what I already achieved.

* Add [[CustomStyleCenter]], which uses a modified version of the [[Centralised|https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fcentralised]] theme along with a few extra rules.
* Modify [[$:/core/ui/PageTemplate/story]] 
** Add extra div with story-1 class.
** add transclusion for [[$:/core/ui/PageTemplate/sidebar]] before the added closing div tag
* Remove tag from  [[$:/core/ui/PageTemplate/sidebar]]

$ _core_ui_PageTemplate_story(1).json (805 Bytes)

1 Like
#7

If you only need change how the elements of the default PageTemplate are displayed, you don’t need to modify the PageTemplate. You can do it with styles (*), as the other themes do it(*). (* some themes are packing other type of files)

If you need add/remove elements then do create(/partial clone) PageTemplate and then you have to use the Alternative Page Layouts.

I think you are creating a theme, then you can see how the other themes were created, for example “some” themes have the important field dependents because they have to use the styles os vanilla theme. (Also a theme can have a own PageTemplate)

Maybe in your styles you want change this:

html .tc-sidebar-scrollable { position: static;

to

html .tc-sidebar-scrollable { left:0;

to solve the align in the left without the gap