AdvancedOPN Theme based on AdvancedTomato by org. author

[jacky]

Hi everyone,

So about a month ago, I finally upgraded my home network to Fiber Optics and with that I've also went with OPNsense. I am running OPNSense on 8 core Ryzen 7 5800x. I am still waiting for 2Gbps fiber at home, but locally 10gbps runs with ease. That's a short story.

Now, since I've always liked nice GUIs to manage my stuff, I've created a fork of Tomato called AdvancedTomato, which is basically just a GUI makeover. But with the Tomato GUI upgrade using just stylesheets wasn't possible, so the project became much more than just a simple "theme".

With OPNSense, that's not required. The base GUI files are great for theming and everything is way more modern. I still did not like the bootstrap colour scheme/design, so I've decided to spend a few days and re-theme opnsense to look more like AdvancedTomato. There it was, the idea to create an AdvancedOPN theme. Yeah, I know the naming is not really great/unique, but I just wanted to make it a "bit" like AT. Anyway, without further ado, here you go few screenshots (attached).

For now, I'm looking for feedback if anyone likes the theme. I might make it available to everyone (somehow, not sure how to do that yet. Newbie here). I also didn't do a lot of changes, just basics. And it still works on mobile, even though I changed the width of navigation to specific pixels (2K monitor here).

[jacky]

The forum's limitation for image size is really low, sorry for the quality.

[sorano]

Just wanted to drop a welcome and say thanks for your work on advanced tomato.

I used to run it on some linksys routers back in the day.
Got one in use still but switched to Freshtomato since it was getting more regular updates.
Still get a little nostalgic thinking about WRT54gl and the early days of custom firmware.

I'm certain you will enjoy OPNsense and all that it can do.

Welcome!

[franco]

hi jacky,

Nice work and welcome! If you feel up for it a theme inclusion in the plugins repository would be great. You can open a PR directly or contact me to get started / answer questions.  :)


Cheers,
Franco

[jacky]

Just wanted to drop a welcome and say thanks for your work on advanced tomato.

I used to run it on some linksys routers back in the day.
Got one in use still but switched to Freshtomato since it was getting more regular updates.
Still get a little nostalgic thinking about WRT54gl and the early days of custom firmware.

I'm certain you will enjoy OPNsense and all that it can do.

Welcome!

Glad to hear that! I wanted to keep up, but Shibby the main contributor to the project AdvancedTomato was based on, focused on his private life, so I was dead in the water in what to do next. I tried to talk with FreshTomato folks but they declined my offer to built-in AdvancedTomato into Fresh Tomato and make something special out of these two projects. I also started working on my personal life a little more, so yeah time was an issue for me as well.

I do remember the old days when we were doing miracles with these small 8mb flash devices. It will always stay in my memory. =)

hi jacky,

Nice work and welcome! If you feel up for it a theme inclusion in the plugins repository would be great. You can open a PR directly or contact me to get started / answer questions.  :)


Cheers,
Franco

Thank you Franco for the warm welcome!

Yes, that would be great! My theme is right now nowhere near "completion", but as soon as I get near that I will most definitely do that! I was also hoping to get some feedback, but I am guessing I would need to showcase the theme a bit better for that.

Thank you!

[franco]

Well, they don't call it look and feel for nothing. :)

I like the colors and the simplified design, but how it performs during usage would be good to know. I'd suggest packing a package for the plugin and posting it here so anyone can try the current state.

But no pressure. Take your time.


Cheers,
Franco

[jacky]

So, I finally found the time to create PKG for AdvancedOPN Theme. So for time being I've uploaded it to AdvancedTomato website. PKG can be found here:
https://advancedtomato.com/data/pkg/os-AdvancedOPN-0.8_beta.pkg

To install, its pretty simple:

Code Select Expand

pkg add -f https://advancedtomato.com/data/pkg/os-AdvancedOPN-0.8_beta.pkg

The theme is currently in a BETA / Development state - hance 0.8 version. Any feedback will be greatly appreciated.

Thank you Franco for helping me out with packaging and stuff =)

All the best.

[franco]

Yay, progress! I'll try this out later tonight.


Cheers,
Franco

[franco]

Ok first try pretty good base look.

The font doesn't load, looks a bit off:

https://172.16.126.2/ui/themes/advancedopn/build/fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2 net::ERR_ABORTED 404

"primary" color is still orange. That leads to a couple of off-looking modal headers like in system notifications (dot left of the search field in the upper right corner).

Button contrast is sometimes a bit low between darker color and hover.

The padding even for condensed tables seems to be higher than the standard theme. I don't mind but larger tables like rule listings may be longer than necessary because of it.

Just a couple of thoughts. I will add this to a test machine to use it every now and then and check progress  :)


Thanks,
Franco

[jacky]

Ok first try pretty good base look.

The font doesn't load, looks a bit off:

https://172.16.126.2/ui/themes/advancedopn/build/fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2 net::ERR_ABORTED 404

"primary" color is still orange. That leads to a couple of off-looking modal headers like in system notifications (dot left of the search field in the upper right corner).

Button contrast is sometimes a bit low between darker color and hover.

The padding even for condensed tables seems to be higher than the standard theme. I don't mind but larger tables like rule listings may be longer than necessary because of it.

Just a couple of thoughts. I will add this to a test machine to use it every now and then and check progress  :)


Thanks,
Franco

Thanks for sharing your thoughts! I did change the primary colour so that must be some sort of mistake :). I installed the theme via PKG but didn't see orange anywhere. My mistake, I will give it a look.

Regarding font, I changed the path and forgot to fix it... Font makes a huge difference in the whole experience. For padding, that's a bit double-edged sword. I have 2K resolution and it looks really great with these, visually they're perfect. But I guess that this is very different from screen/screen and person to person.

P.S.: Just checked the orange header you meant, its because "dialog" is in a separate CSS (bootstrap-dialog.css). I guess I didn't compile those, will fix it.

Thanks!
 

[jacky]

Just fixed fonts, dialogues and small margins on checkboxes/buttons in table rows:
https://advancedtomato.com/data/pkg/os-AdvancedOPN-0.81_beta.pkg

P.S.: Is it possible to make an updatable package in OPNSense without the official packages repo? Just wondering if I could somehow make it easier.

[franco]

Ah, much nicer, thanks. The only issue that sticks out now is the dark background on the system notification popup for each subsystem. In the standard theme it appears to be white on white background when not hovering over it.

Publishing a package mirror involves generating a repo index on FreeBSD for it and then uploading the resulting directory structure. I think it's too much for a single package also because users need to fetch a repo file anyway and install it on the system before they can use it.


Cheers,
Franco

[jacky]

You are welcome! =)

Will check that out too. Fixing it soon.

That sounds a bit overcomplicated. What would it take to get the theme to OPNSense packages repo? Just wondering if the theme fits quality standards when better optimized. =)

Thanks!

[franco]

As said previously a GitHub PR to plugins will suffice to eventually publish it with a release which is usually done in separate a development and release step, but those are small details.

https://github.com/opnsense/plugins/pulls

I could also commit it but for the sake of maintaining the theme later on it would make more sense to establish this channel properly.


Cheers,
Franco

[jacky]

Thank you very much Franco!

I will see how much time I find to get issues fixed, and then I might make a PR eventually =).

Have a nice weekend!