Just can't figure it out, EditSectionPlugin

[axelm]

Hello,
I have the http://www.TiddlyTools.com/#EditSectionPlugin installed and I would like to change the font
in the editor that pops up.

Tried so many things, but just can't change it.

Any ideas?

Thank you,

axelm

[Scott Simmons]

Hi, Axel —

 

You can add a "style" attribute to the <textarea> tag near the very end of the plugin script, like so:

<textarea name="content" rows="15" cols="80" autocomplete="off" style="font-family:trebuchet;"
onchange="return config.macros.editSection.changed(this,event)"></textarea>

That ought to do the trick. 

[HansBKK]

Note that specifying a specific font like that will be of limited use if the TW's going to be viewed on different OSs.

Here's a more generic font stack if you are targeting "Trebuchet-like" fonts.

font-family: "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

Note one should go (left to right) from rare/specific to common/general for best results. And of course actual font selection is largely a matter of taste - but watch out for wildly different font size issues between platforms, for example I removed Candara from this stack (wherever I stole it 8-) as it's much smaller than the rest, at least on windoze.

In case you just used Trebuchet as a random example, here's a few more of my favorite font stacks for various purposes:

/* Georgia-based serif stack */

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Sans-serif, Verdana-based */
font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", sans-serif;

/* monospace */
font-family: "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Monaco, "Courier New", monospace;

/* Traditional Garamond-based serif stack */

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

 

/* Times New Roman-based serif stack */

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Helvetica/Arial-based sans serif stack */

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

=================

Actually, found my reference, probably where I got most of these:

http://articles.sitepoint.com/article/eight-definitive-font-stacks

 

http://www.codestyle.org/css/font-family/index.shtml

[axelm]

Thanks for the tip Scott, but no go.
I have put your code in the plugin itself and the EditSectionPluginPanel, but no luck.
All I can change in the EditSectionPluginPanel is the cols and rows, everything else, I can change to anything I want, it is just being ignored.

here is the EditSectionPluginPanel contents:

<!--{{{-->
<form style="white-space:nowrap" style="height:40em" "position:relative">
<input type="hidden" name="title" value="">
<input type="hidden" name="section" value="">
<input type="text" name="newsection" value="" style="width:68%" style="height:40em"><!--
--><input type=button value="save" style="width:15%"
    onclick="return config.macros.editSection.save(this,event)"><!--
--><input type=button value="cancel" style="width:15%"
    onclick="Popup.remove(); return false;">
<div class="editor2"><textarea name="content" rows="20" cols="50" autocomplete="off" style="width:30em" style="height:30em" style="border:10" style="font-family:Baskerville" style="font-size:10pt"
    onfocus="this.select()"
onchange="return config.macros.editSection.changed(this,event)"
></textarea>

</div>
</form>
<!--}}}-->

Thanks for any help,

axelm

[Eric Shulman]

> I have put your code in the plugin itself and the EditSectionPluginPanel,
> but no luck.
> All I can change in the EditSectionPluginPanel is the cols and rows,
> everything else, I can change to anything I want, it is just being ignored.

> <div class="editor2"><textarea ...

> style="width:30em" style="height:30em" style="border:10" style="font-family:Baskerville" style="font-size:10pt"

* Please do not edit the plugin code itself. For more info, please
read TiddlyTools' "Terms of Use" section here: http://www.TiddlyTools.com/#LegalStatements

* The current version of EditSectionPlugin is: "1.6.3 06.05.2011"

* This version automatically creates a *shadow* tiddler called
[[EditSectionTemplate]] that contains the default HTML for the popup
editor form. If you are seeing/modifying [[EditSectionPluginPanel]],
then you have an *OLD* version of the plugin.

* You can edit the [[EditSectionTemplate]] to customize the form
layout/style.

* Use only ONE style="..." per HTML tag and separate multiple CSS
attributes with semi-colon (;), like this:
style="width:30em;height:30em;border:10px;font-
family:Baskerville;font-size:10pt"
Note: I also corrected "border:10" to "border:10px" (the value MUST
have specific units, e.g., px, em, cm, or in)

* I already provide a means to customize the CSS styles for the
EditSection form, *without needing to modify the default shadow
definition in any way*. You can easily modify the styles for controls
*within* the form, by creating new CSS rules in your [[StyleSheet]].

* The entire EditSection editor form is contained within a popup that
has "editSectionPanel" as an assigned class. Thus, if you add a new
CSS rule to your [[StyleSheet]]:
.editSectionPanel textarea {
width:30em;
height:30em;
border:10px;
font-family:Baskerville;
font-size:10pt"
}
it will be automatically applied to the display of the EditSection
popup form controls, without any extra fiddling about with the HTML
form shadow tiddler definition (or the plugin code, either!)

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

[axelm]

Thank you, Eric, much appreciated. And sorry about changing the code.
Maybe I should just accept things the way they are and not try make everything look different.
Especially, since I have no idea what I am doing.

Thank's everybody for the great help,

axelm

[Scott Simmons]

@Axel: My intentions were good, but my advice could've been a lot better.  :(  I should have directed you to edit the shadow tiddler defined in that bottom section of the plugin in the first place rather than sending you into the plugin itself.  And if I'd looked more closely, I would have realized there was indeed a style name for that text area that would make it much cleaner and easier to edit the StyleSheet than to muck around inside the plugin and its shadows.

 

@Eric: Apologies for trouncing through your code like a bull in a China shop.  One reason I'm reluctant to share my own TWs is because of taking time to read your (fantastic) TOS documentation, which rightly points out the pratfalls of thougtlessly sharing modified versions of plugins.  My own local TWs have plenty of modded and hyper-annotated versions of plugins, but even with the notes and revision histories therein, I don't want them reaching a wide audience lest they dirty the gene pool of some really good add-ons.

 

@HansBKK: Those are some great font-family schemata — nabbed and saved for future reference!  (Trebuchet was, as you guessed, a random example; it was the font of a TiddlyWiki I was working in at the time.  Personally, I can't imagine edit view without a monospace font.)