Header Design
Last updated
Last updated
Customize the header layout by easily changing its size, color, adding a border, or modifying its content colors.
Press the "spray" icon to access the Header Settings page.
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
You can change certain properties of the Header from your hardware. For that, use this command:
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
Set content design
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
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.
| Name | Type | Description |
|---|---|---|
| Name | Type | Description |
|---|---|---|
{server address}*
string
Get from the bottom right of your Blynk console. More information.
token*
string
Device auth token from Device info
pin*
string
The datastream virtual pin (should start with "v")
{property}
string
The property of the header you want to update: color, contentDesign
color
string
header color hexadecimal, must include the hash # character urlencoded as %23
contentDesign
string
light or dark
