Skip to main content

CSS

In DynaMaker it is possible to customize the appearance of the UI of the app by overwriting its Cascading Style Sheets (or CSS), which is a stylesheet language used to describe the presentation of a document written in HTML or XML. This is done in the tab STYLE of the UI.

Remember that any default behavior built in the DynaMaker UI will be overwritten by your code.
You can read more about CSS in https://developer.mozilla.org/en-US/docs/Web/CSS

Here we present some of the most common examples that can be useful for your application:


Hide UI

Typically when using plugins in DynaMaker (like Elfsquad), the data of the configuration is already handled by the plugin. Therefore, there might be no need to add tabs with buttons in the configurator. Simply hide them with the following:

.sky-toolbar-container {
display: none;
}

Hide Tabs

Useful when you have eveything (buttons, configurators, etc) in one tab, you might one to hide the only existing tab since it adds no value to the app or UX. You can hide the tabs column with:

.sky-step-bar {
display: none;
}

Change UI Font

If you would like to change the default font of the UI for your own, you can do try the following example:

body {
font-family: 'Times New Roman', Times, serif;
}

You can find all the fonts available in CSS here.


Would you like to contribute with other CSS snippets or request new ones? Reach us at support@dynamaker.com and help the community to code faster!