View source for Customize Server-Manager Appearance

From SME Server

You do not have permission to edit this page, for the following reason:

The action you have requested is limited to users in the group: Users.

You can view and copy the source of this page.

(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:
 <nowiki>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
</nowiki>


This code will:
# 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 [http://www.w3schools.com/cssref/sel_nth-child.asp css "nth-child" selector].
# 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.

Return to Customize Server-Manager Appearance.

Retrieved from "https://wiki.koozali.org/Customize_Server-Manager_Appearance"

View source for Customize Server-Manager Appearance

Navigation menu

Page actions

Page actions

Personal tools

Koozali SME Server

Recent activities

Koozali resources

Koozali SME Server wiki

Tools

Search