Overview

The main reason why CustUp was made is so that it can be fully customized and adapted to any project design quickly and by just changing or adding to the CSS classes.

All the css class names of the all the elements of CustUp is exposed with the default_styles_override option.

CustUp is structured into header, left container, right container, inner container and footer container.

The section with blue background is the header section, the section with green background is the right sidebar section, the section with red background is the footer section, the section with yellow background is the right sidebar section and the section at the center with white background color is the inner container.

Of course the example above is a working implementation of CustUp you can drop files in it to see it in action.

The example above can be achieved as follows

const instance1 = new CustUp({
  default_styles_override: {
    // outerContainer: ['custup_outer_contaner', true], // added to control the width and to center CustUp
    innerContainer: ['inner_container_el', true], // appends new class name to the inner container element
    headerContainer: 'header_cont', // overrides all the element's class names
    footerContainer: 'footer_container',
    sidebarLeftContainer: 'side_bar_left',
    sidebarRightContainer: 'side_bar_right',
    custupInnerContainerWrapperEl: ['inner_container_wrapper', true], // a must add to  set the height of the inner container like `height: calc(100% - 100px)`
    // defaultUI: '', // this was added to hide the default UI
  }
})

and the provided CSS class names style

random-css-file.css

<style>
  .inner_container_el {
    width: calc(100% - 120px) !important;
    border-radius: 0px !important;
  }
  .header_cont {
      width: 100%;
      height: 50px !important;
      background-color: blue;
  }
  .footer_container {
      width: 100%;
      height: 50px !important;
      background-color: red;
  }
  .side_bar_left {
      width: 60px !important;
      background-color: yellow !important;
      height: 100% !important;
  }
  .side_bar_right {
      width: 60px !important;
      background-color: green !important;
      height: 100% !important;
  }
  .inner_container_wrapper {
    height: calc(100% - 100px) !important;
  }
</style>

This gives room for full customisation of the library to fit into your project.

Styles division

The styles are currently divided into 3 aspect of the UI

• Styles for the Main UI elements
• Styles for External file sources UI elements and
• Styles for the Media file sources UI elements

Setting the options

To add new class name to an element's current list of class names set the element's class name to an array which contains the new class name(s) in a string and a boolean of either true or false, true indicates that the provided class name should be added to the list of the element's class name and false indicates that the provided class name should override the element's class name(s), or simply provide the new class name in a string

Style override examples

To add a class name to an element's list of class names

const instance1 = new CustUp({
  default_styles_override: {
    defaultUI: ['new_class_name_for_the_default_ui_container', true]
  }
})

To override the class names of an element

const instance1 = new CustUp({
  default_styles_override: {
    defaultUI: ['new_class_name_for_the_default_ui_container', false]
  }
})

Or use a string

const instance1 = new CustUp({
  default_styles_override: {
    defaultUI: "new_class_name_for_the_default_ui_container"
  }
})

The above is the recommended way to override an element's class name