RH9: Same old story; can't get image bullets to display

[cvgs]

Using TCS3, FM10, RH9 in Windows XP.

I have custom bullets that I would like to use for my bulleted lists.  No matter what I do in the CSS, I still get the standard black bullets. (I know I should be grateful for any bullets at all, but I would really like my blue bullets.) My blue bullets are in my project as both images and baggage files.

Here's what my CSS looks like for one of my bullets:

P.Bullet2 {
font-family: Tahoma;
margin-top: 7pt;
margin-bottom: 7pt;
font-size: 11pt;
margin-left: 0.5pt;
color: #000000;
list-style: url(hollow_blue_bullet.png);
}
LI.p-Bullet2 {
font-family: Tahoma;
font-size: 11pt;
color: #000000;
list-style: url(hollow_blue_bullet.png);

I have created a test project and linked it with a CSS where I have stripped out the Bullet2 tags.  I thought if I stripped it out, I could rebuild it.  I also deleted the Bullet2 style in RH. So I no longer have a FM Bullet2style mapped to a RH Bullet2 style.

I then created a Bullet2 style in RH with the formatting including my blue bullet.  However, I don't have the Bullet2 RH style to map to anymore.

Here are my question:

• How do I get a new style to become available to map to?
• How do I get my unordered lists to have image bullets?

Thanks in advance!

[Peter Grainge]

At a quick glance your CSS looks wrong. See Lists on my site and read the bit about Upgrading. The <p> tag should not contain anything about the list style.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[cvgs]

Peter,

I've read the section on your website about upgrading, but I still have the black bullets where I really want my blue ones. The CSS now looks like this:

P.Bullet1 {
font-family: Tahoma, sans-serif;
font-size: 11pt;
color: #000000;
text-indent: 0pt;
margin-left: -14pt;
}
LI.p-Bullet1 {
font-family: Tahoma, sans-serif;
font-size: 11pt;
color: #000000;
text-indent: 0pt;
list-style-image: url(solid_blue_bullet.png);

}

As you can see, I don't have the P-List problem; mine is done correctly according to your website. The indent level is fine also.  My only problem is getting the bullets to display.

Here is the HTML code for Bullet1:

<ul type="disc">
<li><p class="Bullet1"><span style="font-weight: bold;">Select an environment</span>.
  </p></li>

Shouldn't this have an href to the bullet image in it?

Thanks again for your assistance.

[Captiv8r]

Hi there

Hopefully Peter won't mind my suggesting something here. Perhaps you need to ensure the bullet image is added to the Baggage files area of your project?

Cheers... Rick

Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7, 8 or 9 within the day! Adobe Certified RoboHelp HTML Training SorcerStone Blog RoboHelp eBooks

[cvgs]

They're already there.

[Peter Grainge]

You have defined an LI class but not applied it. Your LI tag has no class in it.

Confusingly you have given the LI class the same name as the P class but that will not stop it working. Just add the same classname to the LI tag and it should work.

There is also something on my site about adding images to lists.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[cvgs]

Peter

,

I am so new at this.  I have no clue what a class is.  I did some searching online and think I found what they are and how to apply them.  Now my HTML looks like this:

P.Bullet1 {
font-family: Tahoma, sans-serif;
font-size: 11pt;
color: #000000;
text-indent: 0pt;
margin-left: -14pt;
}
LI.Bullet1 {
list-style-position: outside;
list-style-image: url(new_blue_bullet.png);
}

However, I still don't have any image bullets.  So, I think I'll just keep my stupid black bullets and move on to other RH challenges.

Thank you again for your perseverance. I'll be back to fight another day.

[Peter Grainge]

You have created the class in the CSS. What you are not doing is telling the HTML to use it.

<li class="Bullet1"><p class="Bullet1">

It looks like you are using the same class but you are not. The class in the LI tag  is using

LI.Bullet1 {
list-style-position: outside;
list-style-image: url(new_blue_bullet.png);
}

whereas the class in the P tag is using

P.Bullet1 {
font-family: Tahoma, sans-serif;
font-size: 11pt;
color: #000000;
text-indent: 0pt;
margin-left: -14pt;
}

That's why I said using the came class name for both was confusing.

LI.BulletBlue would be better.

Not sure about using numbers in CSS style names either.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Willam van Weelden]

Hi,

You can use numbers in css classes, just don't start a classname with numbers.

Greet,

Willam

[Peter Grainge]

Thanks Willam. I knew there was something about numbers but couldn't recall exactly what.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[cvgs]

