[tw5] Re: How to change the colors of only one editor toolbar button
Ton Thanks for pointing me to my own solution. I forgot I bundled them this way. Regards Tony On Friday, March 15, 2019 at 10:06:39 PM UTC+11, Ton Gerner wrote: > > Hi Tony, > > I thought it was you mentioning how to obtain the separate set of > fontawesome icons. > > After some googling I found it: > https://groups.google.com/d/msg/tiddlywiki/wp0pY_Aervc/AzjGvGlEAgAJ > > Cheers, > > Ton > > -- 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/a142e5ce-1b59-46ca-9cac-aea38eafac45%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: How to change the colors of only one editor toolbar button
Hi Tony, I thought it was you mentioning how to obtain the separate set of fontawesome icons. After some googling I found it: https://groups.google.com/d/msg/tiddlywiki/wp0pY_Aervc/AzjGvGlEAgAJ Cheers, Ton -- 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/7c1b1ad4-8093-4554-83df-0c2a6c5ef501%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: How to change the colors of only one editor toolbar button
Hi JD, I should have thought of image width. I totally overlooked it. Tried with padding, margin, ... I ended up with: width=28.5 px; to get the same width as the buttons before coloring. Anyway the .tc-editor-toolbar > .tc-reveal > button was the push in the right direction for my problem. Many thanks. Ton -- 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/31688b58-9859-4cbe-8500-a3eb89389351%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: How to change the colors of only one editor toolbar button
Ton,
Thanks for raising this question and now the answers are online. In a
related issue I have always thought if we want to add buttons and snipits
etc... to the EditorToolbar it is a bit of a hassle finding new icons, so
using colour will help. I think it would be nice if we could create buttons
that use a simple character or fontawesome item allowing a larger range of
buttons to be created as needed.
I wonder if anyone has done that?
Regards
Tony
On Friday, March 15, 2019 at 3:24:32 AM UTC+11, Ton Gerner wrote:
>
> Hi,
>
> I played around with JDs solution (which as such works) and tried to
> simplify and polish it.
>
> To my surprise I ended up with a 'flexless' solution which - at least
> under my conditions (Linux Mint 19.3, Firefox & Chrome) - gives good
> results:
>
> .tc-editor-toolbar > .tc-reveal > button {
> padding: 0px;
> }
>
> .tc-editor-toolbar button .tc-image-button {
> padding: 4px 0px;
> font-size: 1.45em;
> }
>
> .tc-editor-toolbar button .tc-image-list-bullet {
> fill: white;
> background-color: #0044BB;
> border-radius: 4px;
> }
>
> .tc-editor-toolbar button:hover .tc-image-list-bullet {
> fill: #0044BB;
> background-color: #D1DDF3;
> }
>
>
>
> One minor issue: the buttons are a little bit wider than normal.
>
> Cheers,
>
> Ton
>
>
--
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/9845f7f1-d7b2-4912-bbca-c62cea4e8a7c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: How to change the colors of only one editor toolbar button
That's neat, and disregarding the hover effect, even has fewer lines!
Again I don't know on desktop how this looks but you can also add a width to
the svg to make it narrower. This looks ok on my phone:
---
.tc-editor-toolbar button .tc-image-button {
padding: 4px 0px;
font-size: 1.45em;
width: 30px;
}
--
I just added the 30px width.
-jd
--
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/e737914e-2fa7-44ae-9461-2ec62050ac57%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: How to change the colors of only one editor toolbar button
Hi,
I played around with JDs solution (which as such works) and tried to
simplify and polish it.
To my surprise I ended up with a 'flexless' solution which - at least under
my conditions (Linux Mint 19.3, Firefox & Chrome) - gives good results:
.tc-editor-toolbar > .tc-reveal > button {
padding: 0px;
}
.tc-editor-toolbar button .tc-image-button {
padding: 4px 0px;
font-size: 1.45em;
}
.tc-editor-toolbar button .tc-image-list-bullet {
fill: white;
background-color: #0044BB;
border-radius: 4px;
}
.tc-editor-toolbar button:hover .tc-image-list-bullet {
fill: #0044BB;
background-color: #D1DDF3;
}
One minor issue: the buttons are a little bit wider than normal.
Cheers,
Ton
--
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/3e685e81-fa97-4c66-9960-fd37d816bb65%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: How to change the colors of only one editor toolbar button
Added to TW-Scripts
On Wednesday, March 13, 2019 at 8:19:29 PM UTC+3:30, JD wrote:
>
> Hi Ton,
>
> Sorry for the formatting, I'm on my phone!
>
> I got it by doing something like this...
>
> ---
>
> .tc-editor-toolbar > .tc-reveal > button {
> display: inline-flex;
> padding: 0;
> }
>
> .tc-editor-toolbar button .tc-image-button {
> padding: 2px;
> font-size: 1.25em;
> }
>
> .tc-editor-toolbar button .tc-image-list-bullet {
> display: flex;
> align-items: stretch;
> justify-content: stretch;
> fill: red;
> background-color: yellow;
> }
>
> ---
>
> More experienced people might have a better solution, but what I basically
> did was to set the button to flex so that the svg it contains can fill it
> up, and then the svg itself can now be targeted to have a background. The
> background will now fill the button thanks to inline-flex.
>
> I set a font size to tc-image-button because inline-flex affected the size
> of the button, and i used inline-flex instead of flex so the buttons will
> arrange themselves inline without needing for the whole container to be set
> to flex too.
>
> I wonder if this will work nicely in all cases hehe
>
> -jd
>
>
--
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/d3e3addf-bcce-473f-8e9f-8bf214307ecc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: How to change the colors of only one editor toolbar button
Hi JD, Thanks. A quick test shows it works as advertised ;-) Now I have to learn more about 'flex' (as I wrote my CSS knowledge is only basic). I'll play around with your solution to see the effect of the different parameters. Thanks a lot. Cheers, Ton -- 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/ce863f94-bd6d-42c6-927c-21a69f820752%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
