Questions: Newbie customisation

[gamesbook]

I'm sure there are docs for many of these questions; please refer me to them so I can work out the answer myself!

1. What is the best way to override element styling (e.g. I would like the * text for required fields to be red, not pale grey; and to change the font size of the 'breadcrumbs' menu at the top)?
2. (related to 1?) How do change elements display; e.g. I would the 'delete' option to look like a button, not red text (suggestion: the 'warning' button from http://twitter.github.io/bootstrap/base-css.html#buttons might be a good default to use!)
3. I created an override for the default admin that would hide the list of filters (they are hidden unless deliberately activated); how could I do that for Django Suite?
4. (a) Is it possible that list of models shown in the lefthand menu, when you click on the app name, can be made to disappear when you click on the same app name again (rather than only when you click on a different name, as is the case now; and also not display the same model list in main section)? (b) Related to this, it would then also be neat to add the '+' icon in front of each model name in the lefthand menu, so that a user could do a quick add from the menu.
5. When dealing with a model list display that has many items, sorting by multiple columns looks awkward because the [pointer, number, cross] symbols try to "squeeze" in somewhere. Would it not just be simpler and look more consistent to have these always displayed above (top & centre) the column name?
6. How is it possible to change the position of sections on the display list? eg. move the actions back to the top (we use actions a lot in our application) and move the date filter to the bottom.
7. The form layout seems strange. When there are a number of fields in a group, the first one's label appears on the left hand (white area) but the labels for all the other fields appear inside the pale grey area; surely they should all be inside?
8. The green "plus" sign next to the drop-down lists seem out-of-style with the rest of the symbols - can this be changed (eg. to one provided by Bootstrap)?
9. The main search field (above the left menu) searches inside users; how to change this to search inside another app/model?

[darklow]

I'm sure there are docs for many of these questions; please refer me to them so I can work out the answer myself!

1) What is the best way to override element styling (e.g. I would like the * text for required fields to be red, not pale grey; and to change the font size of the 'breadcrumbs' menu at the top)?

Definitely use CSS for that. Extend base_site.html file and include your own .CSS file.

See docs and example file here: http://django-suit.readthedocs.org/en/develop/#templates https://github.com/darklow/django-suit/blob/master/suit/templates/admin/base_site.html

2) (related to 1?) How do change elements display; e.g. I would the 'delete' option to look like a button, not red text (suggestion: the 'warning' button from http://twitter.github.io/bootstrap/base-css.html#buttons might be a good default to use!)

Delete action is not something you do regularly, therefore it has different style. If you want to change it: Use CSS or override/extend submit_line.html.

Read here how to override any of Django templates: http://django-suit.readthedocs.org/en/develop/#templates

3) I created an override for the default admin that would hide the list of filters (they are hidden unless deliberately activated); how could I do that for Django Suit?

First hide it using CSS and toggle using your own JS function. Extend change_list.html template to add toggle link.

4) (a) Is it possible that list of models shown in the lefthand menu, when you click on the app name, can be made to disappear when you click on the same app name again (rather than only when you click on a different name, as is the case now; and also not display the same model list in main section)?

Yes this can be made quite easily by custom JS function (add click event and remove "active" class from current menu item to one you just clicked). Actually that was default behavior at first (while DS was not public yet, but then i removed it, it was too confusing that some items go to location instantly (when app has no children) and some on click will just open.

(b) Related to this, it would then also be neat to add the '+' icon in front of each model name in the lefthand menu, so that a user could do a quick add from the menu.

Currently it is not supported, you can either add a separate issue as feature request, or override menu.html and add [+] icon

5) When dealing with a model list display that has many items, sorting by multiple columns looks awkward because the [pointer, number, cross] symbols try to "squeeze" in somewhere. Would it not just be simpler and look more consistent to have these always displayed above (top & centre) the column name?

This is already reported in issue #23. Will fix in nearest future.

6) How is it possible to change the position of sections on the display list? eg. move the actions back to the top (we use actions a lot in our application) and move the date filter to the bottom.

