jquery-ui_custom_css [NethServer Wiki]

In the server Manager we can provide some custom css to display a message and attract attention of the administrator

to display a highlighted message with an icon, this is an example from /usr/share/nethesis/NethServer/Template/BackupConfig/Backup.php

<?php

echo $view->header()->setAttribute('template', $T('backup_config_Header'));

echo "<div>".$T('current_backup_label').":</div>";
echo "<dl class='rlc_module'>";
echo "<dt>".$T('date_label')."</dt><dd>".$view->textLabel('date')."</dd>";
echo "<dt>".$T('size_label')."</dt><dd>".$view->textLabel('size')."</dd>";
echo "</dl>";

echo "<div id='bc_module_warning' class='ui-state-highlight'><span class='ui-icon ui-icon-info'></span>".$T('backup_config_label')."</div>";

echo $view->buttonList()
    ->insert($view->button('Execute', $view::BUTTON_SUBMIT))
    ->insert($view->button('Help', $view::BUTTON_HELP))
;


$view->includeCSS("
  #bc_module_warning {
     margin-bottom: 8px;
     padding: 8px;
  }

  #bc_module_warning .ui-icon {
     float: left;
     margin-right: 3px;
  }
");

In short the code to add

echo "<div id='bc_module_warning' class='ui-state-highlight'><span class='ui-icon ui-icon-info'></span>".$T('backup_config_label')."</div>";
...

$view->includeCSS("
  #bc_module_warning {
     margin-bottom: 8px;
     padding: 8px;
  }

  #bc_module_warning .ui-icon {
     float: left;
     margin-right: 3px;
  }
");

ui-state-highlight will display a yellow background box
ui-icon-info displays a specific icon

see https://api.jqueryui.com/theming/css-framework/

The following is a list of the class names used by jQuery UI. The classes are designed to create a visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. The class names are split between ui.core.css and ui.theme.css, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc) respectively. Layout Helpers

  .ui-helper-hidden: Hides content visually and from assistive technologies, such as screen readers.
  .ui-helper-hidden-accessible: Hides content visually, but leaves it available to assistive technologies.
  .ui-helper-reset: A basic style reset for DOM nodes. Resets padding, margins, text-decoration, list-style, etc.
  .ui-helper-clearfix: Applies float wrapping properties to parent elements.
  .ui-front: Applies z-index to manage the stacking of multiple widgets on the screen. See the page about stacking elements for more details.

Widget Containers

  .ui-widget: Class to be applied to the outer container of all widgets. Applies font-family and font size to widgets.
  .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons.
  .ui-widget-content: Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header).

Interaction States

  .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
  .ui-state-hover: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
  .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable focus" container styles to an element and its child text, links, and icons.
  .ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.

Interaction Cues

  .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
  .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
  .ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
  .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
  .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed.
  .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed.

Icons States and images

  .ui-icon: Base class to be applied to an icon element. Sets dimensions to a 16px square block, hides inner text, and sets background image to the "content" state sprite image. Note: ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color.

Icon types

After declaring a ui-icon class, you can follow up with a second class describing the type of icon. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e. ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name. Misc Visuals Corner Radius helpers

  .ui-corner-tl: Applies corner-radius to top left corner of element.
  .ui-corner-tr: Applies corner-radius to top right corner of element.
  .ui-corner-bl: Applies corner-radius to bottom left corner of element.
  .ui-corner-br: Applies corner-radius to bottom right corner of element.
  .ui-corner-top: Applies corner-radius to both top corners of element.
  .ui-corner-bottom: Applies corner-radius to both bottom corners of element.
  .ui-corner-right: Applies corner-radius to both right corners of element.
  .ui-corner-left: Applies corner-radius to both left corners of element.
  .ui-corner-all: Applies corner-radius to all 4 corners of element.

Overlay & Shadow

  .ui-widget-overlay: Applies 100% width & height dimensions to an overlay screen, along with background color/texture, and screen opacity.
  .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Sets box-shadow x & y offset, blur radius and color.

see https://api.jqueryui.com/theming/icons/

jQuery UI provides a number of icons that can be used by applying class names to elements. The class names generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}. For example, the following will display an icon of a thick arrow pointing north: 1

<span class="ui-icon ui-icon-arrowthick-1-n"></span>

The icons are also integrated into a number of jQuery UI's widgets, such as accordion, button, menu.

The following is a full list of the icons provided:

