Solved Themes for different resolutions.

[Krinal]

Hello @longpanda @ventoy

I have designed my theme for 1024 x 768 resolution.



It looks good.
But in some computers 1024 x 768 resolution is not available. I don't know why.. So other bigger resolution is selected although I have set fixed 1024 x 768 in ventoy.json.
Like this

---

Theme gets spoiled when resolution is changed.

As a solution I can design themes for different resolution but ventoy doesn't have any option to auto select theme according to resolution.

Is it possible to implement option in ventoy to pick theme according to resolution?

[Steve2926]

Post your theme.txt file

[Krinal]

#Comment : Ventoy Custom Theme
desktop-image: "background.jpg"
title-text: "BOOT MENU"
title-font: "ascii"
title-color: "gold"
message-font: "ascii"
message-color: "#f2f2f2"
terminal-box: "terminal_box_*.png"
terminal-font: "ascii"

menu-tip-left: "20%"
menu-tip-top: "85%"
menu-tip-color: "gold"

+ boot_menu {

text = "BootMenu"

left = 20%
top = 20%
width = 60%
height = 60%

menu_pixmap_style = "menu_*.png(EDIT)"

item_font = "ascii"
item_fontsize = 20
item_color = "white"
item_height = 33%
item_icon_space = 8%
item_spacing = 1%
item_padding = 1%

selected_item_font = "ascii"
selected_item_color= "gold"
selected_item_pixmap_style = "select_*.png"

icon_height = 32%
icon_width = 32%

scrollbar = true
scrollbar_width = 10%
scrollbar_thumb = "slider_*.png"
}

+ progress_bar {
id = "__timeout__"
text = "@TIMEOUT_NOTIFICATION_SHORT@"

left = 95%
top = 95%
width = 5%
height = 3%

text_color = "white"
bar_style = "*"
highlight_style = "*"
}

+ hbox {
left = 16%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/info.png"}
}
}

+ hbox {
left = 24%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/fm2.png"}
}
}

+ hbox {
left = 34%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/sort.png"}
}
}

+ hbox {
left = 45%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/hdd.png"}
}
}

+ hbox {
left = 54%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/ventoy.png"}
}
}

+ hbox {
left = 62%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/txt.png"}
}
}

+ hbox {
left = 71%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/mode_texte.png"}
}
}

+ hbox {
left = 81%
top = 90%
width = 30%
+ vbox {
+ image {file = "icons/lang.png"}
}
}

+ hbox {
left = 15%
top = 95%
width = 10%
height = 25
+ vbox {
+ label {text = "F1:Help F2:Browser F3:TreeView F4:LocalBoot F5:Tools F6:ExMenu F7:TextMode L:Language" color = "white"}
}
}

+ hbox{
left = 16%
top = 97%
width = 10%
height = 25
+ label {text = "@VTOY_MEM_DISK@" color = "gold" align = "left"}
}

+ hbox{
left = 27%
top = 97%
width = 10%
height = 25
+ label {text = "@VTOY_WIMBOOT_MODE@" color = "gold" align = "left"}
}

+ hbox{
left = 43%
top = 97%
width = 10%
height = 25
+ label {text = "@VTOY_ISO_RAW@" color = "gold" align = "left"}
}

+ hbox{
left = 62%
top = 97%
width = 10%
height = 25
+ label {text = "@VTOY_ISO_UEFI_DRV@" color = "gold" align = "left"}
}

+ hbox{
left = 72%
top = 97%
width = 10%
height = 25
+ label {text = "@VTOY_GRUB2_MODE@" color = "gold" align = "left"}
}

[Steve2926]

I dont quite understand the screenshots you posted
The first one you said 'looks good' but the text characters seems corrupted ?
Also second picture seems to have some issues?
are you sure your font (ascii) is good? are you sure defining hbox 10% and vbox for help text is correct?
AFAIK Ventoy should be able to use fairly standard grub themes - maybe your theme is bad?
I am not very experienced with grub themes - are you very experienced?

[Krinal]

I'm not a person with experience in grub at all.
I've just tried to understand syntax and done some modification of my choice.

If you have knowledge of it then you cab help me.

All I want to achieve is theme like my first screenshot irrespective of resolution.

Like even if I change my resolution theme should not change or spoil at all.

[longpanda]

There is no method to auto select theme according to the current resolution.

You can set more that one themes in ventoy.json as follows:

Code:

"theme": {
    "file": [
        "/ventoy/theme/theme_800x600.txt",
        "/ventoy/theme/theme_1024x768.txt",
        "/ventoy/theme/theme_1600x900.txt"
    ]
}

Then you can select theme by F5 Tools ----> Theme Select  as in the attachment.

But this need user to manually select the appropriate theme.

[Steve2926]

If the problem is that the menu text (Language, etc.) is going off the sceeen, then the solution is to simply start the text further to the left

+ hbox {
left = 5%
top = 95%
+ label {text = "F1:Help F2:Browser F3:TreeView F4:LocalBoot F5:Tools F6:ExMenu F7:TextMode L:Language" color = "white"}
}


P.S. width and height are ignored by +vbox and +hbox.
Also no need to have a vbox inside an hbox

see http://wiki.rosalab.ru/en/index.php/Grub....28vbox.29

and change your ventoy_left value in /ventoy/ventoy.json file so that string fits too - e.g. top 1% left 70%
ventoy_left STRING Optional, left position of the ventoy version info, default is "5%"
ventoy_top STRING Optional, top position of the ventoy version info, default is "95%"
ventoy_color STRING Optional, the color of the ventoy version info, default is "#0000ff"

---

P.S. If you want the icons to align with the help text, then you must specify each item of help text seperately so it starts in same position, .e.g.

