My version of the luci bootstrap theme.
Changed CSS code and added a background image.
Download & install instructions:
8 Likes
This is really quite beautiful. I will test it with my phone tomorrow to see how it looks on mobile.
I got a chance to test this today. On desktop, your theme looks absolutely gorgeous and functions great. I really like it.
I also tested it on my iPhone as well to see if it looks just as great on mobile. Everything seemed quite good except one issue:
Logout button gets pushed down a line and displays on the left side of the page under the Status menu button.
I assume the font size of those menu buttons at the top of the page just needs to be lowered a bit.
Thank you!
I tested using Google Chrome on a desktop and (almost) all bugs are gone for that view.
Mobile interface (portrait mode) has a few bugs, but they aren't annoying and everything works.
I'll add some CSS code for the mobile portrait view and post them as a new release on GitHub.
1 Like
You’re welcome. Keep up the good work. It’s a theme that’s calming and visually pleasing on the eyes. So I will definitely keep checking out future updates.
This looks really amazing, and gave me ideas for a much better visual representation given the limitation of lua/luci.
Hi @wootje
If I can add something from myself, the theme has potential.
Pluses in my opinion:
- it is pleasing to the eyes (calming effect).
Cons in my opinion:
- too much contrast/gray. The theme is sad.. I would leave colored progress bars/buttons (maybe replace with others).
- the theme ignores the css configuration from my packages, not everything is displayed correctly .. and the text can be illegible.
Hey IceG,
Thank you for the feedback. I've thaught CSS coding myself, so the code won't be perfect.
A new release is almost ready:
- Added highlighting colors to all buttons to make them stand out
- Corrected the size of buttons so they all have the same height
- All table headers that allow you to sort the table data turn light blue when you hover the mouse
- Removed CSS code for lower resolutions which seem to solve issues on smaller resolution srcreens
- Removed some bugs
I'm considering:
- Changing the font
- Giving the text a brighter color
- Removing borders around several elements
Update
Just uploaded a new release - v0.3
Improvements
- Applied colors to all buttons
- Titles that allow you to sort a column are highlighted when you hover the mouse
- Removed some bugs
Download
2 Likes
Thanks for sharing, tried on desktop so far and it looks nice!
Fonts (?) in refreshing button and Statistics ---> Graphs need some fine tuning...
Statistics ---> Graphs are images (no text). I made them a little bit bigger and easier to read. That's all I can do.
I'll add "refreshing" button to my list.