New Admin Theme

[phireware]

Hello,

I have recently become a GetSimple CMS user and I love it so far! The simplicity is great and was just what I was looking for when working with some clients who wanted to be able to have a simple way of managing their website.

I noticed the backend admin theme hasn't been updated in some time, and I really liked the looks of this: http://get-simple.info/forums/showthread.php?tid=3440

Does anyone know of any plans to update the admin user interface? I have taken the custom CSS from the forum topic mentioned above and modified it with inspiration from AdminLTE to form the screenshot below. I have a working version and it seems to be a more modern look. I'd love to help contribute to the project if help is needed.



http://get-simple.info/extend/admin-theme/flatblue/927/

[Timbow]

I really like it. Good Job!

[shawn_a]

Very nice i was looking to make a theme like this.

Which browser template is that? Been looking for one of those too.

[phireware]

I really like it. Good Job!

Thank you! Glad you like it.

---

Very nice i was looking to make a theme like this.

Which browser template is that? Been looking for one of those too.

Thanks! I'd be happy to help in implementing this into GetSimple CMS. I just took a screenshot of Safari on my Mac and removed the url.

[shawn_a]

oh lol, i thought it was one of those generic browser frames.

I really need to identify some of the bad css rules that need to be fixed and the overly specific selectors that cause issues with this, ideally I would like the backend to be easier to theme for now and at some point convert to a framework.

For 3.4 minor adjustments have been made to make theming a little bit easier and better, but nothing major like this.
Do you think you can make this theme on top of the default one, or what needs to change to allow it to require as few adjustments as possible to make possible.

Also compatible with 3.4 fixed sidebar and fluid width which are going to be standard.

3.4 should allow these things to be plugins also.

[phireware]

oh lol, i thought it was one of those generic browser frames.

I really need to identify some of the bad css rules that need to be fixed and the overly specific selectors that cause issues with this, ideally I would like the backend to be easier to theme for now and at some point convert to a framework.

For 3.4 minor adjustments have been made to make theming a little bit easier and better, but nothing major like this.
Do you think you can make this theme on top of the default one, or what needs to change to allow it to require as few adjustments as possible to make possible.

Also compatible with 3.4 fixed sidebar and fluid width which are going to be standard.

3.4 should allow these things to be plugins also.

Sounds good. So right now, the current theme that I have created is running as a plugin, when I turn it off, it goes back to the normal admin theme. There are no changes to the core GetSimple CMS setup. The only thing I really changed is the footer text.

One issue I had though was when going to the theme tab and choosing "edit theme" I am unable to specify different css stylings for that part specifically, but other than that, I haven't modified any of the original GetSimple CMS code.

But like I said, if I can help in any way with theming and CSS, let me know. That's usually what I like to focus on, although I do know enough about PHP to be dangerous

[islander]

This is really nice looking. Any download links available?

[Tyblitz]

I noticed the backend admin theme hasn't been updated in some time [...] I have a working version and it seems to be a more modern look. I'd love to help contribute to the project if help is needed.

Even if it doesn't make it to the official GS, you could upload it as a plugin in the Extend section and write some custom install instructions (eg. if it's only css, could be: 1) Backup admin/template/css.php 2) extract to admin/template). I'm saying this because I'm eager to give it a go! (or you could add it as an attachment to this thread).
If you have a Github account, you can file issues, create pull reqs. and propose commits there to the GS repo, as such contributing to the core.

[shawn_a]

Are you going to share this?

[phireware]

This is really nice looking. Any download links available?

I noticed the backend admin theme hasn't been updated in some time [...] I have a working version and it seems to be a more modern look. I'd love to help contribute to the project if help is needed.

Even if it doesn't make it to the official GS, you could upload it as a plugin in the Extend section and write some custom install instructions (eg. if it's only css, could be: 1) Backup admin/template/css.php 2) extract to admin/template). I'm saying this because I'm eager to give it a go! (or you could add it as an attachment to this thread).
If you have a Github account, you can file issues, create pull reqs. and propose commits there to the GS repo, as such contributing to the core.

Are you going to share this?

Sorry for the late reply, I uploaded what I've worked on in the Extend section! FlatBlue Download

[islander]

Very cool, Thanks

Question, how do you prevent it from loading the CSS on the front end?
It is over-riding the themes CSS.

[phireware]

Very cool, Thanks

Question, how do you prevent it from loading the CSS on the front end?
It is over-riding the themes CSS.

