---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
title: "Change an element's look in the Style panel | DXPR"
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:39:23+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'What the Style and Hover style panels change, what Theme defaults means, how hover and opacity behave, and why the theme sometimes wins'
tags:
  - 'Style your elements'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: "Change an element's look in the Style panel"
      description: 'What the Style and Hover style panels change, what Theme defaults means, how hover and opacity behave, and why the theme sometimes wins'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:39:23+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
      articleSection: 'Style your elements'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
      description: 'What the Style and Hover style panels change, what Theme defaults means, how hover and opacity behave, and why the theme sometimes wins'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) # Change an element's look in the Style panel.

What the Style and Hover style panels change, what Theme defaults means, how hover and opacity behave, and why the theme sometimes wins

 Learn DXPR BuilderBuild pagesStyle your elements

   ## In this guide

 Related guides

- [Background](/hc/documentation/learn-dxpr-builder/element-settings/background)

Use the **Style** panel when one element on one page needs its own look: a coloured card, a faded logo, a button in campaign colours. You see each change on the page as you make it. For a look that every page should share, such as the colour of all buttons, change your theme instead. One edit there updates the whole site.

The video follows the first recipe below: it mutes a partner logo until the pointer reaches it.

  ## Before you start

- Open the page in DXPR Builder; pointing at an element shows its control bar with **More**. New to the builder? See [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page).
- **Save** in the dialog keeps a change in the editor. **Save** on the builder toolbar above your content stores the page and shows "Saved field".

Settings in the **Style** panel belong to one element. They are saved in that page's content, not in your theme. If your brand colour changes next year, every element you coloured by hand keeps the old colour until you edit it.

- **Reuse a look** by saving a styled element with **More** > **Save as template**, or by giving elements a shared class under **HTML classes**. See [user templates](/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) and [HTML ID and classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css).
- **Pick colours from the swatches** when your site shows them. They come from your theme's colour palette. A swatch copies the colour, so a later palette change does not update it.

## Recipe: fade logos until the pointer reaches them

A row of partner logos looks calmer when the logos are muted. This recipe dims one logo and brings it back on hover.

1. Hover an **Image** element that shows a logo, click **More**, then **Settings**.
2. Open the **Style** panel and drag **Opacity** to 0.5. The logo fades as you drag.
3. Open the **Hover style** panel below it and drag **Opacity** to 1.
4. Click **Save** in the dialog, then **Save** on the toolbar.
5. Open the view menu (the eye icon) on the builder toolbar, choose **Preview** and point at the logo. It switches to full strength and dims again when the pointer leaves.

Repeat the steps for each logo in the row.

## Recipe: a button in campaign colours

Your theme gives buttons a hover colour. A **Background** you set yourself also replaces that hover colour, so set both.

1. Hover the **Button** element, click **More**, then **Settings**.
2. In the **Style** panel, pick a **Background** and a **Font color**. Click a swatch, or type your colour code, such as #e4002b, in the colour field.
3. In the **Hover style** panel, pick a darker **Background**.
4. Click **Save** in the dialog, then **Save** on the toolbar.
5. Choose **Preview** in the view menu and point at the button. It turns the darker colour.

## What you see

While the dialog is open, the element shows each change. In **Preview**, the dimmed logo turns to full strength under the pointer, and the campaign button turns its darker colour. Both looks remain after a page reload, because **Save** on the toolbar stored them.

## What each control accepts

| Control | Range | Unit |
|---|---|---|
| **Font color**, **Border color**, **Background** | any colour, with transparency | colour |
| **Background image** | a picture from the media library, or a URL |  |
| **Background style**, **Background position**, **Border style** | a list that starts with **Theme defaults** |  |
| **Font size** | 0 to 100 | px |
| **Border radius** | 0 to 100 | px |
| **Opacity** | 0 to 1, in steps of 0.01 |  |
| **Drop shadow** | levels 0 to 5 |  |
| Box model **Margin** | -200 to 200 | **PX** or **%** |
| Box model **Padding** | 0 to 200 | **PX** or **%** |
| Box model **Border** | 0 to 50 | px |
| Box model width × height | 0 to 2000 | **PX** or **%** |

