[tw5] Re: Vertically centering an icon and text in the same cell of a table
Hello again. I solved my problem with localizing the CSS to specific areas to a higher degree. I was aware I can provide CSS class names to be associated to the table. By simply using the class names I can localize the CSS to the table. It is somewhat similar to the method of using 'id=' and for all intents, the effect is the same. Thank you all. I am not soliciting any more input on this matter. Anything you care to add is always welcome. On Thursday, March 14, 2019 at 10:23:01 AM UTC+1, John Thornton wrote: > > Thank you, S. S. The problem I have with that solution I mentioned > before. I am doing this in TiddlyWiki, and I have not seen a way to use the > 'id' form of CSS selectors, because I have not seen how to tag an element > in a TiddlyWiki table with and 'id'. Maybe it is obvious and something I > missed, but without that 'id', I can't use CSS that uses that form of > selector. > > Thank you all for your patience. You all have provided a solution that is > usable in my wiki. At this point I am just increasing my knowledge and > options. > > On Thursday, March 14, 2019 at 9:16:52 AM UTC+1, S. S. wrote: >> >> Try the id attribute as shown here : >> https://www.w3schools.com/html/html_id.asp > > -- 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+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@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/f4b407b1-dd0b-4a88-b880-fc158b26c125%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Thank you, S. S. The problem I have with that solution I mentioned before. I am doing this in TiddlyWiki, and I have not seen a way to use the 'id' form of CSS selectors, because I have not seen how to tag an element in a TiddlyWiki table with and 'id'. Maybe it is obvious and something I missed, but without that 'id', I can't use CSS that uses that form of selector. Thank you all for your patience. You all have provided a solution that is usable in my wiki. At this point I am just increasing my knowledge and options. On Thursday, March 14, 2019 at 9:16:52 AM UTC+1, S. S. wrote: > > Try the id attribute as shown here : > https://www.w3schools.com/html/html_id.asp -- 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+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@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/277543b3-fa9f-46ff-987f-6c00d4c9d87c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Thank you, Subi 54. It will take me a bit to understand that snippet and
how to use it.
On Thursday, March 14, 2019 at 9:12:04 AM UTC+1, Subi 54 wrote:
>
> Use something like this perhaps:
>
> ```
> <$list filter="[rank[tabimgcss]]">
> [data-tiddler-title^="<$view field=title/>"] img {
> vertical-align: middle;
> }
>
> ```
>
> Just put `rank` in field of the riddles which contain the tables and use
> `tabimgcss` as the value.
>
>
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/92f13e86-cf7c-4462-9adc-a888728cf761%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Thank you, Oxydum. It worked and makes sense in its consistency with the
HTML embedded CSS markup. I do not understand it, though. To me, the image
seems centered and the text seems not to be centered. It seems
counter-intuiitive that changing the centering on the image changes the
positioning of the text.
Another thing bothers me with that solution. The alignment change will be
on all images. I really would only like to have that change affect images
in the table cells, and even the cells of onlly certain tables. It there an
easy CSS selector that would accomplish this? in the HTML version, the CSS
is all embedded. That is a painful way of doing things, for sure. In that
implementation, I could not figure out how to add CSS on a wiki-wide basis
(PBworks). Both in PBworks and TiddlyWiki I know I could add CSS at a page
level, which would limit its scope and still present a cleaner, more
manageable appearance. I have worked through a CSS tutorial. The kind of
mechanism that could work is limiting the scope of the img {} CSS affect
with and 'id' selector. I could not figure out how to do that in
TiddlyWiki. If I could limit the img {} CSS effect to only tables or table
cells, that would also limit its scope to close to 100% of the cases I
would desire it.
Thank you all for any additional advice.
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/4b390894-78ba-4e1b-9e1c-3d3e80796d29%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Table cell colors do not span cell width
Actually, I think this is addressed in the post that Ton Gerner pointed me
to, and I missed the additional adjustment to the CSS for the cell.
On Wednesday, March 13, 2019 at 3:48:42 PM UTC+1, John Thornton wrote:
>
> Birthe C, I notice with the solution there are small but noticeable
> pieces of white-space (default color) on either end of the line inside the
> cell. I imagine these are from margins or some such. Is there a way to make
> them go away with some setting for div or within the div class?
>
> |itemName|k
> | Created from the following Recipe(s) |<|<|<|h
> | Blacksmith's Bench |<|<|<|
> | @@background-color:#60c0e0;[[Blacksmith's Bench]]@@ |<|<|<|
> |!Ingredients|!Produces| !Crafting Time | !XP Gained |
> |Abysmal Eye (1) |Abysmal Daggers (1) | ? | ??? |
> |Branch (5) |~|~|~|
> |Iron Bar (10) |~|~|~|
> |Thick Leather (5) |~|~|~|
>
>
> CSS info
>
> .center { display:block; text-align:center; }
>
> .itemName thead td { background-color:brown; color:white; font-size:150%; }
>
> .craftingTableName { background-color:green; color:yellow;
> font-size:130%; }
>
>
> On Wednesday, March 13, 2019 at 2:11:20 PM UTC+1, Birthe C wrote:
>>
>> You might get and idea
>> http://tobibeer.github.io/tb5/#Formatting%20Table%20Cells
>>
>
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/2f272780-8256-4a4c-b5f4-4d488e4b44a3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Table cell colors do not span cell width
Thanks. You provided two very useful pieces of info. One, it isn't in TiddlyWiki at this point and, two, a solution. I tried and it it worked as expected. I will probably apply the principle to other stumbling blocks I may run into. Many thanks! -- 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+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@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/a5147559-37e2-4d59-9df7-b422d1ba671c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Table cell colors do not span cell width
Thank you. I will be using the color change technique on other rows that
are not header rows, so the earlier solution will be fine for that, also.
Your update is very useful because I was aware of the 'h' thingy to add
after a line to make a header line. I could not figure out, however, what
the connctions to the actual CSS element selector I needed to override. I
tried a couple without success and resorted to help. Looking at it, it is
very logical and one would figure I could have got there. Oh well.
Thanks
On Wednesday, March 13, 2019 at 2:23:10 PM UTC+1, PMario wrote:
>
> Hi John,
>
> Have a closer look here: https://tiddlywiki.com/#Tables%20in%20WikiText
>
> use this:
>
> |myClass|k
> |>| Brimstone |h
> |>| {{Brimstone Image External}} |
> |>| //Foul smelling yellow crystals used in dark rituals// |
> |Type | Ingredient |
>
>
>
> Create a new tiddler eg: myTableStyles
> tag it: $:/tags/Stylesheet
> add this text
>
> .myClass thead td {
> background-color:brown;
> color:white;
> font-size:150%;
> }
>
> Save -> done!
>
> have fun!
> mario
>
>
>
>
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/99636bc2-9dae-4fb9-b48e-63113c32e7b9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Table cell colors do not span cell width
I would like the brown background color to span the whole cell, but the
only area of brown background is under the characters, not any of the
white-space on either side. Is there a way to accomplish that?
|>| @@background-color:brown;color:white;font-size:150%; Brimstone@@ |
|>| {{Brimstone Image External}} |
|>| //Foul smelling yellow crystals used in dark rituals// |
|Type | Ingredient |
Any help is appreciated. Thank you. (First time user, be gentle)
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/30ca4a81-7f1e-46c8-a273-f820b6a29e3d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Table cell colors do not span cell width
Birthe C, I notice with the solution there are small but noticeable
pieces of white-space (default color) on either end of the line inside the
cell. I imagine these are from margins or some such. Is there a way to make
them go away with some setting for div or withing the div class?
|itemName|k
| Created from the following Recipe(s) |<|<|<|h
| Blacksmith's Bench |<|<|<|
| @@background-color:#60c0e0;[[Blacksmith's Bench]]@@ |<|<|<|
|!Ingredients|!Produces| !Crafting Time | !XP Gained |
|Abysmal Eye (1) |Abysmal Daggers (1) | ? | ??? |
|Branch (5) |~|~|~|
|Iron Bar (10) |~|~|~|
|Thick Leather (5) |~|~|~|
CSS info
.center { display:block; text-align:center; }
.itemName thead td { background-color:brown; color:white; font-size:150%; }
.craftingTableName { background-color:green; color:yellow; font-size:130%; }
On Wednesday, March 13, 2019 at 2:11:20 PM UTC+1, Birthe C wrote:
>
> You might get and idea
> http://tobibeer.github.io/tb5/#Formatting%20Table%20Cells
>
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/2a018f89-a3ae-48da-846a-e35fff19f3f9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Vertically centering an icon and text in the same cell of a table
I have table data that consists of and Icon followed by some text. The text height is less than the icon height, and the appearance is that the bottom of the icon is resting on the line drawn by the bottom of the text. I have with HTML and embedded CSS style statements been able to accomplish an alignment where the two entities seemed aligned vertically. https://tiddlywiki.com/favicon.ico; alt="" />My favorite (1) I have not figured out how to achieve this alignment in TiddlyWiki table cells. The tables get a bit busy with a single cell having a few of these kind of elements stacked vertically using to cause the line breaks. Thank you. -- 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+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@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/dccd8473-9015-4d4b-ba3f-d058916eb2bc%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
