MDriven Turnkey theming
Line 55: Line 55:
==== MDriven dark theme ====
==== MDriven dark theme ====
[[File:Mdriven dark theme.png|none|thumb|649x649px]]
[[File:Mdriven dark theme.png|none|thumb|649x649px]]
[[File:Mdriven-dark-theme-preview-2.png|none|thumb|651x651px]]Download here: [[File:MDriven Dark theme.zip|none|thumb|MDriven dark theme]]
[[File:Mdriven-dark-theme-preview-2.png|none|thumb|651x651px]]'''Download:''' [[File:MDriven Dark theme.zip|none|thumb|MDriven dark theme]]


==== Vivid blue theme ====
==== Vivid blue theme ====
[[File:Vivid blue theme preview.png|thumb|651x651px|none]]
[[File:Vivid blue theme preview.png|thumb|651x651px|none]]
[[File:Vivid blue theme preview 2.png|thumb|651x651px|none]]
[[File:Vivid blue theme preview 2.png|thumb|651x651px|none]]'''Download:'''[[File:Vivid blue theme.zip|alt=Vivid blue theme for MDriven Turnkey|thumb|Vivid blue theme|none]]
[[File:Vivid blue theme.zip|alt=Vivid blue theme for MDriven Turnkey|thumb|Vivid blue theme|none]]


==== Lime green theme ====
==== Lime green theme ====
[[File:Lime green theme preview.png|none|thumb|653x653px]]
[[File:Lime green theme preview.png|none|thumb|653x653px]]
[[File:Lime green theme preview 2.png|none|thumb|655x655px]]
[[File:Lime green theme preview 2.png|none|thumb|655x655px]]'''Download:'''[[File:Lime green theme.zip|alt=Lime green theme|none|thumb|Lime green theme]]
[[File:Lime green theme.zip|alt=Lime green theme|none|thumb|Lime green theme]]


==== Dark blue theme ====
==== Dark blue theme ====
[[File:Dark blue theme preview.png|alt=Dark blue theme preview|none|thumb|663x663px]]
[[File:Dark blue theme preview.png|alt=Dark blue theme preview|none|thumb|663x663px]]
[[File:Dark blue theme preview 2.png|alt=Dark blue theme preview 2|none|thumb|665x665px]]
[[File:Dark blue theme preview 2.png|alt=Dark blue theme preview 2|none|thumb|665x665px]]'''Download:'''[[File:Dark blue theme.zip|none|thumb]]
[[File:Dark blue theme.zip|none|thumb]]

Revision as of 17:09, 9 May 2020

MDriven Turnkey's theming process allows you to create your own theme for the Turnkey application. You can change your brand primary color, font-sizes, contextual colors, navbar colors, etc. 

MDriven Turnkey application uses SCSS to greatly simplify the source code for styling an application since it introduces variables and other logic that is missing from standard CSS. This was the reason for us shifting to SCSS format on the source code for styling a Turnkey web app based on Material Design guidelines.

SCSS (Sass) is a text format that compiles into CSS.

How does this differ from "tkusercss"?

As we have described before you may add your own styles to "Content/tkusercss.css" - this article describes how you create the theme in a consistent SCSS supported way that builds the very fabric of every aspect of the Turnkey app.

Where to start?

Use the prototype run - LocalTurnkeyPrototyper option to get your application running locally. You can choose any free port.

LocalTurnkeyPrototyper.jpg
Started Local Turnkey Prototyper.jpg

By doing this you have access the original SCSS files that control all the styling of the Turnkey web app. They are located in "application-root/Content/scss".

SCSS in Turnkey Local Core.png

You can use the Visual Studio Code editor to get context-sensitive help in updating the SCSS files to your liking.

2019-06-16 10h16 53.png

You can install the liveSassCompile plugin that can track your changes and turn the updated theme source code (SCSS) into CSS that the webserver actually uses.

2019-06-16 10h33 40.png

By refreshing your local prototyping app you'll get instant feedback on what the theme style change looks like.

VS Code and Turnkey Core.jpg

When you save a changed SCSS as it is being watched by the sass compiler, it will compile into a new CSS theme file "theme-user.css". This new CSS is found here "application-root/Content/scss/theme-user.css".

Compiled theme file.png

The Turnkey application will recognise that there now is a "application-root/Content/scss/theme-user.css" and will use that instead of the default "application-root/Content/theme-default.css" .

When you refresh your page you will see that your modified theme is applied:

x

There are many possible changes that you may want to experiment with:

  • Primary color;
  • Contextual colours (danger, warning, success and info);
  • Navigation bar color;
  • Button's colours;
  • Action's color;
  • Font-size;
  • Sizes of buttons and input components.

You may want to copy the updated SCSS repository and keep it safe - it will be overwritten with default styles the next time you get the latest version of turnkey core. The edited SCSS is your source code for your styles - even if the css is enough it will be easier for you making changes in the SCSS files. There is no way to go back from a css you have to the original SCSS that created it.

2019-06-16 10h51 36.png

Deploying the new resulting css to the server

Now that we have managed to change the local site we want to apply the same changes to a server side site in azure. This is done by simply copying the resulting "Content/scss/theme-user.css" to your AssetsTK folder for the model - add the same folder levels so that you get "xxxx_AssetsTK/Content/scss/theme-user.css" or "xxxx_AssetsTK/Content/theme-user.css".

Upload your model to the server.

Check file upload.jpg

How do I get the standard back?

To get the standard back you only need to delete the "application-root/Content/scss/theme-user.css" or "application-root/Content/theme-user.css" from the server. To delete files uploaded with AssetsTK refer to here.

Do you want the web page to reload automatically while changing styles?

Read here on how to make your turnkey reload automatically on script change or style change.

Turnkey themes

We made for you couple of precompiled themes for your MDriven Turnkey application. To apply the following themes download zip archive below and extract it. You will receive "theme-user.css" file which you should put into "Content" folder in the AssetsTK, then upload your model with MDriven Designer.

MDriven dark theme

Mdriven dark theme.png
Mdriven-dark-theme-preview-2.png

Download: File:MDriven Dark theme.zip

Vivid blue theme

Vivid blue theme preview.png
Vivid blue theme preview 2.png

Download:File:Vivid blue theme.zip

Lime green theme

Lime green theme preview.png
Lime green theme preview 2.png

Download:File:Lime green theme.zip

Dark blue theme

Dark blue theme preview
Dark blue theme preview 2

Download:File:Dark blue theme.zip

This page was edited 2 days ago on 03/26/2024. What links here