Fluxbox Themes matching GTK themes

Help for MX Fluxbox
When asking for help, use Quick System Info from MX Tools. It will be properly formatted using the following steps.
1. Click on Quick System Info in MX Tools
2. Right click in your post and paste.
Message
Author
purplemoon
Posts: 41
Joined: Fri Apr 16, 2021 6:10 pm

Re: Fluxbox Themes matching GTK themes

#31 Post by purplemoon »

Jerry3904 wrote: Tue Nov 09, 2021 5:51 pm Nice progress!
Thanks a lot Jerry! :happy: But there is always some room for improvement...
... so while working on my winter theme I ended up with this...
FB-Fluent.tar.gz
[updated 2021-12-11 v0.1 --> v0.2a --> match GTK3 menus; changed toolbar color ]

It is still a work in progress though. The tiling buttons should be added to the 'init' file in order to be displayed on the titlebar. 'Fluent-grey' GTK theme and 'Reversal-grey-dark' icons are used as a starting point (details in the 'README' file).

It would be nice to have some feedback (on this theme and the previous ones) in order to point issues that I am not aware of.

Here are some [updated 2021-12-11] screenshots anyway (note: this is still MX-FB 19).
sc_fluent_02.jpg
sc_fluent_04.jpg
Sidenote: I have become aware that re-using the original theme names may raise some issues, so, I am considering renaming some of them.
You do not have the required permissions to view the files attached to this post.
Last edited by purplemoon on Sat Dec 11, 2021 5:27 pm, edited 2 times in total.

purplemoon
Posts: 41
Joined: Fri Apr 16, 2021 6:10 pm

Re: Fluxbox Themes matching GTK themes

#32 Post by purplemoon »

I have just become aware that there was now an open thread in this forum (viewtopic.php?t=67090), by Melber, that is dealing with a tool to modify Fluxbox themes. So, let's consider that matching Gtk themes with Fluxbox themes is (about to be) solved. :snooze:

User avatar
Melber
Developer
Posts: 1199
Joined: Tue Mar 23, 2021 4:19 pm

Re: Fluxbox Themes matching GTK themes

#33 Post by Melber »

Hi @purplemoon,
I had a look at the styles, great work, they look really polished. Your windows decorations (close, maximze,minimze buttons) are cool, especially the "pressed button" animation details. How do you make the pixmaps, create the image in gimp and export as xpm?
Like the name says, the recolour tool allows basic colour adjustments to the MX-comfort style. A complete tool allowing a level of refinement like in your styles is still a lot of fiddling away

purplemoon
Posts: 41
Joined: Fri Apr 16, 2021 6:10 pm

Re: Fluxbox Themes matching GTK themes

#34 Post by purplemoon »

Hello @Melber ,
Yes, you guessed right. I use Gimp to create the images. I try to make these look as much as possible like in the original themes, and then attempt to add some 'bling' :) while trying to make do with the limitations of Fluxbox.

As for your MX-comfort Recolour Tool, reading through the dedicated thread, I can see it has become a huge thing. As I am only using MX19 on a live usb for now I haven't tested it yet, waiting for MX21 Fluxbox edition. Hence the following: does the .cfg script have to follow a specific pattern? Would transparent backgrounds for the buttons do the trick to allow the modification of the window title color? If so, it maybe be worth testing this with one of the 'KlassiK' styles which I have to modify/improve anyway. Or is it specific to MX style only?

Also, while working on Rofi themes, I wondered if you have ever thought about making a similar tool for modifying Rofi color themes. For simple ones, I guess the process would be similar to that with Fluxbox themes?

purplemoon
Posts: 41
Joined: Fri Apr 16, 2021 6:10 pm

Re: Fluxbox Themes matching GTK themes

#35 Post by purplemoon »

If anyone is interested, here is FB-Fluent matching theme for Rofi...

--> [EDIT] NEW VERSION updated 2021-12-15. <--

Code: Select all

/**
 * ROFI Color theme
 */
* {
    //
    // FLUENT style
    //
    // Colors
    
    bg-inpt: #2c2c2c;	// inputbar background
    fg-inpt: #ffffff;	// inputbar text
    
    bg-win: rgb(44, 44, 44, 0.6);	// window background
    fg-nor: #777777;	// text normal unselected
    
    bg-mbox: #ffffff;	// main box background
    
    bg-sel: #e9e9e9;	// item selected background
    fg-sel: #2c2c2c;		// text normal selected
    
    background-color: @bg-win;

    font: "Noto Sans Mono CJK KR Regular 12";
    //
    border: 0;
    margin: 0;
    padding: 0;
    spacing: 0;
}
window {
    location: center;
    anchor:   center;
//    width: 40%;
    fullscreen: true;
    padding: 20% 25%;
}

