You can adapt the visual assets from a Bootstrap admin theme to an MDriven Turnkey application when you want its colors, fonts, and selected styling while retaining Turnkey for application behavior.
Choose the right approach
A Bootstrap theme is a collection of presentation assets: typically CSS, fonts, images, JavaScript, and example HTML. Turnkey already provides the application structure and behavior. Apply the parts of a Bootstrap theme that control appearance; do not expect the template's example pages, widgets, or navigation to become Turnkey functionality.
Use the following approach for the change you need:
| Goal | Recommended approach | Example |
|---|---|---|
| Change brand colors, font size, spacing, or component colors | Use Turnkey CSS custom properties or a Turnkey theme override. | Change the primary color and navigation-bar color without replacing the application layout. |
| Make data communicate a state | Define and apply a model-maintained style. | Display a green label when a value is good and a red label when it requires attention. |
| Reuse colors, fonts, icons, or selected CSS from a Bootstrap admin theme | Extract the required assets, test them locally, and adapt them as Turnkey styling. | Use an admin theme's font and color rules while Turnkey continues to render lists and edit views. |
For supported Turnkey theming methods, deployment locations, and the available CSS variables, use Documentation:MDriven Turnkey theming. For the distinction between overall theming and data-driven styling, see HowTos:Styling and Theming Your Application.
Before you start
- Start with a working Turnkey application. See Starting with MDriven Turnkey if you need the basic setup.
- Obtain a Bootstrap theme whose use is permitted for your application.
- Prefer an admin dashboard or application-oriented theme when your goal is to influence forms, navigation, tables, and application pages. A marketing or front-end website theme may not contain the styling you need.
- Keep the downloaded theme separate from your Turnkey assets. Treat it as a source from which you select and adapt files.
- Identify whether the theme loads CSS, fonts, icons, images, JavaScript plugins, or remote resources. A CSS file that refers to a font or image also requires that referenced asset to be available at the expected path.
Apply the theme in a controlled way
1. Inspect the theme outside Turnkey
Open the downloaded theme's applicable example locally and inspect the page source.
- Identify the CSS files that establish its colors, typography, and component styling.
- Identify referenced assets such as fonts, icon libraries, images, and JavaScript plugins.
- Record dependencies before copying files. For example, if the CSS refers to a font file, copying only the CSS will leave the browser unable to load that font.
- If the theme has multiple implementations, select the implementation whose assets you intend to reuse. The example HTML is a visual reference; it is not a replacement for Turnkey-generated pages.
2. Start with Turnkey's theme mechanism
First make the closest possible change through Turnkey theming. This keeps the change aligned with the Turnkey style system and reduces the amount of third-party CSS you need to maintain.
For example, use CSS custom properties when the desired result is a color or size change. A tkusercss.css file in the model's Content folder can contain values such as:
:root {
--primary-color: 245, 156, 26;
--navbar-bg-color: 40, 40, 40;
--base-font-size: 16px;
}
Color custom-property values use RGB components. In the example, 245, 156, 26 is the value for the primary color. Use the documented property list and placement instructions in Documentation:MDriven Turnkey theming.
3. Extract only the Bootstrap assets you need
When custom properties and the Turnkey theme are not enough, copy only the external theme assets needed for the intended visual result into your local Turnkey asset replica.
- Begin with one change, such as a font, an icon set, or a limited set of color rules.
- Preserve the relative paths required by CSS references to fonts and images.
- Add assets incrementally and refresh the local application after each change.
- Check the browser for missing resources and errors. A missing font, icon library, CSS file, or plugin prevents the theme from rendering as intended.
- Update any resource URLs that are not suitable for your deployment. In particular, do not leave an insecure HTTP resource reference on an HTTPS site.
Do not copy an entire template indiscriminately. Large templates can include several framework variants, duplicate assets, demonstration pages, and plugins that Turnkey does not use.
4. Test with real Turnkey pages
Test the styling against the pages your users will use, not only against the original theme's sample pages.
Check at least:
- Navigation bar, sidebar, and links.
- Lists and data tables.
- View and edit forms.
- Primary actions and contextual states such as danger, warning, and success.
- Text contrast on colored backgrounds.
- Icons, fonts, and images referenced by the added CSS.
A Bootstrap theme may style HTML patterns that are absent from a Turnkey page, while a Turnkey page may use styles that the template does not cover. Adjust your override based on the actual result.
5. Deploy the resulting theme assets
After local testing, deploy the resulting Turnkey theme CSS and required assets with the model. Documentation:MDriven Turnkey theming documents the supported locations for theme-user.css, including the corresponding AssetsTK paths, and explains how to restore the default theme.
Upload the model with MDriven Designer, then refresh the application and repeat the resource-error check on the deployed site.
Common problems
| Symptom | Likely cause | What to check |
|---|---|---|
| The application looks unchanged | The override CSS is not in the recognized Turnkey location, or the model has not been uploaded. | Verify the file placement and deployment steps in Documentation:MDriven Turnkey theming. |
| Fonts, icons, or background images are missing | CSS references assets that were not copied or whose relative paths changed. | Inspect the CSS URLs and deploy the referenced files at matching paths. |
| Browser reports insecure resources | A stylesheet, font, or other resource is loaded over HTTP from an HTTPS application. | Change the resource reference to a suitable HTTPS location or deploy the resource with the application. |
| Theme sample widgets do not work in Turnkey | The sample is demonstration HTML and may depend on JavaScript plugins or data that Turnkey does not use. | Reuse the styling assets you need; build application behavior through Turnkey rather than copying sample pages. |
| A future update removes local changes | Edited source styling files can be overwritten when the Turnkey core is updated. | Keep your edited SCSS source and extracted assets under version control or in a safe copy, as described in Documentation:MDriven Turnkey theming. |
Use model styles for data-driven emphasis
Overall theme styling is different from styling that represents data. For example, use a model-maintained style when a label must be green for a good state and red for a problem state. An OCL expression can select the style based on data:
self.ThingsAreSuperGreat->casetruefalse(selfVM.Styles.TheGreenStyle,selfVM.Styles.TheRedStyle)
This uses a style selected from the ViewModel rather than changing the site's global theme. See HowTos:Styling and Theming Your Application for this technique.