# Application CSS

## Overview

With application CSS, you can target the following components with full coverage:

* Table
* Sidebar
* Navigation bar
* Accordion

{% hint style="info" %}

* We will continue to expand CSS selector coverage for smaller components.
  {% endhint %}

This is how a branded application looks with Ubidots' native CSS styling:

<figure><img src="/files/A0Ilga7Vh7gyaIue6aib" alt=""><figcaption></figcaption></figure>

With the CSS stylesheet below, the application can be changed to this:

<details>

<summary>Application CSS stylesheet</summary>

This example uses the application's branding colors through the `{{ colors.<colorKey> }}` [bookmark notation](/apps/styling-with-css.md#branding-colors) and [custom fonts](/apps/styling-with-css.md#custom-fonts).

```css
/* Ubidots-branded theme */

:root {
   /* Branding Colors */
   --color-icon-color: {{ colors.iconColor }};
   --color-navbar-color: {{ colors.navbarColor }};
   --color-variables-icon: {{ colors.variablesIcon }};
   --color-login-form-color: {{ colors.loginFormColor }};
   --color-sub-header-color: {{ colors.subHeaderColor }};
   --color-widget-background: {{ colors.widgetBackground }};
   --color-widget-title-color: {{ colors.widgetTitleColor }};
   --color-danger-button-color: {{ colors.dangerButtonColor }};
   --color-default-button-color: {{ colors.defaultButtonColor }};
   --color-main-table-item-color: {{ colors.mainTableItemColor }};
   --color-sub-header-text-color: {{ colors.subHeaderTextColor }};
   --color-dashboard-background: {{ colors.dashboardBackground }};
   --color-login-button-form-color: {{ colors.loginButtonFormColor }};
   --color-warning-modal-cover-color: {{ colors.warningModalCoverColor }};
   --color-variable-infobox-cover-color: {{ colors.variableInfoboxCoverColor }};
   --color-information-modal-cover-color: {{ colors.informationModalCoverColor }};
   --color-login-footer-foreground-color: {{ colors.loginFooterForegroundColor }};
   --color-data-source-infobox-cover-color: {{ colors.dataSourceInfoboxCoverColor }};
   --color-variable-infobox-derived-color: {{ colors.variableInfoboxDerivedColor }};

   /* Additional */
   --color-transparent: transparent;
   --color-surface-secondary: #f9f9f9;
   --color-empty: white;
   --ub-color-primary-050: #e8f7ee;

   /* Fonts */
   --font-family-primary: "Poppins", sans-serif;
   --font-weight-normal: 400;
   --font-weight-bold: bold;
   --font-size-small: 13px;

   /* Sizing & Spacing */
   --spacing-xs: 0.25rem;  /* 4px */
   --spacing-sm: 0.5rem;   /* 8px */
   --spacing-md: 1rem;     /* 16px */
   --spacing-lg: 2rem;     /* 32px */

   /* Component-Specific Sizes */
   --sidebar-width: 80px;
   --logo-width: 200px;
   --table-banner-height: 254px;
   --table-content-offset: calc(var(--table-banner-height) / -2);

   /* Borders & Radius */
   --border-radius-sm: 4px;
   --border-radius-md: 8px;

   /* Images */
   --devices-table-banner-image: url(https://d37r24zvv6zb85.cloudfront.net/production/media/ent_login_screen/68a00c069807fa008cab1a53_6a5018ea7f7944619c1fe0be36aee3f1.png);

   /* Box shadows */
   --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Global
============================================================================= */
/* Font */
*:not([role="icon"]) {
   font-family: var(--font-family-primary);
}

/* Padding table viewports */
.core-view__container .ds-table__viewport {
   padding: 0
}

/* ==========================================================================
   Table Component (ds-table)
============================================================================= */
/* Table main components separation */
.ds-table__viewport {
   background-color: var(--color-transparent);
}

.ds-table__toolbar {
   background-color: white;
   border-radius: var(--border-radius-md);
}

.ds-table__wrapper {
   margin-top: var(--spacing-md);
   background-color: white;
   border-radius: var(--border-radius-md);
}

.ds-table__controls {
   margin-top: var(--spacing-md);
   background-color: white;
   border-radius: var(--border-radius-md);
}

/* 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);
}

/* Alternating row colors */
.ds-table__body .ds-table__row:nth-child(odd) {
   background-color: rgb(from var(--color-sub-header-color) r g b / 0.1);
}

/* Hover and selected states */
.ds-table__body .ds-table__row:hover { 
   background: var(--color-surface-secondary);
}

.ds-table__row--selected {
  box-shadow: inset 4px 0 0 var(--color-sub-header-color);
}

/* ==========================================================================
   Sidebar Component (ds-sidebar, ds-accordion)
============================================================================= */
.ds-sidebar__item,
.ds-accordion__item {
   border-radius: var(--border-radius-sm);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   will-change: transform, box-shadow; /* Optional performance hint */
}

/* Hover effect */
.ds-sidebar__item:hover,
.ds-accordion__item:hover,
.ds-accordion__toggle:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-hover);
}

/* Item selection */
.ds-sidebar__item--active,
.ds-accordion__item--active {
   background-color: var(--color-sub-header-color);
   box-shadow: var(--shadow-hover);
   color: var(--color-empty);
}

/* Toggle icons */
.ds-sidebar__toggle--open i::before {
   content: "\e24e";
}

.ds-sidebar__toggle--closed i::before {
   content: "\f061";
}
```

</details>

<figure><img src="/files/cCnv2LWyogCDtT5X7c4H" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.ubidots.com/apps/styling-with-css/application-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.