Admin theme development

10010110 · **Joined:** Tue Jan 22, 2008 9:57 am **Posts:** 152

I have created a custom admin theme based on the code of OneEleven in version 1 of the CMS that I’m currently adapting for version 2 and in both versions there were/are a few things that have interfered my process or are annoying, and I’d like to bring that up and get some opinions (or, even better, make a difference). And please, anyone of the dev team, don’t feel offended by my suggestions; this is in no way personal, I hope to be as constructive as possible.

From the perspective of a front-end developer there are two major things of concern for theme/UI design:

Issue 1:
As of late I occasionally see some HTML that appears to emulate Bootstrap creep up in the admin theme, with things like <div class="span5"> etc. polluting the markup. This is kind of problematic as it implies some kind of layout/look that can’t be known by HTML (and isn’t supposed to be HTML’s concern, anyway). Especially when it comes to responsive layouts, presentational attributes make no sense since the layout can (and has to) change completely depending on the viewport size. But not just for responsiveness, also the fact that a user interface like this can generally have a completely different look. My custom theme has the main menu at the top, with dropdown menus, as the old themes used to have, and I have the tabs on the side instead above the content area (see attached screenshot).

Attachment:

File comment: Sample of my custom theme (note: this is still in development and not final)

sk_flat_blue.jpg [ 104.37 KiB | Viewed 2973 times ]

Suggested solution:
Create a custom HTML “framework” specifically for the admin interface, or a ruleset for template development, for that matter, that is “style agnostic”, i. e. doesn’t assume a certain look/layout by adding presentational classes etc. If it is appreciated by the developer team I would gladly come up with some sample templates or guidelines to further discuss the approach to take.

Issue 2:
This is kind of related to the above – since CMS version 2 some contents such as the Content Manager or help text are loaded asynchronously. While that in itself isn’t particularly problematic the way it is presented is, again, imposing a certain look on the theme designer that isn’t necessarily desired. The help text is loaded in jQuery UI templates that are inserted at the very end of the document and that assume the theme designer/developer wants do show it as dialog overlay. But perhaps they want to show it directly associated to the control to which it belongs (i. e. directly under the label or field as part of the content, not as overlay)? And again, it doesn’t take responsiveness into account.

Suggestion:
Insert asynchronously loaded content where it would logically/structurally be expected, using minimal markup that is, again, style agnostic and let the theme designer decide which UI style to use. They can then choose whatever method (JS library, custom vanilla JS, …) to manipulate that markup and display it as desired.

How does that sound? Any objections?

slick · **Joined:** Fri Mar 03, 2017 8:54 am **Posts:** 8

Long time CMSMS user here. I just made an account to appreciate this post. I cannot believe there have been no replies yet!

Thank you so much to the OP for addressing the issue of admin theme development. Basically there are no modern admin themes for v2 – the CMSMS project really deserves a kick-ass UI!

@OP: Would you be willing to share your efforts for the flat theme so others can iterate it?

At this point, I would even suggest for the CMSMS project to raise some money to have a commercial-grade, responsive, awesomely modern admin theme made. I would be willing to chip in a decent amount.

I fear the project could die a slow death if it does not start to grow its design sensibilities. It would be a shame since it's modularity and flexibility are so great.

jog · **Joined:** Tue Aug 28, 2007 11:03 am **Posts:** 22

Looks great! I'd be very interested to try the unfinished theme... pretty please?

chandra · **Posted:** Fri Mar 03, 2017 11:50 am

I'm interested too.

jog · **Joined:** Tue Aug 28, 2007 11:03 am **Posts:** 22

10010110 wrote:

I have created a custom admin theme based on the code of OneEleven in version 1 of the CMS that I’m currently adapting for version 2 and in both versions there were/are a few things that have interfered my process or are annoying, and I’d like to bring that up and get some opinions (or, even better, make a difference). And please, anyone of the dev team, don’t feel offended by my suggestions; this is in no way personal, I hope to be as constructive as possible.

From the perspective of a front-end developer there are two major things of concern for theme/UI design:

Issue 1:
As of late I occasionally see some HTML that appears to emulate Bootstrap creep up in the admin theme, with things like <div class="span5"> etc. polluting the markup. This is kind of problematic as it implies some kind of layout/look that can’t be known by HTML (and isn’t supposed to be HTML’s concern, anyway). Especially when it comes to responsive layouts, presentational attributes make no sense since the layout can (and has to) change completely depending on the viewport size. But not just for responsiveness, also the fact that a user interface like this can generally have a completely different look. My custom theme has the main menu at the top, with dropdown menus, as the old themes used to have, and I have the tabs on the side instead above the content area (see attached screenshot).