mainbox {
    background-color: @bg-mbox;
    children: [ inputbar, message, listview ];
}

inputbar {
	children: [prompt, entry];
}

prompt {
	background-color: @bg-inpt;
	enabled: true;
	padding: 12 0 0 12;
	text-color: @fg-inpt;
}

entry {
	background-color: @bg-inpt;
	padding: 12;
	text-color: @fg-inpt;
}

listview {
	background-color: @bg-mbox;
	columns: 1;
	lines: 10;
}

element {
	padding: 12;
	text-color: @fg-nor;
	background-color: @bg-mbox;
}

element.selected {
	background-color: @bg-sel;
	text-color: @fg-sel;
}

element.text {
	background-color: inherit;
	text-color: inherit;
	vertical-align: 0.5;
}

element.icon {
	size: 30;
}



Last edited by purplemoon on Wed Dec 15, 2021 5:42 pm, edited 1 time in total.

User avatar
Jerry3904
Administrator
Posts: 23049
Joined: Wed Jul 19, 2006 6:13 am

Re: Fluxbox Themes matching GTK themes

#36 Post by Jerry3904 »

I'm interested! Thanks for posting it, I'll give it a whirl tomorrow.
Production: 5.10, MX-23 Xfce, AMD FX-4130 Quad-Core, GeForce GT 630/PCIe/SSE2, 16 GB, SSD 120 GB, Data 1TB
Personal: Lenovo X1 Carbon with MX-23 Fluxbox
Other: Raspberry Pi 5 with MX-23 Xfce Raspberry Pi Respin

User avatar
Melber
Developer
Posts: 1199
Joined: Tue Mar 23, 2021 4:19 pm

Re: Fluxbox Themes matching GTK themes

#37 Post by Melber »

Hi purplemoon,
When I started I was just looking at a way to adjust MX-comfort, so the tool replaces specific lines in the theme.cfg file and rewrites colour definitions directly in the pixmaps. I’m guessing it could be rejigged to allow editing of colours in other styles. I’ve also thought about creating a generic style maker starting from a base style with selection of colours, gradients, borders etc. (all the stuff in the config file) and choice of window deco from a set of predefined pixmaps. Something to look at once I’ve finished fiddling around with the original…
The tool works in MX19, you just need the MX-comfort and MX-comfort-dark styles. Let me know if you want them.

purplemoon
Posts: 41
Joined: Fri Apr 16, 2021 6:10 pm

Re: Fluxbox Themes matching GTK themes

#38 Post by purplemoon »

@Jerry3904
These Fluent themes are really simple themes (on purpose) and fit quite well with the 'Dualum' tint2 theme in MX21. The new version for Rofi is mostly aimed at smaller screens.

@Melber
Thanks a lot. I now have MX21 on a usb stick, so I'll give it a try. As for your MX-comfort Recolour Tool, have you thought about doing something similar for Rofi?

Even if winter is over, I thought I'd share my winter theme, although it is quite basic - I now try to follow the KISS principle whenever possible. It is aimed at laptops small screens, but not only. Back in the days, there existed a similar theme in Kodi. It looks better with ShadeZ-Dark or Simply-Circles-Dark GTK themes and Simply_Circles white icons. FB toolbar (if at the top) is set to auto-hide.
sc_09.jpg
So, here is the archive...
FB-BnW.tar.gz
... Rofi theme...

Code: Select all

/**
 * ROFI Color theme
 */
* {
    //
    // BnW (BLACK & WHITE) style
    //
    // Colors
    
    bg-inpt: #1c1c1c;	// inputbar background
    fg-inpt: #ebebeb;	// inputbar text
        
    bg-win: #1c1c1c;		// window background
    fg-nor: #ebebeb;	// text normal unselected
    
    bg-sel: #ebebeb;	// item selected background
    fg-sel: #1c1c1c;		// text normal selected
    
    
    background-color: @bg-win;

    font: "Noto Sans Mono CJK KR Regular 12";
    //
    border: 0;
    margin: 0;
    padding: 0;
    spacing: 0;
}
window {
    location: center;
    anchor:   center;
    width: 40%;
}

element {
	padding: 12;
	text-color: @fg-nor;
}

element selected {
	background-color: @bg-sel;
	text-color: @fg-sel;
}

element-text {
	background-color: inherit;
	text-color: inherit;
	vertical-align: 0.5;
}

element-icon {
	size: 30;
}

entry {
	background-color: @bg-inpt;
	padding: 12;
	text-color: @fg-inpt;
}

inputbar {
	children: [prompt, entry];
}

listview {
	background-color: @bg-win;
	columns: 1;
	lines: 10;
}

mainbox {
    background-color: @bg-win;
    children: [ inputbar, message, listview ];
}

prompt {
	background-color: @bg-inpt;
	enabled: true;
	padding: 12 0 0 12;
	text-color: @fg-inpt;
}

