How do you do this in Flare (see screen shot)?

[Kat se gat]

Screenshot below shows something I snipped from one of the official Flare PDF guides. Try as I might, I can't see how that green background was applied to the text. I can change the background of text in a paragraph but the text itself is right up against the edge of the background and doesn't have space around it like the screenshot shows. Does anyone know how you do that?

[LTinker68]

Background-color, border, and padding attributes. The border is the perimeter of the area specified by the paragraph tag (class). Padding controls the distance from the paragraph's contents from its border. (Margin, FYI, is the distance of the paragraph from outside elements, like another paragraph or a table.)

[Kat se gat]

Lisa,

Am I right in saying I'd create a new style and call it something like p.GreenBox? I can then edit the style and set the attributes in there? Then, to use it I add a new paragraph and enter some text and then change its style to p.GreenBox, something on those lines?

If I am on the right track then what attributes would I set so that the box sizes itself to the extent of the page width it's being used on?

[Nita Beck]

Yes, you have it. I would suggest, however, that you don't name it by one of its attributes, in this case, a color. Instead, name it something that reflects its purpose. What if someday you want to output this content to a target for which you won't want to use green, but rather orange, or even no color at all, but instead something completely different? In fact, maybe not call it "Box" either, but instead "Note" or "BestPractice".

[Kat se gat]

I see what you mean. I nominated GreeBox just to tie in with the colour of my screenshot. A more colour-agnostic name would be more appropriate.

Did you see my other question about sizing it to the page which I added afterwards? I did a post-edit. I think I should have kept it separate. Sorry.

[LTinker68]

Did you see my other question about sizing it to the page which I added afterwards?

By default, container tags (p, div, blockquote, li, etc.) will go to 100% width of their parent tag. You can sometimes get into trouble with print output if Flare can't determine a good spot to wrap your content to the next line, in which case the box may extend past the right margin, so you might have to adjust your content (insert a soft line break or soft hyphen or shrink an image, etc.), but generally you don't need to do anything to make sure it extends the available width of the page.

[jasonsmith]

The easiest way would be to select Insert > Text Box. Right-click the div sidebar to adjust background, width, border, padding etc.

[Kat se gat]

The easiest way would be to select Insert > Text Box. Right-click the div sidebar to adjust background, width, border, padding etc.

Thank you Jason of the Smith variety. I'll also give that a try as well.

[Nita Beck]

The easiest way would be to select Insert > Text Box. Right-click the div sidebar to adjust background, width, border, padding etc.

Interesting idea. In that case, I would create a div class that has the background, width, borders, etc. set up there. Then you can just insert the text box and apply that div class. If instead you just insert a text box and then set that text box's background, width, border, and so forth, you're using inline formatting, which won't support single-sourcing to different outputs.

[chunkee]

twitter bootstrap has some nice standards ones that you can use. UX wise, this is pretty ubiquitous. You can changes the colors easily in the CSS. Create a Snippet out them etc.

.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
color: #c09853;
}
.alert-success {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
.alert-caution,
.alert-error {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
.alert-info {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #d9edf7;
border-color: #bce8f1;
color: #3a87ad;
}

.alert-optional {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #f1ddf6;
border-color: #c163d7;
color: #c163d8;
}