Create: p.bullet1, p.bullet2, p.bullet3 (CSS code)

[allanpsand]

Howdy Folks,

I'm trying to create three paragraph bullet styles. I need help adding the styles to the CSS (using notepad).
(I've tried all sorts of variations on the new style dialog, but can't get the specifics to work correctly on the display.)

I"ve got 4 hours already invested.
Help! Help!!

Here are the specs:
p.bullet1
solid bullet on left margin, text indent 18pt.

p.bullet2
circle bullet 18 pt indent, text indent 36pt.

p.bullet3
square bullet 36pt indent, text indent 54pt.

If anyone can provide the CSS code?

p.bullet1
{
??
}

p.bullet2
{
??
}

p.bullet3
{
??
}

Many Thanks,
Allan Sand
Savvis

[cbdebris]

Why not use <li> and complex selectors?

[allanpsand]

I come from a typography background (from actual Linotype lead slugs and hand set type) all the way through every typsetting system to the present day.

A bullet paragraph has always had the same directly editable elements (size, indents, paragraph spacing, before and after spacing, etc.) that any other paragraph style has. Bullet styles are definable in Word, Framemaker, and all other major writing tools.

Why go through all these convoluted activities of creating complex selectors and still not really know precisely how they will be displayed. If MadCap can define specialized controls for drop-downs, mini-TOCs, etc. - why not for such a commonly used style as a bullet.

It should be available in auo-numbering also, but I'm assuming a certain amount of cumbersome reaction times (several months to come up with bullets, probably years for numbering). At least with bullets, most of the elements are already in place, only needing the selection of bullet types to be added.

So far, I've wasted 15 hours of research and experimentation attempting to come up with a paragraph style, and finally FORCED to use complex selectors. That is a lot of wasted productivity. I'm having to use MadCap now because it is a company-standard, but if I could back out and use any other HAT, I would. Paragraphs with bullets and numbering are 1/3 to 1/2 of all my writing output.

P.S. And as far as complex selectors go - why isn't there a right click list item selector when lists are being written? I have to spend so much time selecting a paragraph, mousing up to the toolbar for click (sometimes twice - with indents), and then back down to continue writing. If I'm in the middle of lists, Once in a list, there should be two right-click item "Bullets > (list of types)" and "Numbers > (list of types)". I don't need the distraction of being forced to hunt down a small target to click within a clutter of targets - especially when I'm rolling.

[LTinker68]

Why go through all these convoluted activities of creating complex selectors and still not really know precisely how they will be displayed. If MadCap can define specialized controls for drop-downs, mini-TOCs, etc. - why not for such a commonly used style as a bullet.

Because the MadCap styles are ones they designed; the HTML lists (ul/ol tags) are W3C standards and are therefore more limited in how they can be styled. For example, it's hard to control the distance between the bullet icon and its text. Going with paragraph classes, as you're doing, does give you more flexibility.

I'm heading out the door now, but if no one else posts the styles for the paragraphs, I'll do so tomorrow.

[allanpsand]

I'm heading out the door now, but if no one else posts the styles for the paragraphs, I'll do so tomorrow.

Pixels is a sufficient measurement scale.

Thank your very much. You are a kind and gentle person.

[LTinker68]

The easiest thing to do is set the paragraph to a block type of list-item. That gives you the option to select the different bullet types instead of having to insert special characters or use images for the bullets. I didn't try to modify the space between the bullet and text because the default appeared fine to me, at least using the font I was using. If you really want to change that spacing, then the style gets more complex. Try the basic styles below and see if they're sufficient for what you want.

Code: Select all

p.bullet1
{
	display: list-item;
	list-style-type: disc;
	margin-left: 18px;
}

p.bullet2
{
	margin-left: 36px;
	display: list-item;
	list-style-type: circle;
}

p.bullet3
{
	display: list-item;
	list-style-type: square;
	margin-left: 54px;
}

[allanpsand]

These were pasted these directly into the Style Sheet (Notepad).
The styles do not show up on the "Styles" Available Styles panel with other styles (h1, h2, p, etc.).
Opening the Styles editor, styles are listed with parameters and values.