Attachment:

sk_flat_blue.jpg

Suggested solution:
Create a custom HTML “framework” specifically for the admin interface, or a ruleset for template development, for that matter, that is “style agnostic”, i. e. doesn’t assume a certain look/layout by adding presentational classes etc. If it is appreciated by the developer team I would gladly come up with some sample templates or guidelines to further discuss the approach to take.

Issue 2:
This is kind of related to the above – since CMS version 2 some contents such as the Content Manager or help text are loaded asynchronously. While that in itself isn’t particularly problematic the way it is presented is, again, imposing a certain look on the theme designer that isn’t necessarily desired. The help text is loaded in jQuery UI templates that are inserted at the very end of the document and that assume the theme designer/developer wants do show it as dialog overlay. But perhaps they want to show it directly associated to the control to which it belongs (i. e. directly under the label or field as part of the content, not as overlay)? And again, it doesn’t take responsiveness into account.

Suggestion:
Insert asynchronously loaded content where it would logically/structurally be expected, using minimal markup that is, again, style agnostic and let the theme designer decide which UI style to use. They can then choose whatever method (JS library, custom vanilla JS, …) to manipulate that markup and display it as desired.

How does that sound? Any objections?

I wholeheartedly agree on all points, thanks for your effort!

DIGI3 · **Posted:** Wed Mar 08, 2017 8:19 pm

Just for the record, the Dev Team isn't ignoring this, and it is a regular topic of discussion. There's a fair bit to it, not the least of which is changes to the core to facilitate better admin themes could easily break existing modules. That doesn't mean we're not doing anything about it, but it does mean it has to be a careful process.

We have a few Dev Team members who are working on improving the existing admin theme as a first step, and then possibly creating one or two alternate ones as personal projects. Most likely this process will trigger some core changes to facilitate it, but will be coupled with extensive testing of existing modules, etc.

We appreciate the feedback, and it's great to see the community working on themes. Our resources are extremely limited but we will do what we can to help you with the process.

slick · **Joined:** Fri Mar 03, 2017 8:54 am **Posts:** 8

DIGI3 wrote:

Just for the record, the Dev Team isn't ignoring this, and it is a regular topic of discussion. There's a fair bit to it, not the least of which is changes to the core to facilitate better admin themes could easily break existing modules. That doesn't mean we're not doing anything about it, but it does mean it has to be a careful process.

We have a few Dev Team members who are working on improving the existing admin theme as a first step, and then possibly creating one or two alternate ones as personal projects. Most likely this process will trigger some core changes to facilitate it, but will be coupled with extensive testing of existing modules, etc.

We appreciate the feedback, and it's great to see the community working on themes. Our resources are extremely limited but we will do what we can to help you with the process.

Thank you for the response. I'm glad to hear that!

As others have pointed out it might be helpful in the long run if the admin template adopts some kind of UI-framework to make development easier and faster (e.g. Uikit-3 just came out and looks great). This would also provide some guidance to those seeking to alter the default template.

It is a concern of mine that the process of modernizing the GUI might take too long. I still feel we might solve this by chipping in some money to pay a good dev for his time. Would you be willing to connect me with someone involved in the admin-theme development?

slick · **Joined:** Fri Mar 03, 2017 8:54 am **Posts:** 8

If anyone is interested, here is my hacked version of the OneEleven theme. I altered the menu to a horizontal navigation with dropdowns and flattened the look throughout with the help of Uikit-3.

It is by no means a cleanly styled, but I hope to improve when CMSMS 2.2 comes out and I need to make some adjustments anyway.

Download-Link:
xxxxx

Rolf · **Posted:** Mon Mar 27, 2017 9:54 pm

@slick
Thanks for improving this Admin theme, but...
You shouldnt share a *hacked* theme. It will give problems for the users when upgrading the CMS! It will be overwritten...

The only good method is to fork the theme (copy and rename) and make your changes!
I therefor removed the download link from your post.
You can share your new - forked - theme at https://themes.cmsmadesimple.org/download/admin-themes
Hope to see it there soon!

Rolf

slick · **Joined:** Fri Mar 03, 2017 8:54 am **Posts:** 8