No problem! Is it loading on the front end? When I activate the plugin, it only loads the css in the admin panel, and not on the main website.. That's odd. It shouldn't override any CSS on your site, it just overrides CSS in the admin panel.

[n00dles101]

Your loading your CSS using GSBOTH which loads it on the front and backend.

queue_style('flat-blue',GSBOTH);

change it to GSBACK should do it.

[phireware]

Your loading your CSS using GSBOTH which loads it on the front and backend.

queue_style('flat-blue',GSBOTH);

change it to GSBACK should do it.

Thanks for pointing this out! Whoops. I've fixed it, uploading to extend section now!

[hameau]

Very nice result.

A couple of things:
- Please remove the OS X-specific files/folders from the zip in Extend (.DS_Store, __MACOSX);
- The dark background for the CodeMirror edit areas (Edit Theme, etc.) makes the code text less readable, especially the blue colour text.

[phireware]

Very nice result.

A couple of things:
- Please remove the OS X-specific files/folders from the zip in Extend (.DS_Store, __MACOSX);
- The dark background for the CodeMirror edit areas (Edit Theme, etc.) makes the code text less readable, especially the blue colour text.

OS X specific files have been removed from the zip file.

The Edit Theme section is still a work in progress, and I am limited to the placement of the editor based on the css from GetSimple, but I will look into the color scheme! Thanks for the tips!

[Carlos]

With debug mode on, I get:

Code:

Warning:  Missing argument 4 for register_style(), called in [...]\plugins\flat-blue.php on line 24 and defined in [...]\admin\inc\plugin_functions.php on line 618
Notice:  Undefined variable: media in [...]\admin\inc\plugin_functions.php on line 624

[phireware]

With debug mode on, I get:

Code:

Warning:  Missing argument 4 for register_style(), called in [...]\plugins\flat-blue.php on line 24 and defined in [...]\admin\inc\plugin_functions.php on line 618
Notice:  Undefined variable: media in [...]\admin\inc\plugin_functions.php on line 624

So I just updated the file again, and I think I fixed the Missing Argument 4 issue. Thanks for pointing that out.

[shawn_a]

adding 'all' as default in 3.4 probably

[islander]

- The dark background for the CodeMirror edit areas (Edit Theme, etc.) makes the code text less readable, especially the blue colour text.

In the CSS file, change lines 189-193 from:

Code:

#maincontent .CodeMirror pre { color:#fff; margin:0; }
#maincontent .CodeMirror textarea { color:#fff; margin:0; }
#maincontent .cm-s-default .CodeMirror-gutter-text pre {color: #75715e;}
.cm-s-default {background: #272822; color: #f8f8f2;}
.cm-s-default div.CodeMirror-selected {background: #49483E !important;}
.cm-s-default .CodeMirror-gutter {background: #272822; border-right: 0px;}

To:

Code:

#maincontent .CodeMirror pre { color:#000; margin:0; }
#maincontent .CodeMirror textarea { color:#000; margin:0; }
#maincontent .cm-s-default .CodeMirror-gutter-text pre {color: #75715e;}
.cm-s-default {background: #F4FAEE; color: #f8f8f2;}
.cm-s-default div.CodeMirror-selected {background: #D7D4F0 !important;}
.cm-s-default .CodeMirror-gutter {background: #C7E0EC; border-right: 0px;}

Or what ever your preferred colors are...

[Tyblitz]

Just tested, looks pretty nice and highlighted some problems with styling in my GS Custom Settings plugin if this kind of theme is the future of back-end GS theming.

However, I also noticed a pretty major issue with the current release: where are the error/success notifications on page save? They aren't visible at all?
Also, if possible (haven't investigated it), it would be nice if the theme integrated well with the gsconfig.php constant GSSTYLE (GSSTYLEWIDE and GSSTYLE_SB_FIXED) (eg wide vs standard backend & normal/ sticky sidebar)

[shawn_a]

Works pretty good, even on 3.4 ( assuming you disable fixed sidebar ), I guess I could add a check if the sidebar is already fixed do not initialize the scroll2fixed() call. Either way it seems to not actually interfere, its the wide that is causing it to mess up the sidebar.

Simply adding

Code:

#sidebar left:0;

#sidebar { width:200px; height: auto; margin:-1px 0 0; padding: 0; background: #222d32; position: fixed; left:0; bottom: 0; top: 62px !important;}

fixes it.


You should also rename style.css, its confusing and hard to debug rules.
use
style_flatblue.css or something would be better, indicating it overrides style.css selectors.

I would also not mess with codemirror rules, leave that to codemirror plugins, ( already in core 3.4 )

Love the notifications, that is exactly what I wanted to do with our theme, move it to sidebar so it does not shift the whole page, or use popup overlays, 3.5 will probably have a new desktop or popup notification system.

I am missing anything below the footer, debuglog for example.


This might work better by working with the wrapper instead of maincontainer.
Since wrapper wraps all content including footer and anything after it.

I had better luck with this for example ( granted not very tested, just fiddling, but easier then changing the entire maincontent to absolute positioning. )

Code:

.wrapper {
    margin-left:200px;
}
#maincontent {
      width: 100%;
    position: inherit;
      margin-top: 61px;
}

#sidebar {
    margin-left:-200px !important;
}

Plus you can set max-width on wrapper to limit it.

[shawn_a]

here are my overrides to make it work with stylewide and sbfixed.

PHP Code:

/* shawn_a flat_blue overrides */
.wrapper {
    margin-left:200px;
}
#maincontent {
      width: 100%;
    position: inherit; 
      margin-top: 61px;
}
#sidebar {
    margin-left:-200px !important;
}
.sbfixed #sidebar {
    margin-left: 0 !important;
    left:0;
    position:fixed !important;
}

#footer{
    position:inherit;
    height: auto;
}

#sa_gsdebug-wrapper.fullwidth {
    position:relative !important;
} 


