How to use custom CSS stylesheet just for a specific input field?

Sebas

unread,

Jan 12, 2016, 6:24:31 PM1/12/16

to TiddlyWiki

Hi there,

I just started using TiddlyWiki and have to say it is a great tool ... I am shocked that I only hear about this in 2016 ... This has been around for such a long time?

Maybe somebody here can help me with this:

I want to use custom stylesheets - but just for certain input fields:

I have a stylesheet:

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

input[type=text] {
  box-shadow: 0 0 5px rgba(255, 204, 204, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(255, 204, 204, 1);
}

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

By tagging a it's tiddler $:/tags/Stylesheet, I manage to get all input fields to glow red. However, I just want to do this for certain input boxes where text entries are mandatory.
<$edit-text tiddler="test" field="test" class='whatIsThisFor'/>

The <$edit-text> documentation mentions the class field, but I do not understand how to define a class that I can then use for specific widgets.

Any help would be greatly appreciated.

Best wishes,
Sebas

Eric Shulman

unread,

Jan 12, 2016, 6:37:04 PM1/12/16

to TiddlyWiki

On Tuesday, January 12, 2016 at 3:24:31 PM UTC-8, Sebas wrote:

I have a stylesheet:

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

input[type=text] {
  box-shadow: 0 0 5px rgba(255, 204, 204, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(255, 204, 204, 1);
}

========================
By tagging a it's tiddler $:/tags/Stylesheet, I manage to get all input fields to glow red. However, I just want to do this for certain input boxes where text entries are mandatory.
<$edit-text tiddler="test" field="test" class='whatIsThisFor'/>
The <$edit-text> documentation mentions the class field, but I do not understand how to define a class that I can then use for specific widgets.

You are almost there! You just need to define the classname ".whatIsThisFor" in your CSS stylesheet by replacing this line:

input[type=text] {

with

.whatIsThisFor {

Note the leading "." in the CSS classname definition is *not* included when referencing that classname in the $edit-text widget parameter

enjoy,

-e

Sebas

unread,

Jan 12, 2016, 7:10:10 PM1/12/16

to TiddlyWiki

Hi Eric,

Thank you so much for the prompt reply. This works exactly as I wanted it to, YOU solved my problem. I probably should have looked at CSS guides first :-) ... I am not a web developer but it is impressive how much you can achieve with TiddlyWiki5 already without knowing much code.