GetSimple Support Forum

Full Version: "Modern UI" Admin Theme
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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
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.
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
wow... absolutely love this !!

great work...
Very nice!!
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.
Excellent !!
I like it !
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.
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
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.
Dev branch has dev versions of assets and cke 4.2. Compressed versions would be used as it reaches maturity. But space is cheap.
(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.
(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
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