Skip to main content
Inspiring
April 14, 2011
Question

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

  • April 14, 2011
  • 2 replies
  • 3555 views

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!

This topic has been closed for replies.

2 replies

Matt-Tech Comm Tools
Community Expert
Community Expert
April 19, 2011

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!

-Matt Sullivan, FrameMaker Course Creator, Author, Trainer, Consultant
cvgsAuthor
Inspiring
April 19, 2011

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.

cvgsAuthor
Inspiring
April 25, 2011

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?

Peter Grainge
Community Expert
Community Expert
April 15, 2011

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

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
cvgsAuthor
Inspiring
April 15, 2011

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
Legend
April 15, 2011

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