Should work in 3.4 also
Changed footer to not fixed since footer hooks are inside of it, also added a override for sa_debug console

[phireware]

Works pretty good, even on 3.4 ( assuming you disable fixed sidebar ), I guess I could add a check if the sidebar is already fixed do not initialize the scroll2fixed() call. Either way it seems to not actually interfere, its the wide that is causing it to mess up the sidebar.

Simply adding

Code:

#sidebar left:0;

#sidebar { width:200px; height: auto; margin:-1px 0 0; padding: 0; background: #222d32; position: fixed; left:0; bottom: 0; top: 62px !important;}

fixes it.


You should also rename style.css, its confusing and hard to debug rules.
use
style_flatblue.css or something would be better, indicating it overrides style.css selectors.

I would also not mess with codemirror rules, leave that to codemirror plugins, ( already in core 3.4 )

Love the notifications, that is exactly what I wanted to do with our theme, move it to sidebar so it does not shift the whole page, or use popup overlays, 3.5 will probably have a new desktop or popup notification system.

I am missing anything below the footer, debuglog for example.


This might work better by working with the wrapper instead of maincontainer.
Since wrapper wraps all content including footer and anything after it.

I had better luck with this for example ( granted not very tested, just fiddling, but easier then changing the entire maincontent to absolute positioning. )

Code:

.wrapper {
    margin-left:200px;
}
#maincontent {
     width: 100%;
    position: inherit;
     margin-top: 61px;
}

#sidebar {
    margin-left:-200px !important;
}

Plus you can set max-width on wrapper to limit it.

here are my overrides to make it work with stylewide and sbfixed.

PHP Code:

/* shawn_a flat_blue overrides */
.wrapper {
    margin-left:200px;
}
#maincontent {
      width: 100%;
    position: inherit; 
      margin-top: 61px;
}
#sidebar {
    margin-left:-200px !important;
}
.sbfixed #sidebar {
    margin-left: 0 !important;
    left:0;
    position:fixed !important;
}

#footer{
    position:inherit;
    height: auto;
}

#sa_gsdebug-wrapper.fullwidth {
    position:relative !important;
} 


Should work in 3.4 also
Changed footer to not fixed since footer hooks are inside of it, also added a override for sa_debug console

Looks like quite a few changes, thanks for all the input! Would everyone be willing to work together with their changes on this in the GitHub repo? I'd like to make this theme as best as possible and perhaps it could be the default theme in a future version!

GitHub: https://github.com/PhireWare/flat-blue

[datiswous]

How to place the sub-menu on the right? Tried to toggle the:

Code:

/*------------------------------------------------------------------------------
 2/3. Toggle these two floats if you want to swap the side bar position
------------------------------------------------------------------------------*/
#sidebar { float: left;}
#maincontent, .updated, .error, .notify { float: left; position: relative; /* left: 200px; */}

Couldn't get it to work properly.

Also, when the SA GS Admin Toolbar Plugin is activated, it's toolbar is over the admin