How to display buttons on left side

[Stefan Schlechter]

Hello,

how do I get only the buttons (activated under sidebar/tools) to the left side?

Than I can hide () sidebar to have much desktop space...

Thanks

Stefan

[Stefan Schlechter]

Here the screenshot for the request:

[Ton Gerner]

Have a look at http://tw5custom.tiddlyspot.com/
Click the bottom button in the left toolbar for information.

Hope that helps,

Ton

Hi Stefan,

[Stefan Schlechter]

Hi Ton,

thanks - that's exact what I searched for...

Now I want to have

• bigger buttons:
  --> I changed      width: 40px;  --> icons are bigger for the tiddler but not for the left site...
  changed position to "flexible" to see difference between left buttons and buttons configured in tiddler:
  
  

• more space between the buttons
  

• button 'New Tiddler' color: green
  

Code:
<div class="tgc-fixed">
{{$:/core/ui/Buttons/home}}
{{$:/core/ui/Buttons/full-screen}}
{{$:/plugins/telmiger/simple-search/ui/Buttons/search}}
{{$:/core/ui/Buttons/save-wiki}}
{{$:/core/ui/Buttons/new-tiddler}}
{{Create (vertical) toolbar}}
</div>
<style>
.tgc-fixed {
     position: fixed;
     top: 80px;
     width: 40px;
     left: 5px;
     background-color: transparent;
     z-index: 200;
}

.tgc-fixed button svg {
       fill: <<colour button-foreground>>;
         list-style-type: none;
}

.tgc-fixed button:hover svg {
     fill: <<colour primary>>;
}
</style>

Thanks in advance
Stefan

[Ton Gerner]

Hi Stefan,

To increase the size (and distance) of the buttons you need to add a width and height for the svg button (plus a margin for the distance).

The color for the svg button can be set with the appropriate button class.

Try something like the following between <style> ... </style> or in a separate stylesheet (tiddler tagged with $:/tags/Stylesheet):

.tgc-fixed {
     position: fixed;
     top: 60px;
     width: 25px;
     left: 10px;

     background-color: transparent;
     z-index: 200;
}

.tgc-fixed button svg {

     fill: <<colour primary>>;
     width: 2em;
     height: 2em;
     margin: 10px 0px;
}

.tgc-fixed button:hover svg {
     fill: #0044BB;
}

.tgc-fixed button svg.tc-image-new-button {
     fill: green;
}

Adapt to your liking.

Hope that helps.

Cheers,

Ton

[Stefan Schlechter]

Hi Ton,

thanks a lot - works fine.

Greetings

Stefan