Two Section Widget
Admin: Web Office Admin
Page: Code Customization > Custom Widgets
URL: {client_ID}.admin.directscale.com/#/Widgets
This widget contains:
- A header or top section with a white background where the widget title generally goes.
- A body or main section where most of the content goes.
<div class="card minheight">
<div class="card-header">
<h2 class="card-title c-darkgray">@String("Widget Title Goes Here")</h2>
</div>
<div class="card-body">
[Widget Content Goes Here]
</div>
</div>
System CSS
These CSS classes are a variation of standard Bootstrap styles were in the HTML snippet for this widget:
.minheight
– Applies a minimum height of 100 pixels for the widget..c-darkgray
– Used to modify.card-title
default white text color to a dark gray (#5e5e5e
).
Along with Bootstrap Cards classes.
.card
– Creates the standard white background of the widget along with the default padding, shadowing, border-radius, etc. This is an easy way to make sure your custom widgets look like the other widgets without recreating the look and feel..card-header
– Adds the standard padding and positioning for the header (top portion of the widget)..card-title
– Applies the standard header text size (22), alignment (center), and color (white)..card-body
– Applies standard padding for the middle/body of the widget.
Updated about 3 years ago