Improve CSS/theme documentation

[GAZ082]

Hi guys. I'm trying to customize TW5 theme, is there a tw-* table where i can see all the css tags and what do they color? (ie, tw-body).

Thanks!

[fullaware]

:+1: I'm riding on your request. I'd like to change the editor window to use a fixed-width font. The only place I see to do that is $:/ControlPanel > Appearance > Theme Tweaks > Font family: However this changes #ALL fonts.

[Drakor]

@GAZ082 Most of the relevant tw-* tags are defined within the vanilla theme in the base tiddler ($:/themes/tiddlywiki/vanilla/base). For small to medium changes it is quite easy to just extend the predefined classes. (Which ones you need to edit can be determined with the browser developer tools)

If you however want to define a completely new theme, here is a list I compiled about every tw-* class defined in the vanilla base tiddler (and others): http://tiddlywikiguides.org/cssClasses.html

Keep in mind that there are also a lot of stylesheets which style specific HTML elements/id's/other non tw-* classes. The vanilla theme also makes use of a normalize.csss which you should do as well when making a theme from scratch.

@fullaware There is no way to nicely change only the editor font, since people also use plugins, which change the default editor. But you can always define it in css yourself, see here on how to do that: http://www.tiddlywikiguides.org/monospace.html

Although, if you're not already, you might just want to switch to the CodeMirror Editor (which has monospaced font by default): http://tiddlywiki.com/codemirrordemo.html

[gernert]

@fullaware I use the following in a stylesheet:

/* EDIT MODE */
textarea.tw-edit-texteditor, code, kbd, pre, samp {
 font-family: Inconsolata, Consolas, monospace, serif;
 font-size: 1em;
}

Stylesheets are processed in the order Themes, plugins, user plugins, user stylesheets. You can check the order with the following filter:

[all[shadows+tiddlers]tag[$:/tags/stylesheet]]

[fullaware]

@Drakor I had no idea this even existed! This is PERFECT.

@gernert Thank you! I also edit via my Nexus 7 using AndTidWiki so if CodeMirror causes issues I'll try this as well.

[fullaware]

Ended up using http://www.tiddlywikiguides.org/monospace.html as well as http://tiddlywiki.com/codemirrordemo.html

Now if I could get code highlighting that would be awesome!

[tobibeer]

relates to #1142

@Drakor Are these contents still around someplace? http://tiddlywikiguides.org/cssClasses.html

[Drakor]

@tobibeer No unfortunately not. It was basically a list of all the css classes defined in the project which was generated by a simple shell script. The list is kind of obsolete by now, since all the names have changed significantly, however, I am searching for the shell script Iused to generate the list. Alternatively, you might want to look at something like http://warpspire.com/kss/ to generate a styleguide/css documentation.

Anyhow, I sent you the most recent version of the cssClasses.html via email. (Which, still, is outdated)

/Andreas

[pmario]

imo should be labled "improvement"