I can't seem to make CSS border code work

[Gary]

I’m hoping to make my quoted paragraphs look like this:

I’m using this embedded code:

Unfortunately, this is how it turns out:

So, the “border-style” and the “border-width” works, but the “border-color,” the “border-spacing,” and the “background-color” don’t work. Any idea why?

[FlaminFig]

Maybe try to force them and see if that works.
You would have something like this to force them : border-spacing: 4px!important;

But why not use Sparkle’s Quote function and place a Box under it with a left-hand border?
You will have far more visual and functional control over it!

[Gary]

Thanks for the suggestion, I really appreciate it. I inserted “!important” after each command. Oddly, it worked for the background color, but none of the others. Here’s the code:

And here’s how it ended up:

Right now, all of my quotes are affected by a box with the appropriate border and background color. That’s how I got the screenshot I posted. But I’ve found that even when all the boxes line up with the text in the canvas, they don’t always line up in the browser. That requires a lot of trial-and-error adjustment.

And then sometimes the boxes move spontaneously and I have to go readjust them all. Also, whenever I edit a page I have to readjust all of the quote boxes.

I’d much rather use the CSS code if I can make it work.

[Gary]

Correction: the border color did work. I accidentally used a semi-colon instead of a colon after “border-color.” Now I just have to figure out how to make border spacing work.

Thank you so much!

[Gary]

Maybe “border-spacing” is the wrong command. Apparently, it’s for tables. I need to figure out how to space the enclosed text from the border. Some sort of buffer command. I’ll keep looking.

[Gary]

Got it!

Here’s the code:

Thanks, FlaminFig!

[FlaminFig]

The guest of Sparkle is that you design everything and once completed and you hit the Publish button Sparkle generates all the code needed for your site to work and compete with the modern website world out there.

For me I wouldn’t interject code unless absolutely necessary when I can have Sparkle do it all.

What you describe is very strange behaviour? I have never had that happen to me. So I’ll suggest a few things…

• Place a Text Box and then go across to Quote and tick
• Place Box behind the text and adjust to your liking with size and colouring. Activate a left-hand border with appropriate colour
• Now select both elements and Group

When you say the quotes you created in Sparkle are moving is this on your mobile device? It is possible it could happen if you have Settings / Miscellaneous / Mobile Auto-Scaling selected.

Or another suggestion is to contact Duncan and let him know about it on feedback@sparkleapp.com