@Rolf: Thanks for your input. I adjusted my theme accordingly. However I got an error when signing up for the theme upload: "Mcrypt functionality is not enabled."

I will try again to post a direct link, you can correct me if needed.

Download here:
http://moegli.ch/kunden/cmsms/slick.zip

Caution: The theme is probably not compatible with the upcoming release of CMSMS 2.2 – use at your own risk.

kishman155 · **Posted:** Thu May 18, 2017 7:25 am

I also played around with the admintheme. Some things i have identified could be better for developing. Should be discussed.

1.) CSS

the css handling in 2.* is not that nice as it is in the frontend.
It would be much nicer if we could load css files from a direktory.
Like:
admintheme/themename/cssfiles/ltr
admintheme/themename/cssfiles/rtl

so the adminstyle could be splited into layout, typografie, colors, etc.

So if you want only change some colors you dont't need to change it in the whole stylesheet. Also it would be nice if we could have some little help from smarty like we do it on the frontend.

Is it realy needed to load all the costum stylesheets from modules when the module is not called?

I make it with GetHeaderHtml(). So only if module is called directly the stylesheet ist inserted.

2.) Grid

The Oneeleven grid system has his limitations. As of upcomming flexgrid systems we should rethinking the naming of classes for grids.
It would be easier if we name them gridcontainer, gridelement etc.
could be look like

Code:

<div id="grididentiver" class="gridcontainer">
<div class="gridelement one-tvelvth"></div>
</div>

So if someone wants to make a admintheme he or she is free to use flexgrid, lineargrid or what else.

3.) Iconset

as i tried to use fontawesome to have scaleable icons i needed to write a iconparser to handle the image calls on the admintheme. {admin_icon icon='true.gif'} it would be much easier if it would only name them true, false, etc. and let handle fileextention by the admintheme.

4.) Javascript ajax requests.

i do a lot of stuff with ajax requests.
we have a lot of duplicate functions there.

Code:

 $('.switchuser').click(function(ev){
   ev.preventDefault();
   var _href = $(this).attr('href');
   cms_confirm('{lang('confirm_switchuser')|escape:'javascript'}').done(function(){
       window.location.href = _href;
   });
    });

the only diverence is classname and the confim message.
so why don't use the class to handle this functionality

Code:

$('div').on('click','a.ajaxlink',function(event) {
var _href = $(this).attr('href');
event.preventDefault();
makeAjaxGetRequest(_href+"&showtemplate=false",$(this).attr("id"));
});

for the confirm message we could use the data stuff of jquery
maybe with module name inside

Code:

class="ajaxlink_confirm"
data-confirm_msg="modulename__confirm_msg"

$('div').on('click','a.ajaxlink_confirm',function(event) {
event.preventDefault();
var _href = $(this).attr('href');
var _confirm_msg = $(this).data('confirm_msg');
var _id = $(this).attr("id");

cms_confirm(cms_get_lang(_confirm_msg)).done(function(){
       makeAjaxGetRequest(_href+"&showtemplate=false",_id);
   });

});

for developer does not care if it is a js-delete or other class it should do the request on click.

4.) Ajax responce

i use json to do some things on responce.
Thats why i wrote a ajaxhandler.

it parse the responce like these.

Code:

var data = $.parseJSON(data);

it will parse the json string returned from the link called by makeAjaxGetRequest(

with some fix vars in the data array i could do some things with a api.
some of the statuses

error->show errors in the errorbox cmsms way(red)
message->show message in the messagebox cmsms way(green)
redirect->redirect to a url the responce data.url was given
refresh->refresh the page
showform->shows a form
msg_replace_data->replace one or two things in the page, shows a form if given, shows a message(error or message), close a ajaxform if it is open or leave it open.
append->append some data to a div or something
handler-> calls a handler for a responce

so i let decide the action what to do when the action has finished his job.
No duplicate functions in the templates.
If someone wants to do it diverent, he is free to write his own api in the admintheme based on the json responce.

5.) standard.js

there are some fixed things in that file. if we decide to change the framework from jquery to other frameworks it's hard to do that. it will be much better to handle it more flexible and encapsle all framework calls used by the frame work with cmsms once.

I hate the jquery dialog function. it's not very flexible.

regards

slick · **Joined:** Fri Mar 03, 2017 8:54 am **Posts:** 8

I updated my admin theme for CMSMS 2.2.1 if anyone is interested:

http://moegli.ch/kunden/cmsms/slick2.zip

Admin theme development

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Who is online