Core/Entity Classes
Application and entity specific classes.
Core and entity classes provide targeted styling capabilities for the Ubidots application, allowing you to apply CSS customizations either globally across the entire platform or specifically to individual entities. These classes are essential for creating consistent theming and entity-specific customizations without affecting other parts of the application.
Why Core/Entity Classes Matter
Global Consistency: The core-view__container class enables platform-wide styling changes that affect every view in the application, ensuring visual consistency across all entities.
Entity Isolation: Entity-specific classes like devices-view__container allow you to customize individual views without impacting other parts of the application, providing precise control over each entity's appearance.
Scalable Customization: This system supports both broad theming changes and granular entity customizations, making it easy to maintain brand consistency while accommodating specific functional requirements.
Core & Entity Specific Classes
Applied to every view container across the entire Ubidots application.
core-view__containerUse cases:
Platform-wide color schemes.
Global typography settings.
Universal spacing and layout adjustments.

Example
.core-view__container {
font-family: 'Custom Brand Font', sans-serif;
background-color: var(--global-background);
min-height: 100vh;
}Applied to every entity container that's exposed in the Ubidots application. It follows the syntax:
<entity>-view__containerUse cases:
Entity-specific color coding.
Custom layouts for each entity.
Entity-specific spacing and typography.

Available entity classes are:
Devices
devices-view__container
Device groups
device_groups-view__container
Dashboards
dashboards-view__container
Events
events-view__container
Event's logs
events_logs-view__container
Reports
reports-view__container
Users
users-view__container
Organizations
organizations-view__container
Example
.devices-view__container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.devices-view__container .ds-table {
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}Entity banner classes
For the time being, only the Device entity is supported. More module will be available soon.
These classes are applied to the Entity table views that are exposed in the Ubidots application (except Dashboards). It allows inserting an image banner or linear gradient in the entity table.

It follows the syntax:
<entity>-table__layout<entity>-table__contentThe layout class isn't need it for anything else than holding 2 additional classes for the 2 banner options. The banner clases are:
<entity>-table__banner<entity>-table__banner-gradient
Each one should be used respectively for the type of banner to implement.
Example
This is the CSS that allows having an image banner in the Devices view:
:root {
/* Component-Specific Sizes */
--table-banner-height: 254px;
--table-content-offset: calc(var(--table-banner-height) / -2);
/* Images */
--devices-table-banner-image: url(https://d37r24zvv6zb85.cloudfront.net/production/media/ent_login_screen/68a00c069807fa008cab1a53_6a5018ea7f7944619c1fe0be36aee3f1.png);
}
/* Enable banner image in Device view */
.devices-table__content {
transform: translateY(var(--table-content-offset));
}
.devices-table__banner {
background-image: var(--devices-table-banner-image);
height: var(--table-banner-height);
}Rendered DOM
The output HTML, for example for the Devices view, including a banner, would be as follows. This is taken directly from the application:
<div id="root">
<div class="sc-cdmDIG lerfa">
<!--Sidebar -->
<aside class="sc-jjRXMV bkmJAK" data-open="false" data-testid="sidebar">
<!--Content of the sidebar -->
</aside>
<!--Main content -->
<main class="">
<!--Context bar -->
<section>
<div>
<h1>Devices</h1>
</div>
</section>
<div class="devices-table__layout">
<div>
<!--Banners -->
<div class="devices-table__banner" role="presentation"></div>
<div class="devices-table__banner-gradient" role="presentation"></div>
</div>
<!--Devices view content -->
<div class="devices-table__content">
<!--Content of the Devices view -->
</div>
</div>
</main>
</div>
</div>Last updated
Was this helpful?