Header Design

Customize the header layout by easily changing its size, color, adding a border, or modifying its content colors.

How to change Header Design?

Press the "spray" icon to access the Header Settings page.

Header settings:

Theme - Define how the header will appear in dark or light app themes. Since end-users can choose the theme of the OS they use, it's important to take it into consideration when working on a visual design of your app.

Background color - Choose the header background. Color can also be changed by device using setProperty firmware API

Content theme - Select from Dark or Light content colors to ensure the header content looks good on your custom background.

Datastream (optional) - choose the Datastream if you plan to change header design from device using setProperty API.

Border - Apply a stroke or a shadow under the header body

Change Header Properties

You can change certain properties of the Header from your hardware. For that, use this command:

Blynk.setProperty(vPin, "headerProperty", "propertyValue");

Where:

vPin is: virtual pin number the widget is assigned to

headerProperty: property you want to change

propertyValue: value of the property you want to change

Don't put Blynk.setProperty() into the void loop() as it can cause a flood of messages and your hardware will be disconnected. Send such updates only when necessary, or use timers.

Properties you can change

You can change the color and contentDesign properties from your hardware, or via an HTTP API.

The URL must be encoded, so spaces in labels must be replaced with %20, and color hexadecimal values in the HTTP API URL must include the hash # character urlencoded as %23.

Set color

Blynk.setProperty(V1, "color", "#D3435C");

Set content design

Blynk.setProperty(V1, "contentDesign", "dark");

Change Header Properties with HTTPs API

Updates the Datastream Property and all assigned Widgets

GET https://{server_address}/external/api/update/property?token={your 32 char token}&pin={your vPin}&{property}={value}

The endpoint allows you to update the Datastream Property value via GET request. All widgets (both web and mobile) that are assigned to this datastream will inherit this property. The Datastream Property is persistent and will be stored forever until you change it with another value. In order to clear the property you need to clear the device data in device actions menu.

Example: https://blynk.cloud/external/api/update/property?token=GVki9IC70vb3IqvsV0YD3el4y0OpneL1&pin=V2&color=%2300000

https://blynk.cloud/external/api/update/property?token=GVki9IC70vb3IqvsV0YD3el4y0OpneL1&pin=V1&contentDesign=dark

Path Parameters

Query Parameters

Resizing

In the default state, the header size depends on its content. However, you can manually change the size by dragging the handle at the bottom of it.

Last updated