[tw5] Re: How to change the color of Tw icons
Hello Mario.
It is clear to me from the explanation you have given me that there is no
choice but to use CSS and macros, and I appreciate you taking the trouble
to leave me the files with the solution already prepared.
>From what I see in the end, I have no choice but to either take the path
that you have indicated, and that I was trying to avoid due to my
programming limitations, or find a way to adjust the size of the icons that
interest me and put them directly and then with the method that Eric told
me to change the color to the one I need.
Thank you very much!!!
El martes, 28 de junio de 2022 a las 8:18:22 UTC+2, PMario escribió:
> On Monday, June 27, 2022 at 11:12:46 PM UTC+2 Juan Palomo wrote:
>
>> One more question. I have tried to modify the size of the icon since it
>> is larger than I want and I cannot find the parameter to adjust it.
>> I have tried the following formula but it seems that it is not correct:
>>
>> @@fill:blue; width:1em; height: 1em; {{$:/core/images/tip}}@@
>
>
>
> That doesn't work that way, since the height and width are directly
> defined in the SVG element. You need to do the following.
>
> Create 2 tiddlers eg: my-styles and my-macros
>
> ```
> title: my-styles
> tags: $:/tags/Stylesheet
> code-body: yes
>
> .my-icon svg {
> height: 1em;
> }
> ```
>
> ```
> title: my-macros
> tags: $:/tags/Macro
> code-body: yes
>
> \define my-icon(title) <$transclude
> tiddler=<<__title__>>/>
> ```
>
> Call the macro with: `<>` ... That should do
> the trick.
>
> The first tiddler my-styles defines a CSS stylesheet, that allows you to
> define the hight of the SVG element. Since it keeps the aspect ratio, it
> will scale properly if you only change hight.
>
> The second tiddler defines a macro named: my-icon, that covers the SVG
> inside an HTML SPAN element and defines it's class="my-icon". Which allows
> the browser to assign the CSS stylesheet settings.
>
> I did add a little ZIP file that contains a JSON file, which can be drag &
> drop imported into a wiki. You can test it with tiddlywiki.com. It should
> work there since I did mace the macros with it.
>
> 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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/986237e3-442f-4355-a146-84693ebee497n%40googlegroups.com.
[tw5] Re: How to change the color of Tw icons
PMario: "That doesn't work that way, since the height and width are directly defined in the SVG element. You need to do..." That is a very nice solution to the SVG "change-dimensions" issue using a "class"! TT -- 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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9f951955-9ee3-486b-beac-b4fbc4c85c93n%40googlegroups.com.
[tw5] Re: How to change the color of Tw icons
On Monday, June 27, 2022 at 11:12:46 PM UTC+2 Juan Palomo wrote:
> One more question. I have tried to modify the size of the icon since it is
> larger than I want and I cannot find the parameter to adjust it.
> I have tried the following formula but it seems that it is not correct:
>
> @@fill:blue; width:1em; height: 1em; {{$:/core/images/tip}}@@
That doesn't work that way, since the height and width are directly defined
in the SVG element. You need to do the following.
Create 2 tiddlers eg: my-styles and my-macros
```
title: my-styles
tags: $:/tags/Stylesheet
code-body: yes
.my-icon svg {
height: 1em;
}
```
```
title: my-macros
tags: $:/tags/Macro
code-body: yes
\define my-icon(title) <$transclude
tiddler=<<__title__>>/>
```
Call the macro with: `<>` ... That should do
the trick.
The first tiddler my-styles defines a CSS stylesheet, that allows you to
define the hight of the SVG element. Since it keeps the aspect ratio, it
will scale properly if you only change hight.
The second tiddler defines a macro named: my-icon, that covers the SVG
inside an HTML SPAN element and defines it's class="my-icon". Which allows
the browser to assign the CSS stylesheet settings.
I did add a little ZIP file that contains a JSON file, which can be drag &
drop imported into a wiki. You can test it with tiddlywiki.com. It should
work there since I did mace the macros with it.
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/52846b77-69f7-44b3-8877-5a8af313dfc4n%40googlegroups.com.
<>
[tw5] Re: How to change the color of Tw icons
One more question. I have tried to modify the size of the icon since it is
larger than I want and I cannot find the parameter to adjust it.
I have tried the following formula but it seems that it is not correct:
@@fill:blue; width:1em; height: 1em; {{$:/core/images/tip}}@@
Thanks a lot
El lunes, 27 de junio de 2022 a las 19:16:13 UTC+2, Juan Palomo escribió:
> Thank you very much Eric!!!
> El lunes, 27 de junio de 2022 a las 18:50:47 UTC+2, Eric Shulman escribió:
>
>> This will do what you want:
>> ```
>> @@fill:yellow;{{$:/core/images/tip}}@@
>> ```
>>
>> enjoy,
>> -e
>>
>> On Monday, June 27, 2022 at 9:35:59 AM UTC-7 Juan Palomo wrote:
>>
>>> Hello everyone.
>>>
>>> Is there any way to change the color of TW's system icons? The fact is
>>> that I would like to use some icons in a table that I am making instead of
>>> text, but I cannot change their original black color.
>>> I have read that it can be done using CSS, but I would like to know if
>>> it can be done in the text of a tiddler in some other way.
>>> The code that I have tried, and that has not worked for me, is the
>>> following:
>>>
>>> <{{$:/core/images/tip}} fill=yellow>
>>>
>>> Cheers
>>>
>>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/95112a76-71ba-4814-8489-1bd258eefe94n%40googlegroups.com.
[tw5] Re: How to change the color of Tw icons
Thank you very much Eric!!!
El lunes, 27 de junio de 2022 a las 18:50:47 UTC+2, Eric Shulman escribió:
> This will do what you want:
> ```
> @@fill:yellow;{{$:/core/images/tip}}@@
> ```
>
> enjoy,
> -e
>
> On Monday, June 27, 2022 at 9:35:59 AM UTC-7 Juan Palomo wrote:
>
>> Hello everyone.
>>
>> Is there any way to change the color of TW's system icons? The fact is
>> that I would like to use some icons in a table that I am making instead of
>> text, but I cannot change their original black color.
>> I have read that it can be done using CSS, but I would like to know if it
>> can be done in the text of a tiddler in some other way.
>> The code that I have tried, and that has not worked for me, is the
>> following:
>>
>> <{{$:/core/images/tip}} fill=yellow>
>>
>> Cheers
>>
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/56624ffb-6922-4011-9009-b4949bfc448fn%40googlegroups.com.
[tw5] Re: How to change the color of Tw icons
This will do what you want:
```
@@fill:yellow;{{$:/core/images/tip}}@@
```
enjoy,
-e
On Monday, June 27, 2022 at 9:35:59 AM UTC-7 Juan Palomo wrote:
> Hello everyone.
>
> Is there any way to change the color of TW's system icons? The fact is
> that I would like to use some icons in a table that I am making instead of
> text, but I cannot change their original black color.
> I have read that it can be done using CSS, but I would like to know if it
> can be done in the text of a tiddler in some other way.
> The code that I have tried, and that has not worked for me, is the
> following:
>
> <{{$:/core/images/tip}} fill=yellow>
>
> Cheers
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/29d55b6b-756b-4aea-8c8b-458bc3770994n%40googlegroups.com.
