• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Using custom bullet images in paragraph styles

Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Views

5.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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

thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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);
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.....

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

also, try some variations, like this:

url (ex_yellow.jpg);

url("ex_yellow.jpg");

url ("ex_yellow.jpg");

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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.....

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

I believe the correct syntax is:

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

Good luck,

Leon

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 18, 2009 Sep 18, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 21, 2009 Sep 21, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 21, 2009 Sep 21, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 21, 2009 Sep 21, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 22, 2009 Sep 22, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 22, 2009 Sep 22, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 29, 2009 Sep 29, 2009

Copy link to clipboard

Copied

LATEST

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp