TW5: How to create another ADD tiddler button with predefined content?

[Chuck R.]

My system: TW5.1.19 stored on tiddyspot.com, using Chrome to access it, using TW markup

On the right side of my TW there are default buttons like "+" which adds a new tiddler. How do I add another ADD button which has predefined content and tags? I'm adding one study per new tiddler and I'd like each study tiddler to have a tag of "study" but also have this content as a template: 

Source:

! Findings

! Abstract

I'm new to this type of changes to TW so if you could explain each steps, where each data goes, and speak slowly, I think I will get it. :)

1. Which tiddler holds all the buttons at the top of the right hand panel? What is this panel called?

Thank you!

[A Gloom]

something to start you on, getting ready to slumber like the dead...

the icons/buttons right under the search bar, that area is called the page controls bar

displayed by $:/core/ui/SideBarSegments/page-controls & $:/core/ui/PageTemplate/pagecontrols

ControlPanel/Toolbars/PageControls and the Tools tab control what is displayed there, any custom button you make if tagged as shown below with appear listed with the system icons

system buttons can be found here:
More tab, Explorer

core/ui/Buttons/

don't edit system buttons but clone one and edit it to make a custom button

tag
$:/tags/PageControls
will put a custom button in the Page Control bar

[Eric Shulman]

On Thursday, December 19, 2019 at 3:17:36 AM UTC-8, Chuck R. wrote:

On the right side of my TW there are default buttons like "+" which adds a new tiddler. How do I add another ADD button which has predefined content and tags? I'm adding one study per new tiddler and I'd like each study tiddler to have a tag of "study" but also have this content as a template: 

Source:

! Findings

! Abstract

I'm new to this type of changes to TW so if you could explain each steps, where each data goes, and speak slowly, I think I will get it. :)

The right hand panel is called "the Sidebar".  The "Page Controls" buttons that appear at the top of the sidebar (e.g., "new tiddler", "control panel", "save changes", etc.) are not stored in a single tiddler.  Rather, each button definition has it's own tiddler, and these tiddlers are all tagged with "$:/tags/PageControls" to indicate that they should appear in that part of the Sidebar.

To define your own button, create a new tiddler (e.g., "MyButton")

1) First, add the $:/tags/PageControls tags to that tiddler.

2) Next, enter your button definition into the text area, like this:

<$button class="tc-btn-invisible"
   <$list filter="[<tv-config-toolbar-icons>match[yes]]">
      {{$:/core/images/spiral}}
   </$list>
   <$list filter="[<tv-config-toolbar-text>match[yes]]">
      <span class="tc-btn-text"><$text text="New Study"/></span>
   </$list>
   <$action-sendmessage $message="tm-new-tiddler" tags="study" text={{MyButtonTemplate}}/>
</$button>

3) Then, add a new field named "caption".  In this field, enter:

{{$:/core/images/spiral}} New Study

4) and add another new field named "description".  In this field, enter:

Use this button to create a new Study tiddler with default content

Then, create a separate tiddler named "MyButtonTemplate", containing the default content you want, i.e.,

Source:

! Findings

! Abstract

Once you have defined these tiddlers, it will automatically appear as a Page Control at the top of the Sidebar.

You can re-position this button to put it the desired order alongside the other PageControls

To do this, open the $:/ControlPanel (click the gear icon in the Sidebar).

1) The $:/ControlPanel has multiple levels of "tabs" for getting to the controls you need.

2) Select the "Appearance" tab (across the top).  This will show a second level of tabs:

"Palette", "Story View", "Theme", "Toolbars" and "Theme Tweaks".

3) Select the "Toolbars" tab.  This will show a third level of tabs, displayed vertically on the left:

"Edit Toolbar", "Editor Toolbar", "Page Toolbar" and "View Toolbar".

4) Select the "Page Toolbar" tab.  This will display a set of checkboxes, showing all the buttons that are tagged with "$:/tags/PageControls".

If you've created your tiddler correctly, your new button will appear at the bottom of this list.

To reposition it, just grab it with the mouse and drag it to move it within the list.

That should do it.  Let me know how it goes...

enjoy,

-e

[Chuck R.]

Thanks Eric. Now I can see how all the parts link together and understand how it all works. 

I did get the new spiral button on the page control bar but it also has a "</$list>" on the page control bar. My first thought is a mismatched or extra "</$list>" but I don't see one. Any ideas what is going on? I simply copied and pasted your code from this group into the tiddler. 

2 changes I made: 

