Beginner trying to do some simple formatting in a TW5

[Marc Ferguson]

I really love TW5 and try to do it in my college classes. I try to keep things simple so the students can get comfortable. 

I am not a great coder. Neither are my students. I am looking for help with some simple formatting help. See the graphic below.

I assume that this can all be done in the CSS and have been looking at email posts but if you can give it to me simply I would really appreciate any help.

Thank you for a great and powerful product,

Marc Ferguson

[Mark S.]

Here's one approach to # 1

Make a tiddler with the tag $:/tags/Stylesheet. Call it something like "My Styles" and make it type text/css.

Put this in it, substituting whatever size you want for .5em specified:

h2.tc-title  {
font-size:.5em ;
}

That should do it.

Mark

[Mark S.]

For #2, you can add the following to the style sheet

div.tc-subtitle {
display:none ;
}

Seems to work. Do remember to make back-ups before trying anything ;-)

Mark

On Tuesday, April 19, 2016 at 7:40:00 PM UTC-7, Marc wrote:

[Hegart Dmishiv]

Here's another approach to # 2

Search for $:/core/ui/ViewTemplate/subtitle using the Advanced Search. It will be under the "Shadows" tab. Open it, and edit it. You'll get a warning about overriding the default system, but it is okay to click OK here. Now remove the  $:/tags/ViewTemplate  tag from it and save. The subtitles will now be gone.

You can toggle this action using a radio button. Simply add this code to any other tiddler...

''Tiddler subtitles:'' <$radio  tiddler="$:/core/ui/ViewTemplate/subtitle" field="tags" value="">Hide</$radio>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<$radio  tiddler="$:/core/ui/ViewTemplate/subtitle" field="tags" value="$:/tags/ViewTemplate">Show</$radio>

You can do the same for tiddler titles and tags as well. Here's a simple table you can drop into a tiddler, to make a single interface from which to manage the visibility of the title, subtitle, and tags of your tiddlers...

| !Option | !Setting |
|''Tiddler titles:'' | <$radio  tiddler="$:/core/ui/ViewTemplate/title" field="tags" value="">Hide</$radio>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<$radio  tiddler="$:/core/ui/ViewTemplate/title" field="tags" value="$:/tags/ViewTemplate">Show</$radio> |
|''Tiddler subtitles:'' | <$radio  tiddler="$:/core/ui/ViewTemplate/subtitle" field="tags" value="">Hide</$radio>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<$radio  tiddler="$:/core/ui/ViewTemplate/subtitle" field="tags" value="$:/tags/ViewTemplate">Show</$radio> |
|''Tiddler tags:'' | <$radio  tiddler="$:/core/ui/ViewTemplate/tags" field="tags" value="">Hide</$radio>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<$radio  tiddler="$:/core/ui/ViewTemplate/tags" field="tags" value="$:/tags/ViewTemplate">Show</$radio> |

Hope this is helpful,

Hegart.

[Mark S.]

For #3, I assume that you want the same two lines to always be to the right of the image. Someone else could probably think of a way to do it with pure CSS, but I would use a table.

So for the table I might have:

@@.imgtable
|[img width=120 [Henry B. Eyring|https://www.lds.org/bc/content/shared/content/images/leaders/henry-b-eyring-large.jpg]]|<h2>Where Two or Three Are Gathered</h2> <p/>President Henry B. Eyring - First Counselor in the First Presidency|

@@

and then add this to the stylesheet tiddler

 .imgtable td {
vertical-align: top ;
border-style: none ;

}
.imgtable {
border-style: none ;
border-collapse:collapse;
}

HTH

Mark


On Tuesday, April 19, 2016 at 7:40:00 PM UTC-7, Marc wrote:

[Hegart Dmishiv]

Indeed, for #3 you could use pure CSS, as Mark suggests. Here's one way to achieve that, without the need for a table or a separate stylesheet

@@float:left;padding-right:10px;[img width=120 [Henry B. Eyring|https://www.lds.org/bc/content/shared/content/images/leaders/henry-b-eyring-large.jpg]]@@ <h2>Where Two or Three Are Gathered</h2> President Henry B. Eyring - First Counselor in the First Presidency


I've reused Mark's example code, but you'll notice here I simply surround the image invocation with an inline CSS block, using the @@..@@ as Mark did, but listing the CSS elements right there on the same tiddler, rather than invoking a separate stylesheet.

HTH
Hegart.



[Mark S.]

That's probably the best way unless it's really, really important that the text always stay to the right. If you squeeze the column enough, eventually the lines under CSS will go under the picture.

If you do it your way, then you can also go back to using TW5 formatting, so you get:

@@float:left;padding-right:10px;padding-left:10px;[img width=120 [Henry B. Eyring|https://www.lds.org/bc/content/shared/content/images/leaders/henry-b-eyring-large.jpg]]@@

!!Where Two or Three Are Gathered
!!!President Henry B. Eyring - First Counselor in the First Presidency

[Marc Ferguson]

Wow, thank you all for the help It looks beautiful!

I don't think I gave you the references to the website.  Were you watching this talk???

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0f93566f-7480-4c17-9d6b-9ce472e977a3%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Mark S.]

Google is your (sometimes) friend. The LDS is  a major denomination, and "Eyring" is a fairly unique name. Had the name been "Joseph Smith", all bets would be off ;-)

[Marc Ferguson]

Lol. You got me thanks again. 

Sent from my iPhone

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c431d378-d346-45a9-b969-a0fe9e58ecd4%40googlegroups.com.