the “Quote” default is 40px for both the left and right margins. I’m using CSS to put a border around the quoted text, and I’m padding the border by 10px. This causes the text to move in by 10 px, essentially resetting the quote margin to 50px.
Is there a way to adjust the quote margin using CSS so I can compensate for the padded border and make the text in the browser match the text on the canvas?
Well I guess you could reduce Sparkles quote left & right margins down to 0px, or just turn it off altogether…
On a side note, Sparkle isn’t a coding platform, it is a design platform so by you introducing code to change elements that Sparkle already assigns CSS on Publishing, well… it is going to get messy! For me I would use Sparkle’s Quote function with a Box behind it with a left-hand margin and Group it.
I agree with @FlaminFig. The whole point of Sparkle is that you design your page and elements in a WYSIWYG environment, and then leave Sparkle to generate the code - including the CSS. The Quote style can have its margins adjusted in the style panel to anything you want. If you want to style the quote into a bordered box, or maybe add a sidebar, then simply add a box to the design. Make it the same size as your text frame, and adjust the border width as necessary. Your padding will be exactly as you want it. In the example below, the quote margin has been set at the default of 40px, and that is exactly the distance from the outline/sidebar to the text.
The only time you may want to introduce additional CSS is if you’re trying to create and style an object that Sparkle doesn’t support directly. For example, if you want to create a circle filled with a radial gradient, you would typically create the object with its inline CSS style as a single code snippet and add it to your page with the embed object. Like this:
.The code snippet you would add to your sparkle page would look something like this:
<style>
.gradient-circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, lightblue, darkblue);
}
</style>
<div class="gradient-circle"></div>
What is happening in this code is that the CSS style is creating the object and its fill, whilst the div is placing the object on your page. Once it’s on the page, you will be able to move it to any position you want.
What you wouldn’t necessarily do is create just the CSS style and then try applying it to a Sparkle made circle. That would get too complicated and would defeat the purpose of using Sparkle as a design tool in the first place.
Thank you for your reply, and for taking the time to go into so much detail. I really appreciate it.
I did originally create my quote effect by putting boxes around the quotes. When it worked, it worked well. But I found that boxes that aligned perfectly with the text on the canvas didn’t always align perfectly in the browser. That caused a lot of fiddling to misalign the boxes on the canvas so they would be aligned in the browser.
And sometimes when I’d come back to a document days later, I’d find the boxes, which hadn’t moved on the canvas, did move in the browser, and I had to fiddle around with them all over again.
Also, editing became difficult. Any time I made significant changes to the text I had to realign all the quote boxes all over again.
That’s why I wanted to use CSS to create the boxes. That way the quote on the canvas would be just plain text, and editing would be easy.
I found that I could create just the effect I wanted by using CSS to create a border around the text. The problem was, the text was compressed within the boundaries of the border. That caused the line breaks to occur at different places from the original, and on longer quotes it added a line or two (or more). That caused problems at the bottom of the page.
In this graphic, you can see the plain text as it appears without a border, and then again with a border. You can see how the text is compressed. The third image shows what I want to achieve. The text is the same as in the first image, but a border has been added outside the text. (I got that image by using a box).
If I could somehow use CSS to override the 40px “quote” indent and reset it to 30px I could compensate for the compression of the text inside the border.
It’s looking like that’s not possible, so my next attempt at a solution will be to use CSS to shrink the font size slightly, and/or reduce the line spacing, so that the compressed text will take up the same space as the uncompressed text.
If you have any other ideas, I’d love to hear them. Thanks!
Thank you for your reply. I really appreciate it. Unfortunately, turning off the “quote” would cause a mismatch between the canvas and the browser, and that would cause significant problems at the bottom of the page. (I’d end up with a lot of white space between the end of the text and the bottom of the page).
I did try using boxes around the quotes, and I had mixed results. See my reply to francbrowne.
Thanks again for taking the time to try to help me!
@Gary, it sounds like @duncan (at feedback@sparkleapp.com) can be of further help here regarding the Sparkle quote and box with left-hand border shifting around and not looking in Preview as you have set it up on the canvas…
Or create a new Sparkle document and create the same Sparkle quote and Box and see if that shows correctly in the browser. If it does there might be something else you have introduces that is mucking things up?..
Thanks, FlaminFig, but I don’t want to bother @duncan with this. It’s just my personal preference, after all. If I can’t make it work, I might just get rid of it and leave all the quotes plain text.
I’m not sure why you are getting this issue, Garry. I’ve found that creating a box, the exact same size as the text container and positioning it exactly over the text container, and then grouping the two, prevents any inadvertent movement while you work on the rest of the page. For example, in the example below, you will see the box and the text container have been sized to the same dimensions using the Arrange Tab. The box has a transparent fill and a border. It’s been placed behind the text but is perfectly aligned, and will remain so.
That would work, I agree, and no doubt the alignment problems I was having were caused by not doing it that way. Instead, I had one long column of text with indented quotes here and there. I placed a box over each quote.
The reason I didn’t have text>quote>text>quote all in separate text boxes is that it made editing difficult. Whenever I edited the text it would cause that particular box to expand (if I added text) or I would have to contract it manually (if I removed text). Unfortunately, I couldn’t figure out a way for the text boxes to all stay “attached” to each other when I edited. So, for instance, if I added text and caused that box to expand, it would overlap the box underneath it and I would have to move that box (and all subsequent boxes) down.
I much prefer working with a single column of text, but I recognize that causes alignment problems if I put a box (or an image) over the column. What you see may or may not be what you get.
By the way, thank you for taking the time to make that excellent graphic.
I don’t know why it took me awhile to realize this, but if I use the CSS border command with padding, the text on the browser will always be equal to or longer than the text on the canvas. So all I have to do to make it work is to add white space to the bottom of the canvas until all the text fits nicely in the browser.
That’s really easy to do with a little trial and error, so that’s what I’m going to do.
Ok @Gary that will do it!
Having your web page in one long text box.
Could I suggest that is asking for problems. Even in the html/CSS code world of creating websites you will see the text on a web page in containers and div tags, never as one long column in one container. This will also not favour well with search engines.
Please place your web page text in sections. These sections you can place in Layout Blocks that will shift other Layout Blocks below it vertically down the page as you expand it with additional text. Doing it this way your Sparkle Quote function (with a Box container behind it with a left-hand border) will faultlessly work as intended.
Thank you for your suggestions. I did actually try using layout blocks, hoping they would move automatically as text expanded. But I found they didn’t. Maybe I was using them wrong?
Here’s what a sample page section looked like before editing:
Then, when I added text to the top-most text box, in the top-most layout block, it just spilled over to the next block and I had to adjust all the downstream layout blocks manually.
So you are on the right track @Gary…
Is your first block of text in its own Layout Block? Possibly not by what I see here.
If it were you would vertically lengthen the Layout Block, then lengthen the Text Box within the Layout Block and place your text. While you vertically lengthened your first Layout Block it also pushed the Layout Blocks below it down the page, including your Quote.
Yes, each of the three text blocks is in its own layout block. I was hoping that when the text exceeded the confines of the text box and automatically enlarged the box, it would also automatically enlarge the layout block, but that didn’t happen.
Instead, I have to manually enlarge the layout block. Of course, as soon as I click on its handle, the overflow text disappears and the text box border turns red. So I have to guess how for to enlarge the layout block and then enlarge the text box again.
When I manually enlarge the layout block, it does move the subsequent blocks down as a unit, which is nice. But this seems like a difficult way to edit, and downright nightmarish if I decide to rearrange the text.
Here’s a view of the canvas side-by-side with the browser preview using CSS to create the quote box. As you can imagine, this would be a breeze to edit. I could move the text around, add, delete, etc. and the quote boxes will automatically be generated wherever they’re supposed to be. The only drawback is that I have to fiddle with the bottom of the canvas so the text doesn’t overflow the browser window.
For now we just need to work within the framework we have which for me works pretty well.
As I mentioned before, the more you introduce CSS that wants to override the CSS Sparkle generates on Publish the more issues will arise.
So it will be a trade-off in your case.
I think you’re right in general, so I’m going to try to avoid overwriting what Sparkle does as much as possible. Thanks for all your help and advice.
