Customize Server-Manager Appearance

(Prompted by this forum thread: http://forums.contribs.org/index.php?topic=49402.0;topicseen)

The appearance of server-manager can be tweaked by customizing the css in /etc/e-smith/web/common/css. Since the css files are templated, customize as you would any other templated config file on SME (See the Template_Tutorial for more information).

Examples

Examples of how to make specific customizations are shown below.

User List Formatting

The list of user accounts on the 'Users' tab in server-manager is displayed in a table with 'class="sme-border"'. This makes it possible to customize the appearance of the list by customizing the css for this class.

You can add highlighting to every 4th entry in the list of SME Users with this code:

mkdir -p /etc/e-smith/templates-custom/etc/e-smith/web/common/css/sme_main.css
cd /etc/e-smith/templates-custom/etc/e-smith/web/common/css/sme_main.css
echo '{
    $OUT = <<'EOF';

table.sme-border > tbody tr:nth-child(4n+1) {
    background-color: #DDF8F8;
}

EOF
}
' > 51body-trhighlights
expand-template /etc/e-smith/web/common/css/sme_main.css

This code will:

1. Create a custom template fragment in /etc/e-smith/templates-custom/etc/e-smith/web/common/css/sme_main.css named "51body-trhighlights" that sets a custom background-color for some rows of any "sme-border" table in /server-manager (users, ibays, pseudonyms, hosts, etc) using the css "nth-child" selector.
2. expand the resulting css file /etc/e-smith/web/common/css/sme_main.css

Notes:

• In Safari, <Shift><click-on-reload> loaded the new style setting. In Firefox (on a mac), the new style settings did not load until I cleared my firefox cache.
• Set the color you want for alternating rows; I've used "DDF8F8" (a light blue background)
• This code will set a background on every 4th row using "(4n+1)". You could highlight every other row using "(even)", or every 3rd row using "(3n+1)".

IMPORTANT:

• Internet Explorer 8 (and earlier) do not support the css "nth-child" selector, so this example will not affect the appearance of server-manager when viewed using these browsers.

---