The icons (buttons) of page controls

[Mohammad]

The image-buttons (svg) on the top right of TW5 have a hover effect! 

It seems they have opacity and when you hover mouse, they shines

Having your custom svg button how it is possible to have the same behavior?

Mohammad

[Thomas Elmiger]

The CSS selectors that control these buttons look like this (with different colour definitions):

.tc-page-controls button.tc-selected svg {
   fill: rgb(99, 99, 99);
}

.tc-page-controls svg {
   fill: rgb(150, 150, 150);
}

.tc-page-controls button:hover svg,
.tc-page-controls a:hover svg {
   fill: rgb(99, 99, 99);
}

So you would have to make sure you use svg images and that you can control their fill colour via CSS (no fill colors inside the graphics I suppose).

Hope, this helps.

Cheers,

Thomas

[Mohammad]

Hello Thomas,

 Many thanks for your clarification!

My image button uses svg tiddler and has no fill colors inside graphic!

<svg xmlns="http://www.w3.org/2000/svg" width="22pt" height="22pt" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11H1v2h6v-2zm2.17-3.24L7.05 5.64 5.64 7.05l2.12 2.12 1.41-1.41zM13 1h-2v6h2V1zm5.36 6.05l-1.41-1.41-2.12 2.12 1.41 1.41 2.12-2.12zM17 11v2h6v-2h-6zm-5-2c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm2.83 7.24l2.12 2.12 1.41-1.41-2.12-2.12-1.41 1.41zm-9.19.71l1.41 1.41 2.12-2.12-1.41-1.41-2.12 2.12zM11 23h2v-6h-2v6z"/></svg>

Demo: https://kookma.github.io/Shiraz/#%24%3A%2Fplugins%2F.mr%2Fshiraz%2Fpagecontrol%2Fview-fields

I just removed the content type (image/svg+xml) from tiddler and it works!!!!

I did not understand what was the issue! but now it works

Thank you again

 

Mohammad

[Mohammad]

Thomas,

 Look here at https://tiddlywiki.com/prerelease/#%24%3A%2Fcore%2Fimages%2Fclose-all-button

in Tiddlywiki.com

• The content type is empty. IT IS NOT image/svg+xml
  
• The class of svg is: <svg class="tc-close-all-button tc-image-button" ...>

tc-image-button seems is used in all icons in tiddlywiki.com

Mohammad

[Thomas Elmiger]

Mohammad, 

Interesting. 

https://tiddlywiki.com/prerelease/#Using%20SVG explains what happens, if the content type is set. 

The class tc-image-button seems to be used only for sizes, not for fill-definitions in vanilla, see 

https://tiddlywiki.com/prerelease/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fbase

All the best, 

Thomas 

Am So., 11. Nov. 2018, 23:20 hat Mohammad <mohammad...@gmail.com> geschrieben:

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/fxhVN0DCBDc/unsubscribe.
To unsubscribe from this group and all its topics, 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/6755b347-40eb-4919-afef-c6c39b506bfe%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mohammad]

Hello Thomas,

Yep! That's the reason! 

Thank you again!

Best

Mohammad