You can use tkusercss.css to add application-wide CSS overrides and CSS custom-property values to a MDriven Turnkey application; this is for developers who need to adjust styling without replacing the complete Turnkey theme.

What tkusercss.css does

tkusercss.css is a custom stylesheet that Turnkey merges into the application. Put rules in this file when you want to:

• Apply a style across the application.
• Define values for Turnkey CSS custom properties, also called CSS variables.
• Add styles that match a style name assigned in a ViewModel column's style attribute.
• Override a standard CSS rule when a focused CSS override is sufficient.
• Load a rule early enough to avoid [Flash of unstyled content (FOUC)].

For example, this rule changes the background of the page for the whole application:

body {
  background: yellow;
}

Use application-wide rules carefully. A broadly targeted selector can affect every ViewModel.

Create the stylesheet

Create it from TK Live View

Use TK Live View to create the file in the model's AssetsTK structure.

1. Open TK Live View for the running model.
2. Expand AssetsTK Synk. If the AssetsTK folder does not exist, expanding this section creates it.
3. Select Ensure Content/tkuserCss.css.
4. Open the created file and add your CSS.
5. Save the file and use the AssetsTK synchronization workflow to make the asset available to the running application.

The file name used by Turnkey is tkusercss.css, located under Content. Keep that name when creating or maintaining the file outside TK Live View.

Create it in the application content folder

For a local Turnkey application, create this file:

application-root/Content/tkusercss.css

Add CSS rules to the file, save it, and refresh the application page to check the result.

Set Turnkey CSS custom properties

Turnkey supports CSS custom properties for common theme settings. Declare your values under the CSS :root selector, which matches the document root and makes the properties available to the stylesheet.

:root {
  --base-font-size: 16px;
  --base-bg-color: rgb(245, 245, 245);
  --base-border-radius: 4px;
  --navbar-height: 56px;
  --navbar-bg-color: rgb(30, 30, 30);
  --primary-color: rgb(0, 102, 204);
  --primary-color-dark: rgb(0, 76, 153);
  --text-on-primary: rgb(255, 255, 255);
}

Examples of available property groups include:

Purpose	Example properties
Base appearance	--base-font-size, --base-bg-color, --base-border-radius
Navigation bar	--navbar-height, --navbar-bg-color, --navbar-brand-color, --navbar-link-color
Primary action color	--primary-color, --primary-color-dark, --text-on-primary
Contextual colors	--danger-color, --warning-color, --success-color and their corresponding -dark and text-on- properties

Use pixel values for properties described as pixels and rgb(...) values for properties described as RGB format. For a complete theming approach and the current variable-oriented tooling, see Documentation:MDriven Turnkey theming.

Target styles safely

Before writing a selector, inspect the Turnkey HTML structure and existing selector names described in Layout and CSS. This helps you target the intended element instead of changing unrelated controls.

Turnkey adds a CSS class named after the active ViewModel high in the HTML hierarchy. You can use that class to constrain a rule to one ViewModel. For a ViewModel named WorkBoard:

.WorkBoard #sidebar {
  visibility: hidden;
}

This hides the sidebar only while WorkBoard is active. It does not hide the sidebar in other views.

You can also assign a style name in a ViewModel column's style attribute and define the matching CSS rule in tkusercss.css. Keep selector names clear and scoped so that future ViewModels do not accidentally match them.

If a change belongs to one ViewModel rather than the whole application, create ViewModel-specific CSS through TK Live View instead. In AssetsTK Synk, select Ensure ViewAssets/<NameOfViewModel> (css.js). This produces CSS and JavaScript asset files for the selected ViewModel. Use this approach, for example, when a label treatment is needed only in one view.

Choose the right styling mechanism

Need	Use	Example
A small application-wide override or CSS variable value	Content/tkusercss.css	Set --primary-color or add a shared rule for a control style.
A rule for one ViewModel	ViewModel CSS in ViewAssets	Change label styling in WorkBoard without affecting other views.
A consistent replacement or broad reshaping of the standard theme	Turnkey theming with SCSS	Change theme colors, component sizes, and other theme-level styling together.
Themes selected or changed at runtime from model data	Theme as data	Let the application select between stored CSS theme data.

For a large change to the standard look, prefer the SCSS strategy in Documentation:MDriven Turnkey theming. Turnkey can use Content/scss/theme-user.css instead of the default Content/theme-default.css. Keep edited SCSS source under your own control: Turnkey core updates can overwrite the default SCSS repository, and CSS cannot be converted back to the original SCSS source.

Deploy with AssetsTK

To deploy tkusercss.css with a model, place it in the AssetsTK folder using the same relative path that it needs in the application:

<model-name>_AssetsTK/Content/tkusercss.css

Upload the model with MDriven Designer. MDrivenServer extracts and mirrors AssetsTK content into the application content structure. This allows the stylesheet to travel with the model rather than requiring a separate manual server copy.

Use the same folder structure for dependent files that your CSS refers to. For example, if a stylesheet references files under Content/assets, include those assets at the corresponding path in AssetsTK. Missing referenced files produce browser load errors and the intended styling may not be applied.

Avoid flash of unstyled content

FOUC occurs when a page is shown before its intended styling is available. If a rule is defined too late in a page or loaded after the content becomes visible, move that rule into tkusercss.css so that Turnkey loads it as part of the application stylesheet handling.

After changing the stylesheet:

1. Save the file.
2. Refresh the browser page.
3. If the appearance is not as expected, inspect the page in the browser developer tools to confirm the selector matches and to identify a competing rule.
4. Check the browser console and network errors for missing CSS dependencies or assets.

Precedence with theme data

When you use Theme as data, a corresponding rule in tkusercss.css overrides the value supplied as theme data. Keep a value in only the mechanism that should control it; otherwise the file-based override can prevent the runtime theme from taking effect.

See also

• Documentation:MDriven Turnkey theming
• Documentation:TK Live View
• Documentation:Layout and CSS
• Documentation:Theme as data
• Documentation:MDriven Stylesheet
• Documentation:CSS BEM