... and Conky script.

Code: Select all

conky.config = {
  background = true,
    own_window = true,
    own_window_class = 'Conky',
    own_window_colour = '000000',
    own_window_transparent = false,
    own_window_type = 'desktop',
    own_window_hints = 'undecorated,sticky,skip_taskbar,skip_pager',
    own_window_argb_visual = true,
    own_window_argb_value = 0,
    double_buffer = true,
    no_buffers = true,
    use_spacer = 'none',
    use_xft = true,
    xftalpha = 1,
    font = 'Monospace:size=11',
    update_interval = 1,
    uppercase = false,
    override_utf8_locale = true,
    stippled_borders = 1,
    border_width = 5,
    draw_borders = false,
    draw_graph_borders = true,
    draw_outline = false,
    draw_shades = true,
    show_graph_scale = true,
    show_graph_range = true,
    alignment = 'top_middle',
    gap_x = 0,
    gap_y = 0,
    minimum_height = 25,
    minimum_width = 1900,
    maximum_width = 1920,
    net_avg_samples = 1,
    cpu_avg_samples = 6,
    short_units = true,
    pad_percents = 2,
    text_buffer_size = 2048,
    out_to_console = false,
    out_to_stderr = false,
    extra_newline = false,
    color0 = 'ffffff', --white
    color1 = 'aqua',
    color2 = 'ffcc00', --light orange
    color3 = 'red',
    color4 = 'green',
    color5 = 'blue',
    color6 = '000000', --black
    color7 = 'grey',
}
conky.text = [[
${goto 40}${voffset 2}${font Noto Sans CJK KR:Bold:size=11}${desktop_name}${voffset -0}\
# test audacious
${if_running audacious}\
${goto 140}${voffset -0}${font FontAwesome:size=12}  ${voffset -8}${voffset 3}${font Noto Sans CJK KR:size=11}${scroll 120 ${audacious_title 160}}\
${endif}
${goto 1020}${voffset -29}${font Ubuntu:Regular:size=10}\
${color1}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Bold:size=10}  ${battery_short}${color7}\
${goto 1100}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${cpu cpu1}%\
${goto 1160}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${cpu cpu2}%\
${goto 1220}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${memperc}%\
${goto 1280}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${swapperc}%\
${goto 1340}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${fs_used_perc /}%\
${goto 1400}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${fs_used_perc /home}%\
${goto 1470}${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${downspeedf enp2s0}KiB    ${font FontAwesome:size=12}${voffset -1}${font Ubuntu:Regular:size=10} ${upspeedf enp2s0}KiB\
${goto 1020}${voffset 10}${color1}${battery_bar 3, 70}${color7}\
${goto 1100}${cpubar cpu1 3, 50}\
${goto 1160}${cpubar cpu2 3, 50}\
${goto 1220}${membar 3,50}\
${goto 1280}${swapbar 3,50}\
${goto 1340}${fs_bar 3,50 /}\
${goto 1400}${fs_bar 3,50 /home}${goto 1460}${color}\
${alignr}${voffset -11}${font FontAwesome:size=14}  ${font Ubuntu:Regular:size=11}${time %A %d %B}   ${voffset -2}${font FontAwesome:size=14}  ${font Ubuntu:Regular:size=12}${voffset 0}${time %H}:${time %M}${font}${voffset -6}\
#${endif}
]]




As for the other versions of FB matcha, someone seems to have created the full set already. They are available at box-look.org.
You do not have the required permissions to view the files attached to this post.

User avatar
Melber
Developer
Posts: 1199
Joined: Tue Mar 23, 2021 4:19 pm

Re: Fluxbox Themes matching GTK themes

#39 Post by Melber »

Hi @purplemoon, good to see you're still around.

I've been concentrating my efforts on getting the comfort recolour tool working properly. Getting closer...

I haven't really thought about rofi till now because I don't really use it myself. Why don't you have a try? The worst thing that can happen is that it doesn't work. Just make sure you back up your rofi themes first, I've managed to kill my fluxbox styles folder several times...

purplemoon
Posts: 41
Joined: Fri Apr 16, 2021 6:10 pm

Re: Fluxbox Themes matching GTK themes

#40 Post by purplemoon »

Hi @Melber. I see that your tool is nearly complete, congratulations!

I have been busy with 'real life' all this time and did not play around with FB. As for customizing Rofi (which I use with both Fluxbox and Awesome WM), I started working on a script in Python a few months ago, but as I am (re)learning from ZERO, it probably just looks like a joke to anyone who can code. So far it can fetch data from FB current style and prepare data to be written into a Rofi custom style file... :snail: I need to find time to learn - way - more and make it work as intended. So....

Post Reply

Return to “MX Fluxbox Official Release”