Formatting issue - background color not updating on p tag

Shotstack API
1

Noticing some HTML formatting issues when trying to change the background color of a p tag. The GUI doesn’t give the option to change the background of the element, so I tried to change it in the json view.

See the below code I’ve used, I also tried changing the p to a span or even a table and the design does not update when I toggle back to the GUI view.

However, if I change the text from HELLO WORLD to anything else the preview updates. I also tried saving but the preview doesn’t update.

Is there anything I am missing?

                            "html": "<p data-html-type='text'>HELLO WORLD</p>",
                            "css": "p { color: #000000; background-color: #ffffff; font-size: 32px; font-family: Montserrat ExtraBold; text-align: center; }",
3

I accidentally deleted that reply sorry!

All I am basically trying to do is have p text that has its own background color and some padding that expands horizontally with the text and I can’t seem to get html formatting to give me an acceptable outcome.

See below, just working out what html options I have to create labels like below that auto adjust in width depending on the length of text filled in by merge fields

pformats
pformats2100×1005 166 KB

4

Have a look at this template here: Padded table video template — Shotstack

It should do what you are looking for, it uses a table which has a background colour and the text makes the table expand.

1 Like
5

You can create a box with a border if you replace the HTML asset with this JSON:

"asset": {
    "width": 660,
    "html": "<table cellpadding='2' class='outer'><tr><td><table cellpadding='16' class='inner'><tr><td><p>The black-footed ferret</p></td></tr></table></td></tr></table>",
    "css": ".outer { background-color: #ffffff; } .inner { background-color: #000000; } p { color: #FFFFFF; font-size: 28px; font-family: 'Open Sans' }",
    "position": "left",
    "type": "html",
    "height": 660
},

The inner box needs a fill colour though as it is using a table inside a table. Borders come out with a ridge style (not flat) which doesn’t look great.

1 Like
6

Thanks for that! I was thinking a table hack might be the go but couldn’t get it to work, I will try this.

Many thanks!

7

Works perfect, thanks @lucas.spielberg !