Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
"Modern UI" Admin Theme
#1
I've put together some CSS for use with the Custom Admin CSS plugin that is inspired by the Microsoft "Modern UI" (aka "Metro") design.

Here's a quick screencast you can watch to see what the deal is. There will be very minor browser inconsistencies as I've used CSS properties and rgba() values that don't work well with older browsers but they shouldn't affect functionality at all. That said, any improvements are more than welcome.

To use this admin theme, first download and install the Custom Admin CSS plugin. Once installed, log into your GetSimple backend, go to "Theme" > "Custom Admin CSS Style" and paste in the CSS I've posted here.

You can also try different theme colors by replacing the two color values in the top section of that CSS with a single color value that has good contrast with white. The following colors are all suitable for use there:
  • #354D57 - GetSimple (Default)
  • #AC193D - Red
  • #D24726 - Orange
  • #008A17 - Green
  • #008299 - Teal
  • #3B5998 - Facebook Blue
  • #4617B4 - Purple
Modern UI Admin for GetSimple
Watch the demo. Install this plugin. Use this CSS. Enjoy.
Reply
#2
just tried it...
NICE Smile
this is a real upgrade to the admin pannel.

and i learnd somthing new Smile
Quote:Windows "Modern UI" (aka "Metro") interface.
Reply
#3
I've made several updates to this theme, including switching the right sidebar to the left. You can grab the CSS for use with the Custom Admin CSS plugin from here:

https://gist.github.com/3720205
Modern UI Admin for GetSimple
Watch the demo. Install this plugin. Use this CSS. Enjoy.
Reply
#4
wow... absolutely love this !!

great work...
My Github Repos: Github
Website: DigiMute
Reply
#5
Very nice!!
Reply
#6
I've just updated the CSS a tiny little bit and redone the demo screencast too.

I plan on making updates for a more elastic layout so the main content area fills horizontally (as discussed here) and with some luck make the admin area more mobile-friendly using media queries.
Modern UI Admin for GetSimple
Watch the demo. Install this plugin. Use this CSS. Enjoy.
Reply
#7
Excellent !!
I like it !
Reply
#8
I was using the theme editor a lot on a recent project so updated the CodeMirror color scheme to Monokai using these styles. You can find the updated GetSimple custom admin CSS here.

Just a reminder, you should install Custom Admin CSS if you want to use this CSS. To re-theme the login/reset password page as well, you'll also need to add add_action('index-login', 'gscacss_showcss'); around line 25 of that plugin.
Modern UI Admin for GetSimple
Watch the demo. Install this plugin. Use this CSS. Enjoy.
Reply
#9
I just removed all front end admin hooks in dev version of gs and was looking to perhaps add special hooks for theming those 2 pages at least until they are the able from themes. I like this I might add it to core.

Also the dev master already has a new code editor with themes, you should try it out, it's far from release but might be usable enough.

This is on github if you are familiar with branches, you can also check my qa thread
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#10
Ah, I see. I grabbed the dev master last night and see what you mean with the new editor. Quite nice but it seems GetSimple is putting on a bit of weight, using more than twice as much diskspace now out of the box.
Modern UI Admin for GetSimple
Watch the demo. Install this plugin. Use this CSS. Enjoy.
Reply
#11
Dev branch has dev versions of assets and cke 4.2. Compressed versions would be used as it reaches maturity. But space is cheap.
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#12
(2013-08-04, 11:29:34)shawn_a Wrote: Dev branch has dev versions of assets and cke 4.2. Compressed versions would be used as it reaches maturity. But space is cheap.

Right, makes sense. No doubt diskspace isn't an issue at this level but it does affect the perceived light-weight nature of GetSimple, I know it's one of the things that drew me to it in the first place.
Modern UI Admin for GetSimple
Watch the demo. Install this plugin. Use this CSS. Enjoy.
Reply
#13
(2013-08-02, 10:06:25)sal Wrote: I was using the theme editor a lot on a recent project so updated the CodeMirror color scheme to Monokai using these styles. You can find the updated GetSimple custom admin CSS here.

Just a reminder, you should install Custom Admin CSS if you want to use this CSS. To re-theme the login/reset password page as well, you'll also need to add add_action('index-login', 'gscacss_showcss'); around line 25 of that plugin.

Hi,
at my GS 3.3.6 Installation it only works on login page, the resetpassword.php doesn't include the customs-style.css
any ideas how can i fix this problem ?
Thanks
Reply
#14
my solution
add the missing code in the resetpassword.php as follows

div id="maincontent">
<div class="main" >

<h3><?php i18n('RESET_PASSWORD'); ?></h3>
<?php exec_action('index-login'); ?> <<------------------------- missing in the original file
<p class="desc"><?php i18n('MSG_PLEASE_EMAIL'); ?></p>

Just as /admin/index.php
Reply




Users browsing this thread: 1 Guest(s)