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;
}

Move Menu To The Right

#main-container,
.sky-toolbar-container {
flex-direction: row-reverse;
}

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.

Shorten Input Parameter Fields

Sometimes when you have long units in SKYPARAM.generateInputParameter they might overflow the current UI or even go to a second row by default. You can adjust the width of the field of an input parameter with the following (in percentage):

.sky-toolbar .parameter-input .parameter-input-field {
width: 72%;
}

Make Tabs With Long Names Higher

When having long names in SKYUI.Tab that can be split in two rows, it might look tight in height. You can adjust the margin (or padding) by setting the pixels needed of the tab with the following:

.sky-step-bar > ul > li > a {
padding: 15px 0px
}

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!