What CSS or other incantation will change SVG image button size?

[Mark S.]

Hello,

I would like to transclude one or more of the existing buttons in my code, but at a different size. I tried inspecting the existing code (inspect element in Firefox) but there were just too many classes being applied, and I couldn't tell which ones were doing the resizing.

Any pointers would be appreciated.

Thanks!
Mark

[Riz]

The general CSS class will be

button svg.tc-image-button { width:30pt; height:30pt; }

Of course this will increase the size of all the buttons. So it ought to specified with necessory selectors.

Say you are transcluding the button to a tiddler tagged 'mytag', the CSS will be
.tc-tagged-mytag button svg.tc-image-button { width:30pt; height:30pt; }


Say you are transcluding it within a span class with html <span class="myclass">{{$:/core/ui/Buttons/save}}</span> the CSS will be
.myclass button svg.tc-image-button { width:30pt; height:30pt; }

All the core ui buttons have separate classes assigned to them. For eg: you want to increase the size of just the home button under a span class "myclass" the CSS will be
.myclass button svg.tc-image-home-button { width:30pt; height:30pt; }

[Mark S.]

Thanks Riz. That got me started in the right direction.

Thanks!
Mark