Backend customization

Omeka S Development
1

Dear Omeka friends,

I would like to customise Omeka’s backend:
the idea is to be able to modify, even only via javascript or a css, the appearance of the input pages in the backend to hide non-essential parts and to create instead text and other parts that can help with compilation (compilation notes, small video tutorials, links to external references…).

How can I have javascript or css loaded into the backend?
The code should obviously depend on the type of page I am on (and my role!).

I don’t want to modify the Omeka core but work on parts that are related to the theme.
How can I approach this?

Thank you!!
Riccardo

ps. related to this, it would be useful if sub-menus had ids (and also other components)!
ex. inside <nav id=“menu” …
Resources, Admin, Modules… are identified by id.

2

Hello Riccardo,

I am not sure I understand what you mean by “backend”. Is your question about modifying the admin interface, like one could do on a theme writing custom CSS using the CSS Editor module or writing your own templates by overriding the theme’s templates?

3

Thank you for your answer.

Yes, I’d like to customize the admin interface.
Here a mock-up:

AdminUi-Customization
AdminUi-Customization1235×841 119 KB

From what I understand theme customization refers to the publishing of sites and is not related to the appearance of the admin interface…

Thank you,
Riccardo

4

Hi Riccardo,

I see that the templates for the admin theme are located in the folder /application/view/omeka/admin/...

For example, you can modify the template for the “New item” page by editing the file /application/view/omeka/admin/item/add.phtml

I don’t know if there is a way to override the admin templates the same way as for the frontend themes. If there’s none, maybe we can open an issue to make the backend themable :wink:

1 Like
5

Hi,
the ability to style the back-end could be really game changer, at least for my experience: the archive manager and the people doing data insertion are comfortable with exactly the graphics, style, and patterns that are specific to the project they are tackling.

I think there can be different levels of customization.

Being able to insert css and js snippets, for different pages (e.g., automatically making a js variable available with contextual pointers) could be a first level. This could allow icon and colors personalization, some interactivity, can help with data entry (e.g., creating drop-down menus with fixed values) and could also greatly facilitate a basic level of accessibility (e.g. different fonts and size, high contrast).

There could be a second level for which functions are available to edit UI elements, without rewriting them: e.g., managing menu items, managing collection columns, managing different value blocks, creating different pages (e.g., to edit content “across” different items). This is the main strategy, for example, that Wordpress adopts (I use it as an example because I know it).

A third level might be the availability of functions to recreate a different template from scratch, although the availability of rest-api makes much easier to create single-page interfaces.

Thank you,
Riccardo

6

Hi @rickyx ,

You can currently create a module that will listen for admin events and inject JS and CSS into the admin interface. You would just need to listen for the appropriate event:

public function attachListeners(SharedEventManagerInterface $sharedEventManager) 
{
    $sharedEventManager->attach(
        'Omeka\Controller\Admin\Item',
        'view.edit.after',
        [$this, 'injectModuleDependencies']
    );
}

https://omeka.org/s/docs/developer/events/server_events/#attaching-a-listener-to-an-event

And then inject the script:

public function injectModuleDependencies(Event $event)
{
     $target = $event->getTarget();
     $target->headLink()->appendStylesheet($target->assetUrl('css/styles.css', 'ModuleName'));
     $target->headScript()->appendFile($target->assetUrl('js/script.js', 'ModuleName'));
}
1 Like