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 regarding:

Tabs​

Hide Menu​

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 the whole menu with the following: 

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

Hide Tabs​

Useful when you have everything (buttons, configurators, etc) in one tab, you might want to hide the only existing tab since it adds no value to the app or its 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;
}

Make Tabs With Long Names Higher​

Long names in SKYUI.Tab that can be split into two rows might need more height to fit. You can adjust the margin (or padding) by setting the pixels needed for the tab with the following CSS:

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

Quickbar​

Adjust Height​

Useful when you have custom images instead of the predefined icons in your (quickbar items)[library-studio#quickbar-items]. The default height is set to 40 px but you can change that number with:

.sky-quick-bar-item-container img {
  max-height: 50px;
}

Adjust Number Of Items Per Row​

You can adjust the width of the quickbar so it fits a certain number of items. Depending on their size, or if they have icons or images, you might want to adjust the width so it fits however you consider:

.sky-quick-bar {
  width: 250px;
}

Mobile Layout​

This snippet changes the layout of the UI when the width of the screen is below 600 pixels to have the canvas/scene at the top of the screen and the toolbar below. Use it as is, or as a starting point for your responsive requirements.

@media only screen and (max-width: 600px) {
  #main-container {
    flex-direction: column;
  }

  #container-canvas {
    flex-grow: 1;
    height: 33%;
  }

  .sky-toolbar-container {
    flex-direction: column;
    flex-grow: 1;
    height: 67%;
    order: 1;
    width: 100%;
  }

  .sky-toolbar {
    width: 100%;
  }

  .sky-step-bar > ul {
    display: flex;
    overflow: unset;
  }

  .sky-step-bar > ul > li {
    z-index: unset;
  }

  .sky-quick-bar {
    width: unset;
  }
}

Change UI Font​

If you would like to change the default font of the UI for your own, you can 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%;
}

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!