Posts: 14
Threads: 3
Joined: Mar 2015
2015-03-31, 05:53:18
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/
Posts: 1,127
Threads: 136
Joined: Feb 2012
I really like it. Good Job!
Posts: 6,266
Threads: 181
Joined: Sep 2011
Very nice i was looking to make a theme like this.
Which browser template is that? Been looking for one of those too.
Posts: 14
Threads: 3
Joined: Mar 2015
2015-04-01, 00:47:18
(This post was last modified: 2015-04-01, 00:48:21 by phireware.)
(2015-03-31, 08:11:33)Timbow Wrote: I really like it. Good Job!
Thank you! Glad you like it.
(2015-03-31, 08:57:20)shawn_a Wrote: 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.
Posts: 6,266
Threads: 181
Joined: Sep 2011
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.
Posts: 14
Threads: 3
Joined: Mar 2015
2015-04-01, 04:27:04
(This post was last modified: 2015-04-01, 04:27:57 by phireware.)
(2015-04-01, 01:46:51)shawn_a Wrote: 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
Posts: 324
Threads: 5
Joined: May 2012
This is really nice looking. Any download links available?
Posts: 305
Threads: 15
Joined: Mar 2014
2015-04-15, 10:36:55
(This post was last modified: 2015-04-15, 10:37:25 by Tyblitz.)
(2015-03-31, 05:53:18)phireware Wrote: 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.
Posts: 6,266
Threads: 181
Joined: Sep 2011
Are you going to share this?
Posts: 14
Threads: 3
Joined: Mar 2015
(2015-04-13, 03:41:06)islander Wrote: This is really nice looking. Any download links available?
(2015-04-15, 10:36:55)Tyblitz Wrote: (2015-03-31, 05:53:18)phireware Wrote: 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.
(2015-04-26, 00:32:36)shawn_a Wrote: Are you going to share this?
Sorry for the late reply, I uploaded what I've worked on in the Extend section! FlatBlue Download
Posts: 324
Threads: 5
Joined: May 2012
Very cool, Thanks
Question, how do you prevent it from loading the CSS on the front end?
It is over-riding the themes CSS.
Posts: 14
Threads: 3
Joined: Mar 2015
(2015-04-27, 03:39:15)islander Wrote: Very cool, Thanks ![Smile Smile](http://get-simple.info/forums/images/smilies/smile.gif)
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.
Posts: 1,108
Threads: 70
Joined: Aug 2009
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.
Posts: 14
Threads: 3
Joined: Mar 2015
(2015-04-27, 06:04:11)n00dles101 Wrote: 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!
Posts: 423
Threads: 15
Joined: Mar 2011
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.
--
Nick.
Posts: 14
Threads: 3
Joined: Mar 2015
(2015-04-27, 19:55:14)hameau Wrote: 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!
Posts: 3,491
Threads: 106
Joined: Mar 2010
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
Posts: 14
Threads: 3
Joined: Mar 2015
(2015-04-28, 00:41:18)Carlos Wrote: 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.
Posts: 6,266
Threads: 181
Joined: Sep 2011
adding 'all' as default in 3.4 probably
Posts: 324
Threads: 5
Joined: May 2012
2015-04-28, 05:23:02
(This post was last modified: 2015-04-28, 06:56:48 by islander.)
(2015-04-27, 19:55:14)hameau Wrote: - 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...
Posts: 305
Threads: 15
Joined: Mar 2014
2015-04-28, 23:16:00
(This post was last modified: 2015-04-28, 23:18:43 by 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)
Posts: 6,266
Threads: 181
Joined: Sep 2011
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
#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.
Posts: 6,266
Threads: 181
Joined: Sep 2011
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
Posts: 14
Threads: 3
Joined: Mar 2015
(2015-04-28, 23:58:52)shawn_a Wrote: 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
#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.
(2015-04-29, 01:08:03)shawn_a Wrote: 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
Posts: 1,247
Threads: 82
Joined: Feb 2011
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
|