[#ZBXNEXT-3502] Ability to include custom CSS ("lightweight theme")

[ZBXNEXT-3502] Ability to include custom CSS ("lightweight theme") Created: 2016 Oct 17 Updated: 2017 Sep 19
Status:	Open
Project:	ZABBIX FEATURE REQUESTS
Component/s:	Frontend (F)
Affects Version/s:	3.2.1
Fix Version/s:	None

Type:

New Feature Request

Priority:

Trivial

Reporter:

Janne Korkkula

Assignee:

Unassigned

Resolution:

Unresolved

Votes:

Labels:

customisation, style, themes

Remaining Estimate:

Not Specified

Time Spent:

Not Specified

Original Estimate:

Not Specified

Attachments:

aalto_zabbix.css

aalto_zabbix_20170919.css

screenshot.Firefox.20161017T163855.png

screenshot.Firefox.20161017T163930.png

screenshot.Firefox.20161017T164023.png

Description

It would be most convenient, if we could configure an URL for a custom style sheet, which would then be included as the last style sheet when serving pages.

Creating a custom theme is too heavy a solution for just tweaking minor issues, not least because a custom theme would not benefit from bugfixes and/or updates in the Zabbix distribution.

As it is, I decided to append a hack to browsers.js instead of changing the theme CSS file itself or modifying any PHP code:

/* Aalto custom style import, jannek 2016 */
var AaltoCssId = 'AaltoCss';
if (!document.getElementById(AaltoCssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = AaltoCssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = '/css/aalto_zabbix.css';
    link.media = 'all';
    head.appendChild(link);
}

A bit ugly yes, but it works perfectly well and should survive updates nicely.

For curiosity, attached is our current additional style sheet for 3.2.1. It's very much more compact than the default.

This feature request is naturally related at least to ~~ZBX-10504~~, "Get back compact 2.x web-interface layout".

Comments