In addition to the option of easily changing app colors with a color picker, the Theme Builder Module also offers the ability to overwrite default CSS/LESS and modify views directly from the administrator panel, enabling further customization of your network’s user interface.

Here are a few examples of how to customize the appearance of tables within your network.

Table Header

Change the default table header row font and background color.

/* ------------------------------------------------ */
/* Customise Table Header Font and Background Color */
/* ------------------------------------------------ */
.markdown-render table th,
[data-ui-markdown] table th,
[data-ui-richtext] table th p {

    // Set custom table header background color //
    background-color: #555555 !important;

    // Set custom table header font color //
    color: #000000 !important;
}

Table Row

Highlight every second row in your tables for easier navigation.

/* ----------------------------------------- */
/* Set background color for every second row */
/* ----------------------------------------- */
.markdown-render table tr:nth-child(2n+3) td,
[data-ui-markdown] table tr:nth-child(2n+3) td,
[data-ui-richtext] table tr:nth-child(2n+3) td {

    // Set custom background color //
    background-color: #f5f5f5;
}

Login Logo

Set a custom width and bottom margin for the logo on the login page.

/* --------------------------------- */
/* Resize the logo on the login page */
/* --------------------------------- */
.login-container #img-logo {

    // Set a maximum width for the logo //
    max-width: 275px;

    // Set a bottom margin for the logo //
    margin-bottom: 20px;
}

Modal Backdrop

Make the modal backdrop darker and blur the background content for better focus.

/* --------------------------------- */
/* Blurred and darker modal backdrop */
/* --------------------------------- */
#globalModalConfirm.modal,
.modal,
#globalModal.modal {

    // Set a backdrop color and opacity //
    background-color: rgba(0, 0, 0, 0.75);

    // Set the amount of blur effect for Safari //
    -webkit-backdrop-filter: blur(5px);

    // Set the amount of blur effect //
    backdrop-filter: blur(5px);
}

NOTE
Copy code snippets and paste them into the Theme Builder's Stylesheet tab. Remember to save your changes so that the CSS can be recompiled. Sometimes changes may not take effect immediately, so try re-saving to ensure the CSS is updated.

For more examples and information on how to customize your theme, visit HumHub Community.