A typed value outside the range is cut to the nearest limit. The box model and its locks are explained on the [spacing](/hc/documentation/learn-dxpr-builder/element-settings/spacing) page.

## How the settings behave

### Theme defaults

An empty colour, a slider at 0, a list on **Theme defaults** and a box model side that shows "-" all mean the same thing. DXPR Builder writes nothing, and your theme decides. So **Opacity** 0 does not hide an element, and **Font size** 0 keeps the theme's size. To go back to the theme's look, click **Clear** in the colour picker, move the slider to 0 or choose **Theme defaults** again.

### Where the settings land

Each **Style** setting except **Drop shadow** is saved as an inline style on the element. Inline styles beat ordinary theme CSS. Two things still win over them: theme rules marked `!important`, and Bootstrap utility classes under **HTML classes**, which carry `!important` too.

On some elements the settings go on an inner part. On a **Button** they style the button itself, on an **Image** the picture, on a **Link** the link and on a **Map** the map frame.

### Every screen size

Style settings have no breakpoints. 64 px of padding is 64 px on a phone too. Percent values grow and shrink with the width of the page. For different values per screen size, use responsive classes, as shown on the [HTML ID and classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) page.

### Opacity fades everything inside

**Opacity** works on the whole element. It fades the box, the border, the text and every element inside it. For a see-through box behind solid text, leave **Opacity** at 0. Pick a **Background** colour with some transparency instead: the colour picker has its own opacity slider for that.

### Hover style

**Hover style** is a separate panel below **Style**. It has the same controls, its own box model included. Its values apply while the pointer is over the element. Unlike **Style** values, they are marked `!important` themselves, so they beat your **Style** values, the utility classes under **HTML classes** and most theme rules.

Only **Drop shadow** fades in, over 0.15 seconds. Other hover changes switch at once, unless your theme animates them. Bootstrap buttons fade colours over 0.15 seconds.

Phones and tablets have no pointer. Visitors there see a hover look only after a tap, so never put information in it that they need.

### Elements with their own settings

Some elements have their own setting for the same job. Their own setting wins, and the **Style** control does nothing.

| Element | Ignores in Style | Use instead |
|---|---|---|
| Circle counter | **Background**, **Font size**, width × height | **Background color** and **Dimension** in **General**, **Font size** in **Circle content** |
| Progress bar | **Background**, width × height | **Back color**, **Front color** and **Bar height** in **General** |
| Divider | **Background**, width | **Color** and **Length** in **General** |
| Number counter | **Font size** | **Font size** in **General** |
| Image | width × height | **Image width** and **Image height** in **General** |
| Map | width × height | **Map width** and **Map height** in **General** |
| Marquee | width × height | **Image width** and **Height** in **General** |
| Video, Local video | width | **Video width** in **General** |
| Positioned layers | width × height | **Width** and **Height** in **General** |

## If you don't see your change

- **The change vanished when the dialog closed.** You closed it with **Cancel**, the close icon or the Escape key, which put back the old settings. Make the change again and click **Save** in the dialog.
- **The change is gone after a page reload.** **Save** in the dialog keeps a change in the editor only. Click **Save** on the toolbar before you leave the page.
- **The theme's look stays.** A Bootstrap utility class under **HTML classes** or a theme rule with `!important` wins. Open the **General** panel and remove the class chip, for example **Primary background**, or ask your webmaster about the theme rule.
- **A control does nothing at all.** Some elements have their own setting for the same job. See [Elements with their own settings](#elements-with-their-own-settings).
- **The button no longer changes colour on hover.** Your **Background** replaces the theme's hover colour. Set a **Background** in the **Hover style** panel too.
- **The text turned faint along with the box.** **Opacity** fades the whole element. Set it back to 0 and use a **Background** colour with transparency.
- **Opacity 0 does not hide the element.** 0 means **Theme defaults**. Add the **Hide element (d-none)** class under **HTML classes** instead.

## What's next?

- [Backgrounds](/hc/documentation/learn-dxpr-builder/element-settings/background): put a photo behind a heading and keep the heading readable.