TreeGadget Font & Color

[munfraid]

Hi everybody,

I need a custom navigation gadget an figured out, that the TreeGadget would be great for this, but there are some problems.

• Custom fonts work, but line spacing seems fixed (see example). Is there a way to change line spacing with big fonts?

• Custom Color works just for the entire gadget. Is it possible to set color just for a gadget item?

• Is it possible to change the navigation symbols (">")?

Code: Select all

OpenWindow(0, 0, 0, 600, 400, "Treegadget Font Problem", #PB_Window_ScreenCentered)

TreeGadget(0, 10, 10, 280, 380)
AddGadgetItem(0, -1, "Treegadget")
AddGadgetItem(0, -1, "with default font")


TreeGadget(1, 310, 10, 280, 380)
AddGadgetItem(1, -1, "Treegadget")
AddGadgetItem(1, -1, "with custom font")

LoadFont(0, "Arial", 30)  
SetGadgetFont(1, FontID(0))

[AZJIO]

Custom fonts work, but line spacing seems fixed (see example). Is there a way to change line spacing with big fonts?

Non-standard solution - many things can be solved by customizing the theme. In the compiler settings ("Compiler options") you can select a theme. Initially there are two themes, but you can make a copy of the file and rename it, then you will have three themes. But it is better to make several themes individually for a specific program, since the theme will not be universal, but will have its own characteristics. If you immediately make a ready-made theme, it may not be ideal for another program and you will have to do double work, so I suggest making several themes, and then decide whether your theme is universal. For example, having changed the width of an element, in the future you will need to restore the normal width and look for all the changes that interfered with the new program.
viewtopic.php?t=2445

Custom Color works just for the entire gadget. Is it possible to set color just for a gadget item?

I looked for the same feature for the ListViewGadget() function and didn't find it. You can use tags for menu items

Code: Select all

MenuItem(1, "with <font color=#FF9999>custom</font>  font")

But for AddGadgetItem() it doesn't work.

[munfraid]

Having your own theme for each project is a really cool idea! Doing this you can modify the css as you need. Will start testing this out soon!

Thank you very much for this great tipp!

[RBart]

Hi,

If I make a copy and rename it then I can select the copie in the compiler options. But when compiling the menu doesn't work anymore. It puts everything vertical and you can't select any.

So it was a good idea unfortunally... maybe because version 3.2? I am on Linux.

Greetings,
Rudi

[Danilo]

This seems to work a little bit, but i don‘t know why:

Code: Select all

; modify the theme by code
;
; https://forums.spiderbasic.com/viewtopic.php?f=6&t=1405
Procedure SetNewStyle()
  
! var elHead = document.getElementsByTagName('head')[0];
! var elStyle = document.createElement('style');
! elStyle.type= 'text/css';
! elHead.appendChild( elStyle );

! elStyle.innerHTML = '' + 
!   '' + 
;!   ' body {' + 
;!   '   font: 30px time; ' + 
;!   '   color: #f00; ' + 
;!   ' }' +
;!   '' +
;!   ' .spiderwindow { ' +
;!   '   background-color: #aaf;' +
;!   '   border-radius: 8px;' +
;!   '   border: 0px;' +
;!   '   box-shadow: 4px 4px 16px 0px #000;' +
;!   ' }' + 
;!   '' +
;!   ' .spiderwindow-content { ' +
;!   '   background-color: #88f;' +
;!   '   border-radius: 0 0 8px 8px;' +
;!   ' }' +
;!   '' +
!   ' .dijitButtonNode { ' +
;!   '   box-shadow: 4px 4px 16px 0px #000 !important;' +
!   '   line-height: 50px;'
;!   '   background: #8f8 !important;' +
!   ' }'; 
;!   '' +
; , .dijitTreeExpando, .dijitTreeExpando
;!   ' .dijitTreeRow, .dijitTreeContent, .dijitTreeNode { ' +
;!   '   line-height: 50px;'
;!   ' }';

EndProcedure

;
; set the gadget theme to „Claro“ in compiler options.
;
OpenWindow(0, 0, 0, 600, 400, "Treegadget Font Problem", #PB_Window_ScreenCentered)

TreeGadget(0, 10, 10, 280, 380)
AddGadgetItem(0, -1, "Treegadget")
AddGadgetItem(0, -1, "with default font")


TreeGadget(1, 310, 10, 280, 380)
AddGadgetItem(1, -1, "Treegadget")
AddGadgetItem(1, -1, "with custom font")

LoadFont(0, "Arial", 30)  
SetGadgetFont(1, FontID(0))

SetNewStyle()

;SetActiveGadget(0)

You need to set the gadget theme to „Claro“ in compiler options.