Introduction

This page describes how Simone CSS can be customized.

Note: This page is likely to be extended in the future, to reflect real world changes that people are making to Simone CSS. If you created a custom theme for this plugin yourself, or you can't find styling tips you're looking for, please create an issue and describe your experience, so this page can become more thorough.

Base CSS

Simone can be customized using CSS. This page describes the key points in which customization can be made. A good base for creating new theme for this plugin is a custom theme made with jQuery UI ThemeRoller.

Important: it's highly recommended that you don't modify native Simone CSS, and instead place your modifications in separate files. This way, when new version is downloaded, your changes would not be overwritten.

Z-indexes

Default z-index for taskbars is 10000.

Default z-index for windows is 100.

Both can be changes freely, but when changing windows z-index, remember to change taskbar's windowsInitialZIndex option to reflect new value. It's recommended to do it using taskbarSetup method before initializing any taskbars, so new setting is shared by all future instances of taskbar widget.

Z-indexes of .simone-taskbar-droppable, .simone-taskbar-button-tooltip.ui-tooltip, .simone-taskbar-with-opened-elements, .simone-taskbar-resizing should be changed to be 1 higher than those of taskbars.

Taskbar

.simone-taskbar-resizing is applied to resizable mask when taskbar is resizing.

.simone-taskbar-dragging is applied to taskbar draggable helper is being dragged.

.simone-taskbar-droppable is a class applied to droppable containers, and opacity and/or background color could be set for it.

Window

.simone-taskbar-window-minimize-all-hover, .simone-taskbar-window-minimize-all-unhover are classes that are applied to all windows when taskbar's minimizeAll button is hovered and minimizeAllHoverOpaqueWindows is set to true.

.simone-window-overlay.ui-widget-overlay opacity and/or background color can be modified for windows that has embeddedContent set to true, or for which confirmClose is in progress.