Télumire, Hey thanks soo much, that is exactly what I needed.
I have adopted the final css as follows to get smaller icons that the PageControls. .indicator-container { display:block; margin-top: -15px; margin-bottom: -22px; line-height:unset; } .indicator-item{ height:15px; width:15px; display:inline-block; position:relative; } .indicator-item button, .indicator-item button * { width:100%!important; height:100%!important; padding:unset; margin:unset; display:inline-block; left:0; top:0; } I will shareback my indicators "bar" macro shortly Regards Tones On Friday, 13 August 2021 at 04:16:44 UTC+10 Télumire wrote: > Erratum bis (sorry..) : > > .indicator-container { > display: flex; > flex-wrap:wrap; > margin-top: -14px; > margin-bottom: -26px; > --indicator-size:10px; > } > > .indicator-item{ > height:var(--indicator-size); > width:var(--indicator-size); > display:inline-block; > position:relative; > } > > .indicator-item button, .indicator-item button * { > position:absolute; > width:100%!important; > height:100%!important; > padding:unset; > margin:unset; > left:0; > top:0; > } > > Should I send further replies by private message to avoid spam ? > > > Le jeudi 12 août 2021 à 20:02:22 UTC+2, Télumire a écrit : > >> Erratum : no need for the line-height:unset nor the inline-block for the >> button and its content : > > >> >> .indicator-container { >> display:block; >> margin-top: -14px; >> margin-bottom: -26px; >> } >> >> .indicator-item{ >> height:40px; >> width:40px; >> display:inline-block; >> position:relative; >> } >> >> .indicator-item button, .indicator-item button * { >> width:100%!important; >> height:100%!important; >> padding:unset; >> margin:unset; >> > left:0; >> top:0; >> } >> >> Le jeudi 12 août 2021 à 20:00:09 UTC+2, Télumire a écrit : >> >>> Ok now I understand what you mean … This is because tiddly wiki wrap the >>> content in a <p> tag, which has a margin of 14px. So to fix that, since we >>> can't style an element based on it's content (at least not until the >>> pseudo-class :has is supported) nor give it a class (as far as I know), we >>> need to wrap the indicators in a container and use it to compensate with >>> negative margin. >>> >>> The code becomes : >>> >>> \whitespace trim >>> <div class="indicator-container"> >>> <span class="indicator-item"> >>> {{$:/core/ui/Buttons/edit}} >>> </span> >>> ..etc.. >>> <span class="indicator-item"> >>> {{$:/core/ui/Buttons/cancel}} >>> </span> >>> </div> >>> >>> And the css becomes >>> >>> .indicator-container { >>> display:block; >>> margin-top: -14px; >>> margin-bottom: -26px; >>> line-height:unset; >>> } >>> >>> .indicator-item{ >>> height:40px; >>> width:40px; >>> display:inline-block; >>> position:relative; >>> } >>> >>> .indicator-item button, .indicator-item button * { >>> width:100%!important; >>> height:100%!important; >>> padding:unset; >>> margin:unset; >>> display:inline-block; >>> left:0; >>> top:0; >>> } >>> Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit : >>> >>>> Télumire >>>> >>>> I just tried this on tiddlywiki.com; >>>> >>>> Thanks, we are almost there. >>>> >>>> I set the width and height to 15px, look like I wanted then added >>>> list-before = $:/core/ui/SideBarSegments/tabs >>>> >>>> Once it moves above the tabs there is too much white space above and >>>> below >>>> >>>> [image: Snag_1f281978.png] >>>> >>>> Is there some way to remove or reduce this space top and bottom? >>>> >>>> Regards >>>> Tones >>>> >>>> >>>> On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote: >>>> >>>>> So if I understand correctly, you want to be able to give a custom >>>>> size to your icons/buttons and be able to have them next to each other ? >>>>> >>>>> Try this and tell me if that works : >>>>> >>>>> In the tiddler tagged with $:/tags/SideBarSegment : >>>>> >>>>> \whitespace trim >>>>> <span class="indicator"> >>>>> {{button 1}} >>>>> </span> >>>>> ..etc.. >>>>> <span class="indicator"> >>>>> {{button n}} >>>>> </span> >>>>> >>>>> In a stylesheet tiddler : >>>>> >>>>> .indicator{ >>>>> height:20px; >>>>> width:20px; >>>>> display:inline-block; >>>>> position:relative; >>>>> } >>>>> >>>>> .indicator button, .indicator button * { >>>>> width:100%!important; >>>>> height:100%!important; >>>>> padding:unset; >>>>> margin:unset; >>>>> display:inline-block; >>>>> position:absolute; >>>>> left:0; >>>>> top:0; >>>>> } >>>>> Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit : >>>>> >>>>>> Folks, >>>>>> >>>>>> I have a number of projects that could use icons placed in the >>>>>> sidebar, top menu and other places. They would indicate some status such >>>>>> as >>>>>> a green storage icon when the local storage is on and much more. I call >>>>>> these indicators, They may have tooltips or actions on click, with or >>>>>> without modifier keys. >>>>>> >>>>>> I have attempted to build a new element tagged $:/tags/SideBarSegment >>>>>> and list-before $:/core/ui/SideBarSegments/tabs >>>>>> >>>>>> The problem I have for for which I seek help is I am finding it >>>>>> difficult to reduce icons and buttons to a half height and not have >>>>>> unnecessary white space above and below the indicators. Margins, padding >>>>>> tweeks etc... have not succeeded. We may use existing buttons and create >>>>>> new ones, the idea is it provides additional place(s) for which we can >>>>>> display content via a tag, so if I publish an indicator and you do the >>>>>> same >>>>>> they can coexist. >>>>>> >>>>>> I would hope to publish this to set a de facto standard, say using >>>>>> the tag $:/tags/indicator so we can all add additional and conditional >>>>>> iconised information in the sideBar and elsewhere as desired. >>>>>> >>>>>> Can anyone help me build this with custom css to minimise its use of >>>>>> space? Ideally customisable. >>>>>> >>>>>> Regards >>>>>> Tones >>>>>> >>>>> -- 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/d1a50b0a-874f-48cd-b290-cdb543c023bdn%40googlegroups.com.