Second effort:
Manually entered the bullet styles in the HTML page:
<p class="bullet1">d</p>
<p class="bullet2">d</p>
<p class="bullet3">d</p>

On the WYSIWYG view, when any of the three paragraphs where selected (cursor on the line) - the Styles panel displayed the three in a separate style set listing:
(reset class)
p.bullet1
p.bullet2
p.bullet3

On the WYSIWYG view, when a "p" line was selected, the normal "Available Styles" displayed - with no listing of the three styles.

[LTinker68]

Oops, sorry, forgot to mention that. I noticed that, too. If you right-click on the <p> tag in the show blogs area, then you see the p.bullet1, etc., styles in the context menu that appears. I'm not sure why it doesn't show up in the Styles pane since you're in a <p> tag, but I have a feeling that the display:list-item is throwing off Flare's Styles pane (which would be a bug).

There are a couple of other options you could try, including an mc-auto-number-format and corresponding span class, or making an image of the bullet and specifying that as a background, etc. I'm afraid I don't have time at the moment to build out a few examples, but what you want can be done; you just have to play around with the styles a bit.

[Keri M]

Hi Lisa,

I am having the same issue as described above. The only way my p.bul1, p.bul2, an p.bul3 styles appear in the Styles window for selection is if I set them as "block" for the display property. But the only way I get the discs to appear in the list is if I set this to "list-item" instead. I obviously can only choose one option here.

Can you tell me where the "show blogs area" is that you reference and where exactly I need to right-click?

Thank you for your help,
Keri

[Psider]

Probably she meant the HTML element tree that you can display on the left of the XML Editor. They may be turned off for you. There should be a button at the bottom of the XML Editor with a tooltip "Toggle show blocks". Then you'd right-click on the p tag for the paragraph you want to apply your p.bullet style to.

[Terence]

The easiest thing to do is set the paragraph to a block type of list-item. That gives you the option to select the different bullet types instead of having to insert special characters or use images for the bullets. I didn't try to modify the space between the bullet and text because the default appeared fine to me, at least using the font I was using. If you really want to change that spacing, then the style gets more complex. Try the basic styles below and see if they're sufficient for what you want.

Thanks. I was having a similar headache and came across this post.

Which changes are needed to customize the spacing between the bullets and the text?

[LesNoiz]

Take a look at the last entry in this thread: http://forums.madcapsoftware.com/viewto ... =6&t=16812. This method (autonumbers and spans) proved easiest for me.

[Terence]

Ah, so you did it by adding the symbols into the CSS itself.

Ok, works for me. Thanks.

[Anette]

Hi,

I have to import FrameMakerfiles in a project (several times a year) and must compile them to a chm output file.
Everything is working, except for numbering-list.

every list in each topic should begin with "1."

FrameMaker took the style:
p.Numbering1
{
...
mc-auto-number-position: outside-head;
display: list-item;
list-style-type: decimal;
...
}
Which entry is still missing here? Or anywhere in Flaire?

But after compiling the numbering is absolut chaotic.
the first topic with a numbering list begin with "4."

I realy need help.

Regards,
Anette

[Msquared]

I have had to specify a separate list begin style for my top level numbered list. That's because the auto-numbering only resets once you are under a higher level heading (at least, the way I've done it). I have levels 1-5 for headings proper, then 6,7,8 for lists. So if I have a second list below the same heading level 1-5, it will just continue numbering from the previous list unless I reset it.

This is exactly the same as in Word. You won't normally need this for the lower level list numbers, as they will usually be nested under a higher level one, unless you want to do something pathalogical.

Here are my list autonumber formats.

p.List1Begin
{
mc-auto-number-format: 'L:{ }{ }{ }{ }{ }{n=1}.';
}

p.List1
{
mc-auto-number-format: 'L:{ }{ }{ }{ }{ }{n+}.';
}

