CMS Menu Icons

573 views
Skip to first unread message

Uncle Cheese

unread,
Aug 2, 2012, 7:44:27 AM8/2/12
to silverst...@googlegroups.com
Is there an API for setting the icon for my custom LeftAndMain interfaces in the CMS menu? Seems to just default to the 'settings" icon, but core components like Pages and Files get their own. How do I do that?

dospuntocero

unread,
Aug 2, 2012, 12:05:16 PM8/2/12
to silverst...@googlegroups.com
i was wondering the same thing... :D

Nicolaas Thiemen Francken - Sunny Side Up

unread,
Aug 2, 2012, 10:19:37 PM8/2/12
to silverst...@googlegroups.com
Sorry, a bit off-topic - but I hope the rant below is a welcome idea...

I would welcome an "enhancement" where any class, can have an icon associated with it...(like we do with SiteTree) - so that you can use these icons in building user-interfaces for managing data.  This would allow for a more visual experience of the CMS. 

Maybe we could allow image folders called "icons" to be automatically be added to the manifest in that any icon that matches a class name is automatically "linked" to it.  What is more, we could have variations on the icons:

e.g. 

mysite/images/icons/MyDataObject-32x32.png

and of course we apply the "default" vs "themed" concept. 

Going along this route you could open up a ModelAdmin application and see a grid of icons rather than having to select from a dropdown what DataObject you like to manage.  

Sorry, just a bit of off-topic "thinking out loud". Perhaps an idea for SS 4.0?

Nicolaas

Martimiz

unread,
Aug 3, 2012, 6:43:24 AM8/3/12
to silverst...@googlegroups.com, n...@sunnysideup.co.nz, ma...@sunnysideup.co.nz

Hi

At the moment, this is done using styles: framework/admin/templates/Includes/LeftAnMain.ss creates a

<span class="icon icon-16 icon-$Code">&nbsp;</span>

where $Code seems to insert the classname. Then in admin/images/menu-icons there are a couple of sprites containing the icons, and in admin/cms/screen.css they are set:

.icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu-icons/16x16-sb173d358c2.png'); }
.icon.icon-16.icon-reportadmin { background-position: 0 -32px; }

So you could probably use a custom css (init?) doing

.icon.icon-16.icon-myclass { background: url('/xxx/xxx/someicon.png.png'); }

Maybe an API would make things somewhat more clear?

Martine

Martimiz

unread,
Aug 3, 2012, 7:05:18 AM8/3/12
to silverst...@googlegroups.com, n...@sunnysideup.co.nz, ma...@sunnysideup.co.nz

Sorry, should be <span class="icon icon-16 icon-{$Code.LowerCase}">&nbsp;</span>

Anyway, just checked in ModelAdmin, and it works:

    public function init() {
        parent::init();
        Requirements::customCSS(".icon.icon-16.icon-whiskyadmin { background: url('/whisky/images/whiskyadmin.png'); }");
    }

Martine


Op vrijdag 3 augustus 2012 12:43:24 UTC+2 schreef Martimiz het volgende:

Martimiz

unread,
Aug 4, 2012, 3:45:04 PM8/4/12
to silverst...@googlegroups.com, n...@sunnysideup.co.nz, ma...@sunnysideup.co.nz
OK, the above does only work, within the modeladmin sectton itself, so instead in _config.php just use:

LeftAndMain::require_themed_css('somecssfile');

or

LeftAndMain::require_css('pathtosomecssfile');

Martine

Ingo Schommer

unread,
Aug 7, 2012, 5:09:14 PM8/7/12
to silverst...@googlegroups.com, n...@sunnysideup.co.nz, ma...@sunnysideup.co.nz
That's the intended use/solution, if we encode every UI aspect in PHP statics, we end up with very messy classes.
In terms of API, as a rule of thumb it only becomes one if we document it somewhere.
This is a fairly common use case though, so it *should* be documented.
@Martimiz: Keen to write up a short howto similar to http://doc.silverstripe.org/framework/en/howto/customize-cms-tree?

Martimiz

unread,
Aug 8, 2012, 10:37:17 AM8/8/12
to silverst...@googlegroups.com, n...@sunnysideup.co.nz, ma...@sunnysideup.co.nz

@Martimiz: Keen to write up a short howto similar to http://doc.silverstripe.org/framework/en/howto/customize-cms-tree?

Yes I could do that. I'll have a look and see if I can extend it a little. One question: do I create a pull request? And if so, for which branch?

Btw: the correct icon doesn't show when the Add/Editform is displayed. In CMSBreadcrumbs the BreadCrumbs do not recognize the TopLevelController. Placing the icon creation outside the Breadcrumbs loop seems to work fine though, so I'll create a ticket/patch for that as well.

Ingo Schommer

unread,
Aug 8, 2012, 10:49:35 AM8/8/12
to silverst...@googlegroups.com
Yep, pull request for 3.0, please :) Just to be clear: Don't extend that "cms tree" howto, that's a different topic.
--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To view this discussion on the web visit https://groups.google.com/d/msg/silverstripe-dev/-/aOVJXHBU14YJ.
To post to this group, send email to silverst...@googlegroups.com.
To unsubscribe from this group, send email to silverstripe-d...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/silverstripe-dev?hl=en.

Martimiz

unread,
Aug 8, 2012, 11:53:15 AM8/8/12
to silverst...@googlegroups.com

No, I won't :-) I just want to look if there are any other nice things that can be done using styling, besides changing the icon

