Backoffice compact themes

😎 😎 😎 Combodo's customers only 😎 😎 😎

name:: Backoffice compact Full moon and Dark moon themes
description:: This extension brinks two new themes for the back-office, which make the presentation more compact
version:: 1.0.0
release:: 2024-05-17
itop-version-min:: 3.0
state:: stable
php-version-max:: PHP 8.3

Features

This extension proposes 2 new themes to users, which makes the presentation more compact

one is based on the Fullmoon theme and the other on Darkmoon theme

Lists are more dense
Dashlets are more dense (less spaces on badges)
Fieldset restore the 2.7 look and feel
- with a border, grouping the fields in a more visual way
- a title with a small font and a greyed color, because it's not an information you read anymore once your are familiar with iTop

Revision History

Version	Release Date	Comments
1.0.1	2024-07-30	Added French translation
1.0.0	2024-05-17	First version

Limitations

n/a

Requirements

Compatible with iTop 3.x only

Installation

Standard installation process

Configuration

None

Usage

Each user need to go to its user preference:

choose theme Full moon (compact) or Dark monn (compact) and press button Apply

Fieldset

iTop 3.x Dark moon standard	Dark moon (compact) theme

List

iTop 3.x Full moon standard	Full moon (compact) theme

Dashboard

iTop 3.x Dark moon standard	Dark moon (compact) theme

Questions & Answers

Q: Can an Administrator change some parameters of those new themes?
A: Yes, with the Designer or an iTop extension, multiple XML parameters can be changed to fine tunes the spacing and fieldset border

itop-design

    <branding>
        <themes>
            <theme id="compact-fullmoon" _delta="define">
                <variables>
                    <variable id="ibo-tab-container--tab-container--min-height">0px</variable>
                    <variable id="ibo-tab-container--tab-container--last--min-height">1px</variable>
                    <variable id="ibo-datatables--row--padding-x">4px</variable>
                    <variable id="ibo-datatables--row--padding-y">6px</variable>
                    <variable id="ibo-fieldset-legend--color">$ibo-color-grey-600</variable>
                    <variable id="ibo-fieldset--border-color">$ibo-color-grey-400</variable>
                    <variable id="ibo-fieldset--border-style">dashed</variable>
                    <variable id="ibo-fieldset--border-width">1px</variable>
                    <variable id="ibo-fieldset--padding-y">10px</variable>
                    <variable id="ibo-fieldset--padding-x">10px</variable>
                    <variable id="ibo-fieldset--margin-top">18px</variable>
                    <variable id="ibo-dashlet--padding-top">16px</variable>
                    <variable id="ibo-dashlet--padding-right">12px</variable>
                    <variable id="ibo-dashlet--padding-bottom">8px</variable>
                    <variable id="ibo-dashlet--padding-left">12px</variable>
                    <variable id="ibo-dashlet-badge--padding-y">4px</variable>
                    <variable id="ibo-dashlet-badge--padding-x">4px</variable>
                    <variable id="ibo-datatables-panel--padding-top">24px</variable>
                    <variable id="ibo-datatables-panel--padding-right">12px</variable>
                    <variable id="ibo-datatables-panel--padding-bottom">12px</variable>
                    <variable id="ibo-datatables-panel--padding-left">12px</variable>
                </variables>

For example ibo-fieldset–border-style can take different values

dashed
dotted
none
…

Sidebar