Skip to main content
MediaBeacon University

Using Built-In Classes for HTML Upload Component Formatting

Version: 2018.x, 2019.x, 20.0

Issue

When the HTML Component is customized, it loses it's preformatted styling. This article shows several methods to use built-in elements and classes to present a well-styled component.

 

html-upload-custom-orig.png

 

See also Bootstrap Classes For HTML Formatting.

 

Resolution

The below code is added to the Configuration Panel of the HTML Upload Component's Configuration Dialog. This is done in Advanced HTML Entry Mode, entered by clicking the "<>" button. Note that the "Display contents in iFrame" option should be DISABLED, this checkbox is located under the editor field.

html-edit-wysiwyg.png

html-edit-advanced.png

Style 1

html-upload-style1.png

<div class="list-group list-group-sm">
<div class="list-group-item list-group-item-action d-flex align-items-center">
<div class="d-flex align-items-center mr-3 square-40 rounded bg-gray-100"><span class="material-icon icon-font-size-lg mx-auto text-primary">videocam</span></div>
<div class="media-body">
<div class="h6 font-size-sm m-0 font-weight-500">Upload Video</div>
<div class="small text-secondary">Section 3 video only</div>
</div></div></div>

Additionally, add the following settings to the View Preferences section of the component:

  • ENABLE "Hide Component Title"

Style 2

html-upload-style2-1.png

<div class="list-group list-group-sm">
<div class="list-group-item list-group-item-action align-items-center">
<div class="text-center d-flex-auto square-80 align-items-center rounded bg-gray-100"><span class="display-1 material-icon mx-auto text-success">cloud_upload</span></div>
<div class="pt-md-2 media-body text-center">
<div class="h6 font-size-sm m-0 font-weight-500">Upload Layouts</div>
<div class="small text-secondary">InDesign Files Only</div>
</div></div></div> 

Additionally, add the following settings to the View Preferences section of the component:

  • Custom CSS Classes: "mw-50 align-self-center
  • ENABLE "Hide Component Title"

viewpref-style2.png

  • Was this article helpful?