ui-icon-blank
ui-icon-caret-1-n
ui-icon-caret-1-ne
ui-icon-caret-1-e
ui-icon-caret-1-se
ui-icon-caret-1-s
ui-icon-caret-1-sw
ui-icon-caret-1-w
ui-icon-caret-1-nw
ui-icon-caret-2-n-s
ui-icon-caret-2-e-w
ui-icon-triangle-1-n
ui-icon-triangle-1-ne
ui-icon-triangle-1-e
ui-icon-triangle-1-se
ui-icon-triangle-1-s
ui-icon-triangle-1-sw
ui-icon-triangle-1-w
ui-icon-triangle-1-nw
ui-icon-triangle-2-n-s
ui-icon-triangle-2-e-w
ui-icon-arrow-1-n
ui-icon-arrow-1-ne
ui-icon-arrow-1-e
ui-icon-arrow-1-se
ui-icon-arrow-1-s
ui-icon-arrow-1-sw
ui-icon-arrow-1-w
ui-icon-arrow-1-nw
ui-icon-arrow-2-n-s
ui-icon-arrow-2-ne-sw
ui-icon-arrow-2-e-w
ui-icon-arrow-2-se-nw
ui-icon-arrowstop-1-n
ui-icon-arrowstop-1-e
ui-icon-arrowstop-1-s
ui-icon-arrowstop-1-w
ui-icon-arrowthick-1-n
ui-icon-arrowthick-1-ne
ui-icon-arrowthick-1-e
ui-icon-arrowthick-1-se
ui-icon-arrowthick-1-s
ui-icon-arrowthick-1-sw
ui-icon-arrowthick-1-w
ui-icon-arrowthick-1-nw
ui-icon-arrowthick-2-n-s
ui-icon-arrowthick-2-ne-sw
ui-icon-arrowthick-2-e-w
ui-icon-arrowthick-2-se-nw
ui-icon-arrowthickstop-1-n
ui-icon-arrowthickstop-1-e
ui-icon-arrowthickstop-1-s
ui-icon-arrowthickstop-1-w
ui-icon-arrowreturnthick-1-w
ui-icon-arrowreturnthick-1-n
ui-icon-arrowreturnthick-1-e
ui-icon-arrowreturnthick-1-s
ui-icon-arrowreturn-1-w
ui-icon-arrowreturn-1-n
ui-icon-arrowreturn-1-e
ui-icon-arrowreturn-1-s
ui-icon-arrowrefresh-1-w
ui-icon-arrowrefresh-1-n
ui-icon-arrowrefresh-1-e
ui-icon-arrowrefresh-1-s
ui-icon-arrow-4
ui-icon-arrow-4-diag
ui-icon-extlink
ui-icon-newwin
ui-icon-refresh
ui-icon-shuffle
ui-icon-transfer-e-w
ui-icon-transferthick-e-w
ui-icon-folder-collapsed
ui-icon-folder-open
ui-icon-document
ui-icon-document-b
ui-icon-note
ui-icon-mail-closed
ui-icon-mail-open
ui-icon-suitcase
ui-icon-comment
ui-icon-person
ui-icon-print
ui-icon-trash
ui-icon-locked
ui-icon-unlocked
ui-icon-bookmark
ui-icon-tag
ui-icon-home
ui-icon-flag
ui-icon-calculator
ui-icon-cart
ui-icon-pencil
ui-icon-clock
ui-icon-disk
ui-icon-calendar
ui-icon-zoomin
ui-icon-zoomout
ui-icon-search
ui-icon-wrench
ui-icon-gear
ui-icon-heart
ui-icon-star
ui-icon-link
ui-icon-cancel
ui-icon-plus
ui-icon-plusthick
ui-icon-minus
ui-icon-minusthick
ui-icon-close
ui-icon-closethick
ui-icon-key
ui-icon-lightbulb
ui-icon-scissors
ui-icon-clipboard
ui-icon-copy
ui-icon-contact
ui-icon-image
ui-icon-video
ui-icon-script
ui-icon-alert
ui-icon-info
ui-icon-notice
ui-icon-help
ui-icon-check
ui-icon-bullet
ui-icon-radio-off
ui-icon-radio-on
ui-icon-pin-w
ui-icon-pin-s
ui-icon-play
ui-icon-pause
ui-icon-seek-next
ui-icon-seek-prev
ui-icon-seek-end
ui-icon-seek-first
ui-icon-stop
ui-icon-eject
ui-icon-volume-off
ui-icon-volume-on
ui-icon-power
ui-icon-signal-diag
ui-icon-signal
ui-icon-battery-0
ui-icon-battery-1
ui-icon-battery-2
ui-icon-battery-3
ui-icon-circle-plus
ui-icon-circle-minus
ui-icon-circle-close
ui-icon-circle-triangle-e
ui-icon-circle-triangle-s
ui-icon-circle-triangle-w
ui-icon-circle-triangle-n
ui-icon-circle-arrow-e
ui-icon-circle-arrow-s
ui-icon-circle-arrow-w
ui-icon-circle-arrow-n
ui-icon-circle-zoomin
ui-icon-circle-zoomout
ui-icon-circle-check
ui-icon-circlesmall-plus
ui-icon-circlesmall-minus
ui-icon-circlesmall-close
ui-icon-squaresmall-plus
ui-icon-squaresmall-minus
ui-icon-squaresmall-close
ui-icon-grip-dotted-vertical
ui-icon-grip-dotted-horizontal
ui-icon-grip-solid-vertical
ui-icon-grip-solid-horizontal
ui-icon-gripsmall-diagonal-se
ui-icon-grip-diagonal-se

developer, nethgui

jquery-ui custom css

CSS Framework

Icons

NethServer Wiki