OpenWrt Forum Archive

Topic: A Beautiful And Modern Theme for LUCI -- luci-theme-material

The content of this topic has been archived between 27 Mar 2018 and 5 May 2018. There are no obvious gaps in this topic, but there may still be some posts missing at the end.

I created a Material Design theme yesterday, It's beautiful and modern. This theme is more suitable for the modern computer screen, and it improved support for mobile device.

hnyman wrote:

The theme has been committed into Luci trunk sources today:
https://github.com/openwrt/luci/tree/ma … e-material

So, it is available in menuconfig when building trunk firmwares. And buildbot will build it in the next snapshot round, after which it can be found along all other packages at the snapshot downloads and also via "opkg update" etc.


You Can Use it manually with opkg command to install it.

First of all, you need download this theme from this site (https://github.com/LuttyYang/luci-theme … l/releases),

Secondly, you need upload it to your router,you can use scp(linux) or WinSCP(Windows)

And then, login your router use ssh(linux) or PuTTY(Windows), switch to your upload ipk directory. Execute the following command.

opkg install ./luci-theme-material*.ipk

Finally, you need login your router use LUCI, and switch theme in System - System - Language and Style

If you have a bug, Please create an issue here on GitHub!

https://github.com/LuttyYang/luci-theme-material/issues

Here have some screenshots:
https://github.com/LuttyYang/luci-theme-material

(Last edited by lutty on 20 Sep 2015, 05:08)

Looks awesome
Nice

The theme has been committed into Luci trunk sources today:
https://github.com/openwrt/luci/tree/ma … e-material

So, it is available in menuconfig when building trunk firmwares. And buildbot will build it in the next snapshot round, after which it can be found along all other packages at the snapshot downloads and also via "opkg update" etc.

(Last edited by hnyman on 17 Sep 2015, 15:38)

Outstanding update to Luci. Thank you for your hard work and instructions for installing. I've been wondering if Luci might get an update and now it has!

Looks very nice smile

Although still somewhat rough (large fonts?), this is very clean and beautiful. The problem now is that it puts OpenWrt's main website to even more shame tongue

Very clean. Like the menu bar on the left side of the screen (reminds me of Tomato smile. Would love to see one more thing implemented from Tomato - less wasted space around the text. Tomato was very efficient with screen real estate, giving you a lot of information without scrolling. Glad it has been committed to trunk.

Is this theme more usable on a mobile device e.g. a smartphone or tablet?

written_direcon wrote:

Is this theme more usable on a mobile device e.g. a smartphone or tablet?

Seems to be. I tested with a tablet and it works pretty nicely.

Great theme! Now, if only LuCI would be replaced with LuCI2 already...

lutty wrote:

I created a Material Design theme yesterday, It's beautiful and modern. This theme is more suitable for the modern computer screen, and it improved support for mobile device.

Crisp, clean and professional. Phenomenal work. Thank you for your time to create and share this. Quite a breath of fresh air for the UI perspective. This theme is quick and efficient as well.

It is also fast. Regardless, I still prefer the bootstrap version that has a support for a mouse-over pull-down menu.

(Last edited by mazilo on 20 Sep 2015, 16:39)

Here is one thing that bothers me with this theme. If I enable to install luci-mod-failsafe package, all the buttons that parallel with the Fail Safe / Administration entry (located at the bottom right corner) will get interfered and/or blocked and become unresponsive to mouse clicks. My suggestion is to put this Fail Safe / Administration entry on the top right-hand corner as the Luci theme OpenWRT. Otherwise, create a bottom panel for the Powered by LuCI Master (git-15.261.46806-1209ab6) / OpenWrt Designated Driver r47008 and Fail Safe / Administration entry. This way, it will not interfere with any button

Nice work!

Thank you!

I have just installed the Material Theme from git, but learned after that it is now available in the software updates from Luci.  Versions appear the same.

I like the new look a lot, but find the performance on my HooToo TM02 to be sluggish, though quite usable. 

This is a BIG improvement for mobile devices, however my iPhone 4 with IOS 7 is having problems running the pages. Once displayed they appear to fit nicely.  The slide menu address navigation well with the large fonts on the small screen.  The Login page is having a problem with submit, and then takes a long time  The side menu and pages will not flick and I need to scroll the surface with my finger on the screen to move them.  It's hard to open the network tab at the bottom with out selecting something by accident.  Some pages do not completely load.  I was on the status page and have nothing below Network IPv6 WAN and it is stuck at collecting data.  While the side menu comes out in a few seconds, I get hung trying to load the wifi tab.  Once it loads, I am again unable to see the full page.  Pages seem to adjust fine when rotated.  Pages appear to run fine under bootstrap.

The routers memory 15/10/5.   

I have USB and OpenVPN luci packages installed, and saw no noticeable issues with content presentation for these or other menus on the PC.

Thanks again for your effort!

IS the luci-theme-material_git-15.262.40644-13f3ad9-1_all available in trunk the same as the luci-theme-material_git-0.2.3_all available on Github? 
If not will it run on CC 15.05 RC3?

They appear to be the same and yes, it runs on CC RC3.

Thanks

Can we have it as a binary in opkg repo for CC please?

(Last edited by stangri on 5 Nov 2015, 01:16)

Looks great on my phone. Thanks

Nice theme. Able to change font sizes is in the wising list!

Nice theme on my phone. Buy it takes too long to load. I have to wait 20 seconds or longer for each click. My laptop doesn't have such lags.

Phone: nexus 6 android 6.0.1. It is normal to load other website.
Linksys wrt1900acs designated driver 48132 from arokh.

Is anyone experiencing same situation?

Thanks for your help!

huangjqiu wrote:

Nice theme on my phone. Buy it takes too long to load. I have to wait 20 seconds or longer for each click. My laptop doesn't have such lags.

Phone: nexus 6 android 6.0.1. It is normal to load other website.
Linksys wrt1900acs designated driver 48132 from arokh.

Is anyone experiencing same situation?

Thanks for your help!

2016 Jan OTA on my Nexus 6 and with this theme on *CC* I have no such lag. Some pages take a second or so to load/render but nothing even remotely close to 20 seconds. Don't remember having phone rendering issues with this theme on DD either.

stangri wrote:

2016 Jan OTA on my Nexus 6 and with this theme on *CC* I have no such lag. Some pages take a second or so to load/render but nothing even remotely close to 20 seconds. Don't remember having phone rendering issues with this theme on DD either.

I am not sure why as I don't have any problems loading other webpages. It takes even longer now (forever, i would say). It did not finish loading.

I was following the thread.

https://forum.openwrt.org/viewtopic.php?id=59113

and do the following:

uci set uhttpd.main.http_keepalive=0
uci commit uhttpd
/etc/init.d/uhttpd restart

but it didn't improve.

So I changed the theme back to bootstrap. there is no loading problem.

Fabulous! But I am using AA. It seems not so compatible. I haven't figure out how to use it with AA.