Stylesheet guide for rookies?

[Valikhanov]

I was recently very helpfully advised on this forum that if I wish to increase the font of just the editing box, I should add the stylesheet tiddler with the following code:

.tc-edit-texteditor { font-size:200%; };

What is the code to increase just the text of the box in viewing mode? I.e. increase the text font without proportionately increasing the title size?

More generally, is there a list somewhere of the stylesheet codes?  (The CSS tutorial linked to on the website seems a bit more in-depth than what I need; isn't there just a simple list anywhere with the syntax?)

Many thanks in advance.

[PMario]

Hi,

All about the web: https://developer.mozilla.org/en-US/docs/Web
CSS in particular: https://developer.mozilla.org/en-US/docs/Web/CSS
font-size: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

hope that helps
mario

[Neil Griffin]

I'd like to second the call for a stylesheet guide for rookies.  I have also recently been trying to add a bit of styling to my wikis.  My results so far make a huge difference with just some little bits of code, but the effort involved in figuring out how to do simple things is disproportionate.  It has mostly involved gleaning little bits of information by searching through group posts and then making changes by trial and error.

This seems to currently be the weak point in the TW value proposition.  Tiddlywiki allows beginners to do all sorts of clever things without having to learn HTML or javascript, but as soon as you want to change a font size in a particular place, or put a background image in a tiddler, the advice seems to be 'go away and learn CSS'.  While no doubt a useful thing to do, it seems excessive when someone wants to make a couple of little Tiddlywiki-specific customisations.

We could really do with an easier way to work out how to do many of the common things, and a way to figure out how to extend this knowledge easily.  The settings options allow a few things - background images was a good enhancement - but is still pretty limited.  Maybe we need a plugin to give a wider range of customisation settings.  Or at the very least, a centralised repository of useful boilerplate CSS would be helpful.

Cheers,

Neil.

[Jed Carty]

This is one of the far too many things I have been trying to learn. Since I have been working on creating a theme lately I have been learning a bit about css. I will take notes and put them up on http://inmysocks.tiddlyspot.com
I can't promise that it will be at all comprehensive since it will probably only cover the things I have reason to use, but if people would like to contribute I will add whatever I am given.

Here is the thing.

[Mat]

Considering the central role CSS has in TW, I think it should be regarded as a tool(s) like the others, i.e the operators etc. But it is a whole Pandoras can of worms goodies in itself so it woudl be an ambitious project.

However, we could expand the idea in the Theme tweaks tiddler. The setup is such that the Stylesheet has instead instead e.g "font-size: 14px" a stransclusion "font-size:{{tiddlerWhereFontsizeIsStored}}". And in the Theme tweaks tiddler, we have small editor fields so to directly manipulate the content of that value tiddler.

It would be great to extend this and make it much more dynamic. Imagine a script that reads through the Stylesheet (I guess the strict nice format in Stylesheet should simplify here). Then it can take each, um, "item" (classes, selectors etc) and re-present it in a format similar to the Theme tweaks tiddler.

If each "item" is separated (copied?) into a tiddler, this could let us include appropriate search tags which would simplify the all-too-familiar and disproportionate search-fiddle-try-and-fail process many of us must deal with currently.

Separating them into tiddlers would also allow for a lot of other interesting slicing-and-dicing and, I think, make it a lot easier to crate new themes.

Actually, the current Stylesheets are, as far as I understand, very much not formatted in accordance with tiddler philosophy. I.e they are currently one big tiddler with a lot of stuff you re-user from its various sections.

This is a good topic for a hangout IMO.

<:-)

[Neil Griffin]

A more tiddler-based approach sounds like a good idea.  Maybe tiddlywiki.com could host a library of 'mini plugins', where each one controls some style element, with some editable fields for things like colour, font size, image location, etc.  Then you can just go to the library, and drag the items you need into your wiki.

Neil.

[Jed Carty]

Valikhanov,

Sorry, I didn't explicitly answer your question in my last post. To change just the text of the tiddly body in viewing mode you would use

.tc-tiddler-frame .tc-tiddler-body {
    font-size: 200%;
    line-height:150%;
}

the line-height part is needed or else the text in different lines will overlap and it is unreadable. I think you have to use both because in CSS specific overrides more general and there is a rule for both places in the builtin css.

to change all of the text of a tiddler in viewing mode (including the buttons and tag text) you need to add this as well, it will change the size all the text outside of the main body aside from the title:

.tc-tiddler-frame {
    font-size: 200%;
    line-height:150%
}

you need both of them because in CSS specific overrides general, and there are builtin rules for each case so you need to specify new rules for each one.

Neil,

That sounds like it could be a good idea, and a potential way to balance allowing easy customization without having a gigantic theme tweaks tiddler by default. And with the new plugin library you wouldn't have to drag and drop.
Since these are things I am playing with now, do you have a list of the customizations you would want to be able to make? I could at lest get something started and put into a plugin library for testing. If done correctly this could be one of the quick projects that has a large impact without requiring a huge amount of work or risk.