WebAdmin custom design
#1
I've made a custom design for the MCServer WebAdmin and I'd like to share it with you guys. Here are some screenshots how it looks right now:

[spoiler][Image: qAxZqyC.png][/spoiler]
[spoiler][Image: wShC8eg.png][/spoiler][*]
[spoiler][Image: lpkPkPO.png][/spoiler]

It can be modified via changing the style.css file in the webadmin/files folder. I've added things like "page-PLUGIN-TAB" as css class for styling that is page related and "param-NAME-VALUE" for things like tab-tabs where the url has ?name=value appended to it. There are css classes for warnings (.warn), informations (.info) and errors (.err), so be sure to use them in your plugin Wink

Currently implemented pages using context aware css: Core/Server Settings (for tabs) and Chat[**] for some padding.

[*] - Slightly modified plugins/core/web_plugins.lua to add the css warn class
[**] - Uses IDs. Will also look same if page uses #ChatDiv or #ChatMessage

Download

V1.1
https://www.dropbox.com/s/7zp9syv1mpqmf3...e.zip?dl=1

Installation instructions:
  1. (Optional) backup your template.lua in webadmin/ and your style.css in webadmin/files
  2. Replace webadmin/template.lua with my template.lua and replace webadmin/files/style.css with my style.css
  3. (Optional) Replace Plugins/Core/web_plugins.lua with my one for the warn message. Note: you should probably not do this because the mcserver version you are using could be different than the one from that file. If you still want nicer background color for that 1 warning go to Plugins/Core/web_plugins.lua and search for
    Code:
    if (g_NeedsReload) then
    then add
    Code:
    class="warn"
    3 lines below that after
    Code:
    style="background-color: ..."
  4. Restart Server
Reply
Thanks given by: Howaner , jimmis98
#2
Wow that looks REALLY nice! Well done!

Are you a professional designer?
Reply
Thanks given by:
#3
(10-05-2014, 07:16 AM)FakeTruth Wrote: Wow that looks really nice! Well done!

Are you a professional designer?

No im just 15 and I still go to school. Im just reading designing guidelines all day xD
Reply
Thanks given by:
#4
Wow that looks great.Big Grin Maybe (if you, but also other people here on the forum, agree) we can make this the default template. Smile
Reply
Thanks given by:
#5
I'm really amazed by how good it looks Smile
Perhaps you are willing to spend a bit of your talent on some other MCServer related pages?

(10-05-2014, 07:21 AM)STR_Warrior Wrote: Wow that looks great.Big Grin Maybe (if you, but also other people here on the forum, agree) we can make this the default template. Smile
Well I agree, haha
Reply
Thanks given by:
#6
(10-05-2014, 07:22 AM)FakeTruth Wrote: I'm really amazed by how good it looks Smile
Perhaps you are willing to spend a bit of your talent on some other MCServer related pages?

Sure^^

(10-05-2014, 07:21 AM)STR_Warrior Wrote: Wow that looks great.Big Grin Maybe (if you, but also other people here on the forum, agree) we can make this the default template. Smile

That would be awesomeBig Grin
Reply
Thanks given by:
#7
It looks amazing, and yeah, we can include it in the server, you just have to license it with the Apache license 2.0
Reply
Thanks given by:
#8
I'm sorry for my unenthusiasm, but I do find some shortcomings of the new design:
- It is a space-waster. A webadmin page that used to fit half my screen now takes two screens vertically. That's just too much waste. I could live with, say, screen and a bit, but two screens is just too much.
- I personally don't like the Win8's SHOUTING style menus.
- I'd prefer the note about design somewhere else than the server statistics at the bottom. Perhaps just right-aligning would do the trick.

I'm happy that someone finally got around to polishing this thing up, so keep up the good work. Do you know how to work with GitHub / git? Could you possibly make a Pull Request with these changes?
Reply
Thanks given by:
#9
(10-05-2014, 06:07 PM)xoft Wrote: I'm sorry for my unenthusiasm, but I do find some shortcomings of the new design:
- It is a space-waster. A webadmin page that used to fit half my screen now takes two screens vertically. That's just too much waste. I could live with, say, screen and a bit, but two screens is just too much.
- I personally don't like the Win8's SHOUTING style menus.
- I'd prefer the note about design somewhere else than the server statistics at the bottom. Perhaps just right-aligning would do the trick.

I'm happy that someone finally got around to polishing this thing up, so keep up the good work. Do you know how to work with GitHub / git? Could you possibly make a Pull Request with these changes?

Sure I can do that and fix the things^^

Also its material design from google and not metro design from windows xD
http://www.google.com/design/
Reply
Thanks given by:
#10
(10-05-2014, 06:07 PM)xoft Wrote: I'm sorry for my unenthusiasm, but I do find some shortcomings of the new design:
- It is a space-waster. A webadmin page that used to fit half my screen now takes two screens vertically. That's just too much waste. I could live with, say, screen and a bit, but two screens is just too much.
- I personally don't like the Win8's SHOUTING style menus.
- I'd prefer the note about design somewhere else than the server statistics at the bottom. Perhaps just right-aligning would do the trick.

I'm happy that someone finally got around to polishing this thing up, so keep up the good work. Do you know how to work with GitHub / git? Could you possibly make a Pull Request with these changes?

ok updated everything
Reply
Thanks given by:




Users browsing this thread: 6 Guest(s)