I so agree with you about using ordinary P styles for bullet and numbered lists, and not <ul> or <ol>. All mine are set up that way too. Why waste time and energy clicking the list button to set up paragraphs that need to be lists, then have to unclick it again if you decide the content isn't really a list after all? That seems to me to be mixing up content and formatting, just like we used to do in the old days, and make so much extra work for ourselves.

[Anette]

thank you very much.

now the numbering is now working.
but now all other layout properties were ignored.
e.g.
margin-left: 9mm;
font-size: small;

I think the list autonumber formats are overwriting/ignore the font settings.
and the text is directly placed behind the numbering without space

(hope you understand me)

[Msquared]

Are you using a web-based output by any chance?

If, so there is an extra thing to be aware of. It took me ages to find this.

if you are using

mc-auto-number-position: outside-head;

then for Webhelp, Flare implements the list in the generated output as a TABLE, so your default <p> style settings don't get inherited. I also needed to add this to my (ordinary) stylesheet (not the table stylesheet) to reset the fonts etc to what I wanted. My print (PDF) output was fine.

Code: Select all

/* For HTML output, list items with mc-auto-number-position: outside-head are implemented 
   as *tables* and this is needed to define the list body style :-( */
td.AutoNumber_p_List1Begin
{
	vertical-align: top;
	font-family: Verdana, Arial, Helvitica, Sans-serif;
	font-size: 10pt;
	margin-top: 6pt;
	margin-bottom: 0pt;
	color: #000000;
	line-height: 12pt;
	mc-next-tag: p;
	mc-hyphenate: never;
}

/* For HTML output, this is the name of the table style class that Flare defines and uses
   for my numbered list style. Unfortunately, Flare doesn't get it quite correct, and doesn't
   correctly apply all the attributes that this class should inherit from my own style classes
   p.List1Begin and p.List1. So I need to explicitly set them here */
table.AutoNumber_p_List1Begin
{
	margin-top: 6pt;
	margin-bottom: 0pt;
	line-height: 12pt;
}

[Anette]

You are greate ,

I wouldn't have figured it out in thousand years.

I tried to fix the table width but it didn't work.
I would like to put a distance between the number and text - but the distance is relativ
How do I define it?

[Anette]

I found it

Code: Select all

{
	vertical-align: left;
}

[Anette]

it din#t work

[LTinker68]

That's because left isn't an acceptable value for vertical-align. Plus that's the alignment vertically within the cell and has nothing to do with the position from the left side. What you'd want to do is add a padding-left attribute of maybe 4pt or something, depending on how much space you want.

[Anette]

Many many thanks for your help.

This forum is great.
When I' have more knowledge, I will share it, too

[Anette]

I was too hasty

the padding-left attribute is working, indeed.
when I controll a single file (with the prec button, it looks OK)
but after compiling the CHM the list moved away.

I think it's because the way of Flaire compile the CHM.

Flare implements the list in the generated output as a TABLE,

and the table are flexible.

I

[LTinker68]

but after compiling the CHM the list moved away.

What do you mean by move away? Are you talking about the vertical separation between the list item and the image, or the horizontal position of the image relative to its preceding list item?

Note also that because Flare puts that list type into a table, that you're inheriting all the style attributes for tables from the topic stylesheet. So if you set your base td tag in the topic stylesheet to have top padding, then this list in the generated table with have top padding, too. Although it doesn't look like there's much in relation to the list item, but there could be a complex selector that controls how to handle images inside table cells.

What was the reason why you wanted to use the outside-head option? That's the only reason it's going into a table, because you have that option specified. I think if you left the default list type option then you'd find the list behaving the way you want and you wouldn't have to worry about those table styles because it wouldn't be using a table.

[Msquared]

Note also that because Flare puts that list type into a table, that you're inheriting all the style attributes for tables from the topic stylesheet.

I forgot to say, I have separate table stylesheets, so my ordinary Stylesheet doesn't set any table styles, except for occasions like this, where I've found that I have to.

I used outside-head because anything else looked awful. But I use straight paragraph styles for my numbered and unnumbered lists. I don't use <ul> and <ol>. That may make a difference.