24 Replies Latest reply on Sep 29, 2009 4:10 AM by LaKisha1

    Using custom bullet images in paragraph styles

    Nick@Tag Level 2

      R8 HTML.

       

      Hello all,

      Bit of an edit to this one.

       

      I've got several sections of text through my doc, Tips and Notes, currently this text is just highlighted and box bound. But I instead want it to have a custom bullet image, like a ! or something similar. I've found the images I want to use in the 'Bullet and Numbering..' menu of RH, but using these to create a style creates a new list style, I instead want to edit my existing Note and Tip styles so the image is used, otherwise I have to re-apply the list style all over the doc in place of the Tip and Note styles I have now. Would be very nice if I didnt have to do this.

       

      Hope someone can help.

       

      Cheers.

        • 1. Re: Using custom bullet images in paragraph styles
          MergeThis Level 4

          Just wondering...have you considered a two-column, borderless table, with your graphic in one and content in the other? This would also give you more flexibility in formatting the content in the second column (bulleted list, numbered list, grahics, etc.).

           

          Other folks will likely offer different solutions that you might prefer.

           

           

          Good luck,

          Leon

          • 2. Re: Using custom bullet images in paragraph styles
            Nick@Tag Level 2

            Yeah I have, but what I'd really like to be able to do is set the bullet in the css in the existing style so it will update over all areas that use the style. i.e. so I dont have to do it manually.

            • 3. Re: Using custom bullet images in paragraph styles
              LaKisha1 Level 1

              Have you tried the following?

               

              1. Choose Format > Styles from the toolbar.

              2. Under "Available In", make sure the stylesheet that has the bullet style you want to update is displaying. If it isn't, then select the correct one from the menu.

              3. Under Styles, click the name of the style that is the bullet style for which you want to change the bullet.

              4. Click the Format button and select Bullets and Numbering.

              5. When the Bullets and Numbering window displays, click the Browse button at the bottom and locate the image you want to use as the bullet.
              6. Click OK.

               

              At this point, hopefully your image is now being used for the lists that are associated with the style you just changed the bullet for.

              • 4. Re: Using custom bullet images in paragraph styles
                LaKisha1 Level 1

                I forgot to tell you one thing - when the Bullets and Numbering window displays, you need to be on the "Bulleted" tab in order to see the Browse button at the bottom of the tab.

                • 5. Re: Using custom bullet images in paragraph styles
                  Nick@Tag Level 2

                  I can do it this way, but this is for a bullet/list style.

                   

                  I can't edit my existing paragraph style in the same way. The option to choose those bullets doesnt exist.

                   

                  If I do it this way, I basically will make a new style, and have to apply it to every topic thats using the other style that I want to replace.

                  • 6. Re: Using custom bullet images in paragraph styles
                    LaKisha1 Level 1

                    Hmm...what you say sounds strange...In the Styles list, there are 3 categories: Character, Other, and Paragraph. I notice that for styles listed under "Character" and "Other", the "Bullets and Numbering" option *does not* display. However, for styles listed under "Paragraph," the "Bullets and Numbering" option *does* display.

                     

                    Are you sure your style is designated as a "Paragraph" style?

                    • 7. Re: Using custom bullet images in paragraph styles
                      Nick@Tag Level 2

                      hhhmmmmm.

                       

                      Let me get this right. I'm in RH8 HTML.

                       

                      In the Styles window (either from right clicking the style or opening the CSS and picking my style) I select my style, and click the 'bullets' icon thats there, however on a mouse over its called Auto Numbering, from here I get a Lists For Autonumbering window, and nowhere in this window, or other windows I access from it can I set a custom image.

                       

                      Are you sure you are looking at paragraph styles, and not List styles, because I see it can be done to list styles.

                      • 8. Re: Using custom bullet images in paragraph styles
                        LaKisha1 Level 1

                        Ahhh, RH8 - I'm in RH7. I have 8, but won't be using it until late October (for work reasons). Anyway, I'll try to check in 8 and find the same thing that i'm talking about, and then get back to you. but in the meantime, using the attached screenshots from my RH7, you may be able to figure out what to do in 8 before I'm able to get back to you.

                        • 9. Re: Using custom bullet images in paragraph styles
                          Nick@Tag Level 2

                          could you copy/paste the style from your CSS for that, perhaps I can manually do it.

                           

                          thanks

                          • 10. Re: Using custom bullet images in paragraph styles
                            LaKisha1 Level 1

                            good idea! here you go:

                             

                            P.ImageBulletList {
                                font-size: 11pt;
                                font-weight: bold;
                                font-family: Verdana, sans-serif;
                                font-style: italic;
                                list-style: url(baby_right.gif);

                             

                            the image, baby_right.gif, is not in any folder - just on the first level within the "Project Files" folder - see newly attached screenshot.

                             

                            lemme know if it works

                            • 11. Re: Using custom bullet images in paragraph styles
                              LaKisha1 Level 1

                              oops - 4got the closing brace...

                               

                              P.ImageBulletList {
                                  font-size: 11pt;
                                  font-weight: bold;
                                  font-family: Verdana, sans-serif;
                                  font-style: italic;
                                  list-style: url(baby_right.gif);
                              }

                              • 12. Re: Using custom bullet images in paragraph styles
                                Nick@Tag Level 2

                                unfortunately it still wont work. really thought that should have done it.....

                                 

                                this is what I'm doing.

                                 

                                p.Notetest {
                                    font-size: 11pt;
                                    font-weight: bold;
                                    font-family: Helvetica, sans-serif;
                                    list-style: url(ex_yellow.jpg);
                                }

                                and I have that ex_yellow.jpg in the directory. still nothing.

                                 

                                really its that 'list-style' thats important, but its not working.....maybe someone with some CSS expertise could help me out.....

                                • 13. Re: Using custom bullet images in paragraph styles
                                  LaKisha1 Level 1

                                  hopefully someone with more css expertise will chime in.

                                   

                                  how about deleting everything else and just trying this:

                                   

                                  p.Notetest {
                                       list-style: url(ex_yellow.jpg);
                                  }

                                   

                                  see what happens if you just have that.

                                   

                                  i did notice that in RH7, when i was playing around, there were some difficulties when i had the extra formatting information (bullet stopped working), so i deleted the extra information. then my arrows were working again. then i added  back the other style information and it was fine.

                                  • 14. Re: Using custom bullet images in paragraph styles
                                    LaKisha1 Level 1

                                    also, try some variations, like this:

                                    url (ex_yellow.jpg);

                                    url("ex_yellow.jpg");

                                    url ("ex_yellow.jpg");

                                    • 15. Re: Using custom bullet images in paragraph styles
                                      Nick@Tag Level 2

                                      still no joy, I can set the style up using a List style and it works, and the code is the same, but still nothing. I'm sure theres going to be one small thing that once changed will make it work.....

                                      • 16. Re: Using custom bullet images in paragraph styles
                                        LaKisha1 Level 1

                                        sorry i couldn't help u solve the problem. good luck though.

                                        • 17. Re: Using custom bullet images in paragraph styles
                                          MergeThis Level 4

                                          I believe the correct syntax is:

                                           

                                               list-style-image: url('image.gif');

                                           

                                           

                                          Good luck,

                                          Leon

                                          • 18. Re: Using custom bullet images in paragraph styles
                                            Gravenstein Level 2

                                            FYI, I use this feature in RH6 and it works fine. In RH8, it doesn't. The existing formatting came through the conversion fine, but when I apply the style to a new paragraph, it doesn't work. Looking at the HTML, I see that part of the formatting is missing.

                                             

                                            G

                                            • 19. Re: Using custom bullet images in paragraph styles
                                              Nick@Tag Level 2

                                              Can you please post a copy of the RH6 vs the RH8 code, before and after conversion so I can see what's different between the two.

                                               

                                              Thanks.

                                              • 20. Re: Using custom bullet images in paragraph styles
                                                Nick@Tag Level 2

                                                Well, I have found no solution to this, so I'm re-doing the style of the text, using list styles instead. Probably better to do it this way in the long run anyway. Though this does mean I've got a lot of work to do down the line in doing a manual find and replace of the paragraph style with the list style.

                                                 

                                                thanks for the help and suggestions.

                                                • 21. Re: Using custom bullet images in paragraph styles
                                                  Captiv8r Adobe Community Professional & MVP

                                                  Hi Nick

                                                   

                                                  Coming in a bit late on this.

                                                   

                                                  I just successfully changed to picture bullets by performing the following actions.

                                                   

                                                  Added the image I wanted to use for the bullet as a Baggage file.

                                                  Edited the Lists item in the Style Sheet editor so that lists were presented in an unusual font. (did this so I could easily locate the appropriate CSS section when editing later)

                                                   

                                                  *NOTE: I'm unsure why Lists is listed as a separate entry of its own, but I used the Lists found within the Other category.

                                                   

                                                  Now hand edit the CSS using Windows Notepad. Certainly you may view the files in Windows Explorer and right-click to edit, but I much prefer to launch the CSS in Notepad right from RoboHelp HTML. To do that, you click Tools > Options > Associations tab. Then associate Notepad with CSS files. This allows you to right-click the CSS in the RoboHelp HTML Explorer and choose View. The CSS should then display in Notepad.

                                                   

                                                  Okay, once that was done I edited Notepad and saw that my lists item looked as below:

                                                   

                                                  tmp2.png

                                                  I amended it to add the reference to the image as shown below:

                                                   

                                                  tmp3.png

                                                   

                                                  Seems a lot has been tried and nothing seems to work for you. I'm hopeful this will either help you solve it or spark a thought that will.

                                                   

                                                  Cheers... Rick

                                                   

                                                   

                                                  Helpful and Handy Links

                                                  RoboHelp Wish Form/Bug Reporting Form

                                                  Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!

                                                  Adobe Certified RoboHelp HTML Training

                                                  SorcerStone Blog

                                                  RoboHelp eBooks

                                                  • 22. Re: Using custom bullet images in paragraph styles
                                                    Nick@Tag Level 2

                                                    thanks for your hard work mate, but I don't think this is the soultion.

                                                     

                                                    You see the style I'm currently using is a Paragraph style. The code looks like this.

                                                     

                                                    p.Note {
                                                        margin: 0cm;
                                                        margin-bottom: .0001pt;
                                                        border: none;
                                                        padding: 0cm;
                                                        font-size: 10.0pt;
                                                        font-family: Helvetica, sans-serif;
                                                        color: #524C45;
                                                    }

                                                     

                                                    Now I want this paragraph style to instead use a bullet, I can easily change that using the Style windows in RH and the code looks like this

                                                     

                                                    p.Note {
                                                        margin: 0cm;
                                                        margin-bottom: .0001pt;
                                                        border: none;
                                                        padding: 0cm;
                                                        font-size: 10.0pt;
                                                        font-family: Helvetica, sans-serif;
                                                        color: #524C45;
                                                        list-style: rh-list;
                                                        x-list-class: rl-p-Note;
                                                        x-list-level: 1;

                                                    }

                                                     

                                                    So if I can add that standard black box bullet, why can I not customise the bullet to be an image instead, if I remove that bullet code or try to replace it with something like

                                                     

                                                        list-style: inside url(tip.jpg);

                                                     

                                                    or the code you suggested, then nothing works.

                                                     

                                                    The issue here is that I'm using the paragraph style, not LI, or UL as you have shown in the example, and as far as I can see, I can't easily substitute one for the other without creating a new List style, and applying it to all topic areas where I currently use the Note paragraph stytle.

                                                     

                                                    Others say it works in previous versions of RH, but not RH8.

                                                     

                                                     

                                                    Thanks alot for all the suggestions, but I think there is no fixing this one. Its probably outside functionality, or the defeats the purpose of using LI and UL styles instead, just means I have a lot of work to do in changing the style used.

                                                    • 23. Re: Using custom bullet images in paragraph styles
                                                      Willam van Weelden Adobe Community Professional & MVP

                                                      Hi,

                                                       

                                                      Judging from your style, the problem is not the list, but the fact that you're using a paragraph as a list. In XHTML you cannot define the list style trough the paragraph. You could do this in HTML 4.01 so this worked in previous versions of RoboHelp.

                                                       

                                                      There are two things you can do: Find the corresponding list class of the paragraph, normally Li.p-Note and add the list-image there. Then you first click the list button and then you select the Note paragraph from the style list.

                                                       

                                                      If you want a picture, you can also transform your paragraph to look like a list by using a background image for the paragraph. Try adding:

                                                       

                                                      background: url('tip.jpg') no-repeat left top;

                                                      padding-left: 20px;

                                                       

                                                      to your paragraph. This will set the background image at the top left of the paragraph. You may have to add some transparent pixels to the top in order to outline the image correct. The padding is used to position the text like a list. This doesn't affect the position of the background image.

                                                       

                                                      Greet,

                                                       

                                                      Willam

                                                      • 24. Re: Using custom bullet images in paragraph styles
                                                        LaKisha1 Level 1

                                                        Nick@Tag,

                                                         

                                                        You might also want to take a look at post #11 on this thread: http://forums.adobe.com/message/2280273#2280273 - the title is "Bulleted List Becomes Numbered List in RH8"

                                                         

                                                        As someone stated on your thread though, looks like the main reason you are having the problem is due to using a paragraph style instead of a list style (the html in previous RH versions versus the xhtml in RH8).