+ hbox {
left = 6%
top = 90%
+ image {file = "icons/txt.png"}
}
+ hbox {
left = 5%
top = 95%
+ label {text = "F1:Help" color = "white"}
}


This way the icon will be above the text no matter what the resolution


and remove the hbox for + label {text = "F1:Help F2:Browser F3:TreeView F4:LocalBoot F5:Tools F6:ExMenu F7:TextMode L:Language" color = "white"}

[Krinal]

There is no method to auto select theme according to the current resolution.

You can set more that one themes in ventoy.json as follows:

Code:

"theme": {
    "file": [
        "/ventoy/theme/theme_800x600.txt",
        "/ventoy/theme/theme_1024x768.txt",
        "/ventoy/theme/theme_1600x900.txt"
    ]
}

Then you can select theme by F5 Tools ----> Theme Select  as in the attachment.

But this need user to manually select the appropriate theme.

Thank you! I know about this method but it is manual option. the first look will be messy screen when USB will boot. then  I have to manually correct theme. So it is not a good idea. but that feature is great for keeping different themes.

---

If the problem is that the menu text (Language, etc.) is going off the sceeen, then the solution is to simply start the text further to the left

+ hbox {
left = 5%
top = 95%
+ label {text = "F1:Help F2:Browser F3:TreeView F4:LocalBoot F5:Tools F6:ExMenu F7:TextMode L:Language" color = "white"}
}


P.S. width and height are ignored by +vbox and +hbox.
Also no need to have a vbox inside an hbox

see http://wiki.rosalab.ru/en/index.php/Grub....28vbox.29

and change your ventoy_left value in  /ventoy/ventoy.json file so that string fits too - e.g.  top 1%  left 70%
ventoy_left STRING Optional, left position of the ventoy version info, default is "5%"
ventoy_top STRING Optional, top position of the ventoy version info, default is "95%"
ventoy_color STRING Optional, the color of the ventoy version info, default is "#0000ff"

---

P.S. If you want the icons to align with the help text, then you must specify each item of help text seperately so it starts in same position, .e.g.

+ hbox {
left = 6%
top = 90%
+ image {file = "icons/txt.png"}
}
+ hbox {
left = 5%
top = 95%
+ label {text = "F1:Help" color = "white"}
}


This way the icon will be above the text no matter what the resolution


and remove the hbox for + label {text = "F1:Help F2:Browser F3:TreeView F4:LocalBoot F5:Tools F6:ExMenu F7:TextMode L:Language" color = "white"}

Thanks for your suggestion. But I had already experimented that. like put all the text and icons separatly on fixed places but that also does not help when resolutions are changed.

See First design. 1024 x 768



Then 800 x 600 for same theme.



Then 1366 x 768



Font size changes with resolution so it gets overlapped.

[Steve2926]

Code:

+ progress_bar {
id = "__timeout__"
text = "@TIMEOUT_NOTIFICATION_SHORT@"
left = 95%
top = 95%
width = 5%
height = 3%
text_color = "white"
bar_style = "*"
highlight_style = "*"
}

+ hbox {
left = 2%
top = 90%
+ image {file = "icons/txt.png"}
}
+ hbox {
left = 2%
top = 95%
+ label {text = "F1:Help" color = "white"}
}


+ hbox {
left = 11%
top = 90%
+ image {file = "icons/txt.png"}
}
+ hbox {
left = 11%
top = 95%
+ label {text = "F2:Browser" color = "white"}
}

+ hbox {
left = 24%
top = 90%
+ image {file = "icons/txt.png"}
}
+ hbox {
left = 24%
top = 95%
+ label {text = "F3:Tree View" color = "white"}
}

+ hbox {
left = 38%
top = 90%
+ image {file = "icons/hdd.png"}
}
+ hbox {
left = 38%
top = 95%
+ label {text = "F4:Local Boot" color = "white"}
}

+ hbox {
left = 53%
top = 90%
+ image {file = "icons/ventoy.png"}
}
+ hbox {
left = 53%
top = 95%
+ label {text = "F5:Tools" color = "white"}
}

+ hbox {
left = 62%
top = 90%
+ image {file = "icons/txt.png"}
}
+ hbox {
left = 62%
top = 95%
+ label {text = "F6:ExMenu" color = "white"}
}
+ hbox {
left = 72%
top = 90%
+ image {file = "icons/hdd.png"}
}
+ hbox {
left = 72%
top = 95%
+ label {text = "F7:TextMode" color = "white"}
}

+ hbox {
left = 84%
top = 90%
+ image {file = "icons/txt.png"}
}
+ hbox {
left = 84%
top = 95%
+ label {text = "L:Language" color = "white"}
}

+ hbox{
left = 16%
top = 97%
+ label {text = "@VTOY_MEM_DISK@" color = "gold" align = "left"}
}

+ hbox{
left = 27%
top = 97%
+ label {text = "@VTOY_WIMBOOT_MODE@" color = "gold" align = "left"}
}

+ hbox{
left = 43%
top = 97%
+ label {text = "@VTOY_ISO_RAW@" color = "gold" align = "left"}
}

+ hbox{
left = 62%
top = 97%
+ label {text = "@VTOY_ISO_UEFI_DRV@" color = "gold" align = "left"}
}

+ hbox{
left = 72%
top = 97%
+ label {text = "@VTOY_GRUB2_MODE@" color = "gold" align = "left"}
}


I used this and it seems to work in 800x600 and 1024x768

[AlexBryansk]

to align the label, try the parameters width, align
Exzample



+ hbox {
left = 0%
top = 95%
width = 100%
+ label {text = " F1:Help F2:Browser F3:TreeView F4:LocalBoot F5:Tools F6:ExMenu F7:TextMode L:Language" color = "white"  align = "center" }
}