But button tiddler title is actually "AddStudyButton" and I made this change to rename the AddStudyTemplate: 

   <$action-sendmessage $message="tm-new-tiddler" tags="study" text={{AddStudyTemplate}}/>

[Chuck R.]

I can change the icon for my Add Study button by changing the spiral image in this line right?

     <$list filter="[<tv-config-toolbar-icons>match[yes]]">
      {{$:/core/images/spiral}}

   </$list>

 

For the Add Study icon I plan to clone the add button and just color the fill to orange to make it simple. I still have to figure out how to change the color still.

[Eric Shulman]

On Thursday, December 19, 2019 at 4:44:48 AM UTC-8, Chuck R. wrote:

Thanks Eric. Now I can see how all the parts link together and understand how it all works. 

I did get the new spiral button on the page control bar but it also has a "</$list>" on the page control bar. My first thought is a mismatched or extra "</$list>" but I don't see one. Any ideas what is going on? I simply copied and pasted your code from this group into the tiddler. 

The first line of the example button definition seems to have lost a closing ">" when I copied it into the GoogleGroups message.

<$button class="tc-btn-invisible"

should be:

<$button class="tc-btn-invisible">

-e

[Eric Shulman]

You don't need to make a new button image.  "Spiral" is an SVG image.  For *most* SVG images, you can change the color using the "@@fill:... @@" inline CSS syntax, like this:

@@fill:orange; {{$:/core/images/spiral}}@@

enjoy,

-e

[Eric Shulman]

On Thursday, December 19, 2019 at 4:58:09 AM UTC-8, Eric Shulman wrote:

You don't need to make a new button image.  "Spiral" is an SVG image.  For *most* SVG images, you can change the color using the "@@fill:... @@" inline CSS syntax, like this:

@@fill:orange; {{$:/core/images/spiral}}@@

Oh... I see you wanted to use the New Tiddler "+" image.   In that case, use: 

@@fill:orange; {{$:/core/images/new-button}}@@

-e

[Chuck R.]

Ok the action is working but the button is still showing up in the page control area on the sidebar as a gray dash. Here's my code in the  "AddStudyButton" tiddler. 

<$button class="studybutton">
   <$list filter="[<tv-config-toolbar-icons>match[yes]]">

@@fill:orange;      {{$:/core/images/new-button}}@@

   </$list>
   <$list filter="[<tv-config-toolbar-text>match[yes]]">
      <span class="tc-btn-text"><$text text="New Study"/></span>
   </$list>


   <$action-sendmessage $message="tm-new-tiddler" tags="study" text={{AddStudyTemplate}}/>
</$button>

Note that I took out the class from button of "tc-btn-invisible" because a space would appear in the page controls where the button was supposed to be. 

I replaced "tc-btn-invisible" with the class "studybutton" which is in my TW global "Stylesheet". 

.studybutton { color:orange; }

I don't understand why the button is rendering as a gray dash when my new button image is the old $:core/images/new-button.

[Mohammad]

Hi Eric,

 Thanks for this lesson!

Adding elements to Tiddlywiki standard UI is not described clearly in tiddlywiki.com! By my best knowledge only adding new tabs to sidebar is explained!

I think it would be great if someone could explain in two or three more lessons the below items

- adding elements to tiddler view toolbar

- adding elements to tiddler edit toolbar

- adding elements to tiddler editor toolbar

--Mohammad

[Mohammad]

This may be give a more consistent result

replace

<$button class="tc-btn-invisible">

with

<$button class=<<tv-config-toolbar-class>> >

--Mohammad

On Thursday, December 19, 2019 at 3:51:11 PM UTC+3:30, Eric Shulman wrote:

On Thursday, December 19, 2019 at 3:17:36 AM UTC-8, Chuck R. wrote:

On the right side of my TW there are default buttons like "+" which adds a new tiddler. How do I add another ADD button which has predefined content and tags? I'm adding one study per new tiddler and I'd like each study tiddler to have a tag of "study" but also have this content as a template: 

Source:

! Findings

! Abstract

I'm new to this type of changes to TW so if you could explain each steps, where each data goes, and speak slowly, I think I will get it. :)

The right hand panel is called "the Sidebar".  The "Page Controls" buttons that appear at the top of the sidebar (e.g., "new tiddler", "control panel", "save changes", etc.) are not stored in a single tiddler.  Rather, each button definition has it's own tiddler, and these tiddlers are all tagged with "$:/tags/PageControls" to indicate that they should appear in that part of the Sidebar.

