search

DSpace / dspace-angular

DSpace User Interface built on Angular.io
https://wiki.lyrasis.org/display/DSDOC8x/
BSD 3-Clause "New" or "Revised" License
126 stars 417 forks source link

Admin user can save custom CSS styles for a collection in DSpace Admin interface #3254

Open alexklbuckley opened 3 weeks ago

alexklbuckley commented 3 weeks ago

Is your feature request related to a problem? Please describe.

It would be helpful for admin users to be able to save CSS styling rules for a collection in the DSpace Admin collection forms.

This CSS would then be displayed on the collection browse page and collection item pages.

Describe the solution you'd like

  1. Add a new metadata field to the DSpace database for saving collection CSS
  2. Add a new 'Collection styles' input field to DSpace Admin collection form.
  3. Admin users can save raw CSS rules to 'Collection styles' input box.
  4. CSS rendered on collection browse page and item detail page.

These CSS rules should be able to style any part of the DSpace interface - including header, nav bar and footer.

Describe alternatives or workarounds you've considered

Currently if an admin user wants to be able to customise the display of a collection they must ask someone with server access/technical knowledge to:

  1. Create a new theme
  2. Upload that new theme to the DSpace Angular server
  3. Edit the config.*.yml on the angular server - associating their collection with the new theme

We would like to add the ability for admin users to be able to make some styling changes themselves.

Additional information

tdonohue commented 2 weeks ago

While I'm not against this feature, I've labeled as "needs discussion" simply because embedding custom CSS needs to be done carefully (as it is possible to perform "attacks" via CSS injection).

So, any work in this direction must be careful to ensure it doesn't break base theming, but also doesn't open DSpace up to attacks. Provided that CSS is only editable to Administrators, that seems to limit any attack concerns.

kshepherd commented 1 week ago

I added a comment to https://github.com/DSpace/dspace-angular/pull/3250#issuecomment-2335127082 where I mention theme extensions and another approach where a class name is stored rather than raw CSS, though I see here that the ability for admins to control the style without a theme change is the key requirement...

I do think the idea is a little dangerous and stretches the scope of what we store even in our administrative metadata fields... as well as security concerns, even some copy/paste accident or other formatting problem could simply break everything. However, it is a creative idea and I'm open to seeing if it can be done safely and reliably.