Stylizing box/containers for Wix Blocks in code

Ask the community
, ,
1

Question:
I am trying to set the background color of a Box object in my Wix Blocks app to two different colors. For my purposes, I need to be able to do this dynamically through my code. I know in normal HTML/CSS what I’m trying to do is as simple as:

<div style="background-color: linear-gradient(blue, pink);">Some content</div>

But only the text element can directly change its HTML, I know you can set a single background color for a box/container like so:

$w('#elementID').style.backgroundColor = "pink";

But that only allows you to set a single color, you can’t pass in CSS functions.

Product:
Wix Blocks

What are you trying to achieve:
At a bare minimum, I’m trying to be able to dynamically set the background color of a container to two colors. It doesn’t really matter how it looks (smooth gradient, half and half), I’d just like to be able to set one container to multiple colors.

What have you already tried:
I’ve already looked through the documentation pertaining to style mixins:
https://dev.wix.com/docs/velo/api-reference/$w/style-mixin/introduction
Also trying to just use a Text object doesn’t quite work either because it dynamical shrinks to only take up as much space as there is text.

Additional information:

2

Currently there are limited options for styling Blocks apps via Velo/CSS. However there is planned support for CSS in Blocks in Q4 of this year. You can follow this feature request to get notified when it’s available.

3

Hi Anthony, thank you for getting back to me. I was wondering if I was missing something in the Velo documentation, but I guess not. Looking forward to the new features.

For anyone else who found this topic because they’re looking for the same answer, I did find a kind of alright work around. Not great, but at least it does the job for now:

  1. Add a Text component into the Box/Container component you want to add a multi-color background to
  2. Set the Text alignment to be 100% width in the editor and bounded to the top of the Box/Container
  3. In your Javascript, use $w() to get you object and set the html attribute on the text and include an in-line style attribute, for example:
$w('#textElementID').html = '<p style="height: 400%; background: linear-gradient(45deg, pink, blue)">Your text or no text here</p>';

You may have to play with the height percentage, but this will make the Text element 100% size in both dimensions, and the overflow seems to be hidden. Not great as you’re relying on the overflow being hidden and the Velo reference specifies that the html attribute on the Text component doesn’t support the use of the height CSS attribute, but it seems to work anyways.

1 Like