If I have two different tags (LI.BulletBlue and P.Bullet1) that pertain to the same thing, how do I map the style?  I can only map to one style. (I'm linking FM styles to RH styles.)

[Peter Grainge]

They are not the same thing. One is a list class and one is a paragraph class. Both should appear when you map. If they don't, then someone with more FM knowledge will need to assist you.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[cvgs]

Yes, I'll definitely need more help.  I can only map to one and I can't seem to get the class one to display to map to.

[Matt-Tech Comm Tools]

Hi cvgs, nice profile pic, by the way!

It looks like you've got the css skill & most of the code needed for what you want to do.

As Peter was pointing out, the css and html use different representations. Therefore:

p.Bullet2 will format <p class="Bullet2">

and

LI.p-Bullet2 will format <li class="p-Bullet2>

Now you need to look at what your resulting html is after the content in FM is linked to RH and updated.

If you content is using the <p class="Bullet2"> and <li class="p-Bullet2> code, then your css should work fine. Now the question is whether your path to the graphic is correct. Try modifying a property like font color to see if you have control of the formatting. If so, then track down the actual path of your graphic. Then double and triple check your css for the graphic. It looks ok to me, but hey, I'm not on the clock here....

If your html is using different formatting than <p class="Bullet2"> and <li class="p-Bullet2> then you need to modify either your mapping or your css. If your code is using FM_Bullet2 then you don't have it mapped. In fact, any code using FM_ is improperly mapped, and any attempts to format the FM_ tags in any css file will likely fail miserably.

Finally, you also have the option to map your FM tags to html elements using the User Defined HTML Tag option.

This will allow you to map specifically to a CSS definition, rather than a p.classname definition.

Let me know if this works for you. If not, we can always have a short online session to fix your mapping and answer other q's you may have. Not quite as satisfying as figuring it out yourself, but likely to be faster and more economical in the long run!

[cvgs]

Matt,

When I highlight the text for a bullet and look at it in HTML, it looks like this:

<ul type="disc">
<li><p class="Bullet1">Edit a release</p></li>
<li><p class="Bullet1">Add a release</p></li>
<li><p class="Bullet1">Change the order in which releases are displayed
  in the user panel on the CDDS main page. </p></li>
<li><p class="Bullet1">Delete a release</p></li>
<li><p class="Bullet1">Promote a release to the next level</p></li>
<li><p class="Bullet1">Generate merge warnings</p></li>
<li><p class="Bullet1" style="margin-bottom: 8.000pt;">Freeze a release.
  </p></li>

I think this looks different from what you mentioned in your email.  I don't appear to have the li class=p-bullet2 code.

Do I understand this correctly:  A bulleted list requires two things: code for the text of the bullet and code for the custom bullet?

I did the check that you suggested and when I changed the font color of the P-Bullet1 to red in Dreamweaver, it changed to red in RH. (So at least I have one thing correct.)

If your explanation is going to be difficult, an online session would really be appreciated.

[cvgs]

In the continuing saga of trying to get customized bullets...

I decided to create a test proejct and link a book to a new RoboHelp project. I did the following:

1. I used the existing CSS, but I deleted the P.Bullet1 tag and the LI.Bullet1 tag. I saved this CSS.
2. I applied the CSS to the topics in the project, I did not expect any Bullet 1 level text to have any  since there was no Bullet1 style.

Result:

When I selected a bulleted item, there was a Bullet1 style applied to it, even though there are no Bullet1 styles displaying in the CSS or the Styles pod. The font was incorrect, but it still had the default black bullet.  When I tried to check the mapping, I was not able to expand the list box on the Conversion Styles dialog box.  It looks like none of the styles are there, however, they exist in the Styles pod (all except the Bullet1 style that I had deleted).  How can that be?  What's happening?

[cvgs]

I felt I owed it to all of my followers to let everyone know that I finally got my customized bullets.  I worked with someone who had far more experience than I do in CSS and even he was baffled by how RH chose to interpret the CSS.

Here is the workaround that we came up with to get customized solid blue bullets for a first level indent ( fondly known as Bullet1):

For all of you newbies, like me, the following just formats the text of the bullet, not the bullet itself. The margin-left has to do with the amount of space between the text and the bullet.

P.Bullet1 {
font-family: Tahoma;
margin-top: 7pt;
margin-bottom: 7pt;
font-size: 11pt;
margin-left: 5pt;
}
LI{
list-style-image: url(new_blue_bullet.png);
list-style-position: outside;
margin-left: -15pt;
}

Note: LI above refers to the bullet itself (LI means list item).  This is saying when there is only a list item, give it a bullet that is blue, place the bullet outside of the text and indent the bullet -15pts from the left margin.

The following formats the second bullet level, also affectionately known as Bullet2. Again, this is just formatting the text of the bullet. Since they are similar, I supposed you could group Bullet1 and Bullet2 together, but I wasn't about to bring all this crashing down after so much work:

P.Bullet2 {
font-family: Tahoma;
margin-top: 7pt;
margin-bottom: 7pt;
font-size: 11pt;
margin-left: 5pt;
}
The following means (read it from right to left) a list item in an unordered list that is contained in another unordered list. This will format all instances where that hierarchy occurs.

UL LI UL LI{
font-family: Tahoma;
font-size: 11pt;
font-style: normal;
list-style-image: url(new_hollow_bullet.png);
list-style-position: outside;
margin-left: 5pt;

}

The next bit of CSS means a list item in an unordered list that is contained in an ordered list, for example, a bulleted list for a step. This will format all instances where this happens:

OL UL LI{
font-family: Tahoma;
font-size: 11pt;
font-style: normal;
list-style-image: url(new_hollow_bullet.png);
list-style-position: outside;
margin-left: 5pt;

}

Again, many thanks to all of you who laughed, cried, and stood on the ledge with me during this excruciating process.  I sure hope the Adobe folks were following this thread.  A heck of a lot of you looked at it.

If I could, I would give myself a star for this one as the correct answer.

Mary