In your ModelAdmin class set actions_on_top=True and actions_on_bottom=False to swap action placement. However to move date filter to bottom (on my opinion kind of strange position) you'll have to override admin/change_list.html and move {% block date_hierarchy %} below the result table

7) The form layout seems strange. When there are a number of fields in a group, the first one's label appears on the left hand (white area) but the labels for all the other fields appear inside the pale grey area; surely they should all be inside?

There is open discussion on forms with multiple fields in row #85, but there is no much we can do. Currently DS have the same behaviour as in original Django admin. Please read the discussion and if you have any suggestions - always welcome.

8) The green "plus" sign next to the drop-down lists seem out-of-style with the rest of the symbols - can this be changed (eg. to one provided by Bootstrap)?

That green button is added by JavaScript, i just didn't wanted to override any of Django admin original JavaScript files yet and after a while i get used to them. But you could make a feature request to change them.

9) The main search field (above the left menu) searches inside users; how to change this to search inside another app/model?

http://django-suit.readthedocs.org/en/develop/configuration.html#search-url

---

PS. Note: Because Django has so successful file/class structure, there are no limits on what you can do with it. The same way i extended (almost with no hacks) original Django admin, you can extend it or DjangoSuit too. Some of my apps are quite highly extended.

---

This is customization workflow i prefer:

1. Can i customize with default ModelAdmin class "official" properties. If not:
2. Can i customize with CSS in project.css. If not:
3. Can i do it with JavaScript in project.js. If not:
4. What templates (which blocks) should i extend. If you can't do it with templates (which happens quite rarely):
5. Customize it on ModelAdmin class level, use different templates/views if needed.

[gamesbook]

I think I need to go a step back...

A number of the items that I asked about are ones that I have already put in place in the standard Django admin. I am now trying to reproduce those in DS. Previously, according to guidelines on the web, what I did was copy over the default Django templates into project/templates/admin and then make changes to them. But I found I could not use these templates, that I had already changed, with DS ... so, I am now trying to reimplement my changes in the new templates that DS uses - where do I find those?

Similarly for CSS - where do I find the one DS uses, so I can see what I need to change?

For Q6 you say _"In your ModelAdmin class set actions_on_top=True and actions_onbottom=False to swap action placement". This seems strange? The default behaviour for standard admin is that the actions do appear on top, and therefore no settings are required in the ModelAdmin classes. This is the default that I want set back to the way it was - I don't really want to add these settings to all my ModelAdmin classes.

[darklow]

All the templates you can see here: https://github.com/darklow/django-suit/tree/develop/suit/templates

Here are all the static files - LESS, JS. However, it is more handy to inspect CSS using browser developer tools. https://github.com/darklow/django-suit/tree/develop/suit/static/suit

To set back default behavior for actions placement, add following code in file that is loaded every time - for example in project_app/init.py or any other installed app init.py file

from django.contrib.admin import ModelAdmin

ModelAdmin.actions_on_top = True
ModelAdmin.actions_on_bottom = False

[gamesbook]

I have tried adding in that code into the my_project/my_app/__init__.py file and there was no effect (actions stayed on the bottom). Was that the correct file? (None of my apps use init.py files...)

[darklow]

I have tried adding in that code into the my_project/my_app/init.py file and there was no effect (actions stayed on the bottom). Was that the correct file? (None of my apps use init.py files...)

The order of INSTALLED_APPS is also important, try moving your main app (project app) before 'suit'.

[gamesbook]

I have done that; order is now:

    'myproj.app1',
    'myproj.app2',
    # etc
    'suit',  # customized admin interface
    'django.contrib.admin',

But no effect.

[darklow]

Just tested and you're right it doesn't work in __init__.py Put these same three lines in any of your apps admin.py file instead and it should work (tested).

[gamesbook]

Sorry, no. Just tested that in a number of apps and still no change. Running Django 1.4.1 (if that makes any difference).