Yep, pull request for 3.0, please :) Just to be clear: Don't extend that "cms tree" howto, that's a different topic.


I've sent a pull request (https://github.com/silverstripe/sapphire/pull/712) that solves the issue of the icon not being updated in the DetailForm. I haven't found any glitches, but please check it out. And a ticket #7756 (http://open.silverstripe.org/ticket/7756) I now realize I should have named the pull request after the ticket, sorry, so much to think about for a simple minotpatch :-)
 

Uncle Cheese

unread,
Aug 9, 2012, 2:41:19 PM8/9/12
to silverst...@googlegroups.com
Do I understand correctly that we're going do document Martimiz's solution as the endorsed method for adding a custom icon to your LeftAndMain interface? Maybe it's just me, but something isn't right about that. At worst it looks like a hack, and at best it's a desperate workaround.

I understand the point about not cluttering up our classes with statics, but you've already provided the API for $menu_title and even $url_segment. Why stop there?

I don't know.. that just looks bad to me. If I were shopping around for a CMS and came across that documentation, I'd be a bit nonplussed.

Ingo Schommer

unread,
Aug 9, 2012, 3:55:22 PM8/9/12
to silverst...@googlegroups.com
Hm, Aaron you might be right, given how often those icons would be customized, particularly for new ModelAdmins.
I stand by my comment about avoiding to clutter PHP with UI aspects too much, though.
The YML config layer sounds like a better place for this. Not as obvious,
but that's more a matter of documentation (e.g. in the existing ModelAdmin docs).

--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To view this discussion on the web visit https://groups.google.com/d/msg/silverstripe-dev/-/cdWLSP6PVbwJ.

Aaron Carlino

unread,
Aug 9, 2012, 5:30:11 PM8/9/12
to silverst...@googlegroups.com
Yes! I love the idea of using config. But maybe for consistency, move $menu_title and $url_segment there, too?

Hamish Friedlander

unread,
Aug 9, 2012, 5:31:00 PM8/9/12
to silverst...@googlegroups.com
I definitely think the manner of adding CSS by using require_css in _config.php is a hack, and we need to provide a better way of adding css to the admin area.

But the general idea of controlling appearance in the admin area via CSS instead of via configuration values is sound, and the method I prefer.

Icons sit right on the boundary of what's content versus what's appearance, so I'm happy either way. I still think CSS is slightly tidier (you can deal with different sized images, different images in different places, etc) but I'm OK if someone raises a patch that adds a config value. I think if we start adding config values for font sizes etc though we've gone to far.

Hamish Friedlander

Hamish Friedlander

unread,
Aug 9, 2012, 5:33:25 PM8/9/12
to silverst...@googlegroups.com
You can override _any_ static with a yml config value as long as the static is accessed via Object->stat (or better yet Config::inst()->get) and not directly via ClassName::$static.

Statics still have a place in the configuration system - they're the way you set default values for config properties.

And yes Ingo, I know this all still isn't documented.

Hamish Friedlander

Richard Rudy

unread,
Aug 9, 2012, 6:01:38 PM8/9/12
to silverst...@googlegroups.com
I have to second adding the icon via CSS, but shouldn't the button get a default ID or class based on the ModelAdmin name. I think it's pretty standard practice for SilverStripers to add classes or IDs to pages using the camel cased value for $PageType in templates already. They could just add the icon background- image property as a variable in the scss. 

Richard Rudy
Design+Awesome
@thezenmonkey

Martimiz

unread,
Aug 16, 2012, 8:01:03 AM8/16/12
to silverst...@googlegroups.com
So I didn't write that short howto just yet :-)

I also feel that styling should be the preferred way to alter the CMS appearance. But in this case the menu title and the menu icon are partners in describing the button's functionality, so it seems logical to me that alongside the custom $menu_title, there should be a custom $menu_icon as well.

This functionality should be part of LeftAndMain, just like the menu_title is. One way to do this: create a static LeftAndMain::menu_icon_for_class() method parallel to LeftAndMain::menu_title_for_class() that sets a custom css requirement to style the icon based on a static var available for classes extending LeftAndMain (like ModelAdmin):

static var $menu_icon = '/path/to/image.png';

I've tested it, it leaves the default button styling intact, it works fine in the menu as well as in the right pane headers, without need to change existing templates. The only thing you do is provide the icon path. If you agree, I'll create a pull request for this.

One thing: to do this right the static var $menu_icon should probably be present in every class extending LeftAndMain, just like $menu_title. Leaving it out doesn't break anything, but nevertheless... Please let me know what you think.

Cheers, Martine

Martimiz

unread,
Aug 19, 2012, 8:38:57 AM8/19/12
to silverst...@googlegroups.com
I think I have this working nicely nowworking solution now, I went ahead and sent a pull request here, please let me know if you think this to be the right approach:

https://github.com/silverstripe/sapphire/pull/725

I use LeftAndMain::MainMenu(), for one because I felt it's not strictly a menu icon alone - it is also used in the right pane headers. But maybe I'm wrong and I should have used the CMSMain class?

Martine


Op donderdag 16 augustus 2012 14:01:03 UTC+2 schreef Martimiz het volgende:

Martimiz

unread,
Sep 1, 2012, 10:58:18 AM9/1/12
to silverst...@googlegroups.com

Just to be complete: $menu_icon functionality has now been merged into 3.0
Reply all
Reply to author
Forward
0 new messages