To define your own button, create a new tiddler (e.g., "MyButton")

1) First, add the $:/tags/PageControls tags to that tiddler.

2) Next, enter your button definition into the text area, like this:

<$button class=<<tv-config-toolbar-class>> >

[Chuck R.]

Mohammed, now I have an Add Study button that is a shorter gray dash. My button definition is now: 

<$button class=<<tv-config-toolbar-class>> tooltip="Add new study tiddler">
   <$list filter="[<tv-config-toolbar-icons>match[yes]]">

@@fill:orange;
{{$:/core/images/new-button}}
@@

   </$list>
   <$list filter="[<tv-config-toolbar-text>match[yes]]">
      <span class="tc-btn-text"><$text text="New Study"/></span>
   </$list>
   <$action-sendmessage $message="tm-new-tiddler" tags="study" text={{AddStudyTemplate}}/>
</$button>

I'm trying to use the existing add button SVG image but change the fill or foreground to another color. 

[Mohammad]

Hi Chunk your answer is here

https://kookma.github.io/TW-Scripts/#Chnage%20Colors%20and%20Styles%20of%20Control%20Buttons

1. Create a tiddler tagged with $:/tags/Stylesheet
2. put in the text body

html body.tc-body .chunk .tc-image-new-button {stroke: white;fill:orange;}

1. modify your code as below

<$button class=<<tv-config-toolbar-class>> tooltip="Add new study tiddler">

   <$list filter="[<tv-config-toolbar-icons>match[yes]]">

    <span class="chunk">{{$:/core/images/new-button}}</span>

   </$list>

   <$list filter="[<tv-config-toolbar-text>match[yes]]">

      <span class="tc-btn-text"><$text text="New Study"/></span>

   </$list>

   <$action-sendmessage $message="tm-new-tiddler" tags="study" text={{AddStudyTemplate}}/>

</$button>

Good luck

Mohammad

[Mohammad]

On Thursday, December 19, 2019 at 8:53:30 PM UTC+3:30, Mohammad wrote:

Hi Chunk your answer is here

https://kookma.github.io/TW-Scripts/#Chnage%20Colors%20and%20Styles%20of%20Control%20Buttons

1. Create a tiddler tagged with $:/tags/Stylesheet
2. put in the text body

html body.tc-body .chunk .tc-image-new-button {stroke: white;fill:orange;}

html body.tc-body .chunk .tc-image-new-button:hover {stroke: white;fill:#000;}

This may still work more similar to TW page controls.

--Mohammad 

[Chuck R.]

Thanks Mohammed, I'm still getting just a gray dash for my Add Study button. The functionality works, but not the icon. The icon doesn't change color or shape. I even saved my TW and used the TW Reload button but that didn't help. I also used my browser reload button but that didn't help either. 

Below is a screenshot of the tiddler that defines the button and the page control bar. Notice the custom button is a gray dash. 

I even made the image the same in the data field and in the tiddler to define the button, and that doesn't work either. I cannot change the color of the dash either. 

[Mohammad Rahmani]

Chunk,

Your code shows you did not followed the instructions in above two post!

notice to the span and the chunk class I have added.

   <span class="chunk">{{$:/core/images/new-button}}</span>  

Best wishes

Mohammad

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/226ff2c6-829a-4509-92da-eb012b8262a7%40googlegroups.com.

[Chuck R.]

I get the sense that the height of my new button is limited so it displays as a gray dash. I wonder if this is a CSS issue.

I made a new CSS class called "studybutton" in the tiddler called Stylesheet which is my stylesheet. This stylesheet changes other things in the wiki  so I know it is set up correctly.

[Mohammad]

Added to TW-Scripts

https://kookma.github.io/TW-Scripts/#Add%20a%20New%20Element%20to%20Page%20Controls

On Thursday, December 19, 2019 at 3:51:11 PM UTC+3:30, Eric Shulman wrote:

[A Gloom]

I get the sense that the height of my new button is limited so it displays as a gray dash. I wonder if this is a CSS issue.

grey dash? as in its height is being reduced too much?  ie-- smashed down?  SVG's if set right for auto scaling will fill the container they're put in-- like a div or line of text and you set it's size either through its container's size or its actual size-- through css of course

when the svg is on a line of text or you want it to match text size, use em or pt instead of px for size units

you were putting the svg into the page controls bar iirc, squre svg's work best there-- if using a tall rectangular svg (taller than wider) its goning to scale down twice as small