Adding a Custom Image to a Style

Report · Oct 14, 2009

Yet another dumb question! Is it possible to add a customized image to a style? For example, I have a style named Caution and I want this style to use a specific image. If this is possible, please provide details for implementing it. If it is not possible, perhaps a snippet is the better option?

Thanks again.

Report · Oct 14, 2009

Hi,

Sure you can, but first, what Robo version/flavor are you using?

You can easily add an image to a style in your style sheet. I checked to see if you could do this in Robo7's own CSS editor, but I couldn't find a way to do it. I don't have Robo8 in front of me now, so I don't know if you can do it in Robo8's CSS editor. If you use Robo8, I will check that a little later.

If you use Robo7 or if you don't want to use Robo's css editor, here's how to do it:

Open your css in Notepad (or another editor).

Find your style (if your style is named myimage, search for p.myimage)

Add a new line between the brackets, such as:

p.myimage {

}

Now add (between the brackets): background: url('myimage.png') no-repeat left top;

Save your style sheet.

Now you have to make sure that the text of your paragraph doesn't flow over your image. If your image has a width of 20px, it's probably wise to start your text after 25 px.

Look in your style for 'padding-left'.

If it exists, replace the value to fit your needs, such as: padding-left: 25px;

If it doesn't exist, create a new line and add: padding-left: 25px;

Change the number of pixels you want to indent the text and save.

You're all ready to go.

Greet,

Willam

Report · Oct 15, 2009

Willam:

Thank you for taking the time to provide such a thorough response. I’ll give it a try and let you know if I have success. Ideally, I would like to add this image in the CSS editor. However, if tweaking the code works, then that should suffice.

For the record, I am using a trial version of RoboHelp 8. Our company is in the process of acquiring licenses, but I wanted to get started on the project now. Also, I have not touched RoboHelp in over 4 years, so I am trying to get familiar with all of the new functionality.

Thanks again.

Message was edited by: RoboWizard - Corrected Willam's name.

Report · Oct 15, 2009

Willam:

I have now had time to test what you recommended. Unfortunately, it does not appear to work. I had the image appear briefly, but when I adjusted the padding, it disappeared and I can’t seem to get the image to reappear. Here is how the code currently appears in my CSS:

p.Caution {

margin-left: 0.000pt;

margin-right: 0.000pt;

text-align: left;

text-indent: 0.000pt;

margin-top: 0.000pt;

margin-bottom: 10.000pt;

word-spacing: 0.250em;

font-style: normal;

font-weight: normal;

font-size: 11.0pt;

color: #000000;

letter-spacing: 0.00em;

font-family: Arial;

line-height: 14pt;

x-next-class: Body;

x-next-type: p;

background: url("../../../../../Caution.png") no-repeat left top;

padding-left: 25px;

margin-left: 18pt;

text-decoration: none;

}

Suggestions on how I might get this working would be appreciated.

Message was edited by: RoboWizard - Corrected Willam's name.

Report · Oct 15, 2009

I might have solved this – I needed to increase the line spacing so that the entire image appears.

Thanks.

Report · Oct 16, 2009

Hi,

Does it work, or do you need some help?

Greet,

Willam

Report · Oct 16, 2009

William:

Thank you for all of your assistance. I got it working - in a fashion. I am having difficulty with the formatting. The text does not wrap properly and I often have to make adjustments so that the whole image appears. It is very frustrating to say the least. I am not that happy with the results and I might just forgo the use of images.

Thanks again for the suggestions.

Report · Oct 16, 2009

Hi,

If you want, you can post your css, a topic and the image on the forum and I'll have a look.

Greet,

Willam

Report · Oct 16, 2009

Willam:

Thanks for the offer. One of the issues I have encountered is that the url for the image changes and then the image no longer appears. For example, I specify url("Note.png") and when I save the css the path is updated to url("../../Note.png"). Also, as I discussed previously, the formatting for multi-line entries is a bit wonky:

It would be nice to have the text alligned to the left.

Here is how the entry currently appears for this style:

p.Note {

margin-right: 0.000pt;

text-align: left;

margin-bottom: 9.000pt;

word-spacing: 0.250em;

font-family: Arial;

font-style: normal;

font-weight: normal;

color: #000000;

letter-spacing: 0.00em;

font-size: 11pt;

text-indent: 0.4in;

margin-left: 0.4in;

x-next-class: Body;

x-next-type: p;

margin-top: 9pt;

background: url("Note.png") no-repeat left top;

padding-left: 25px;

margin-left: 18pt;

line-height: 33pt;text-decoration: none;

Message was edited by: Captiv8r - Corrected Willam's name - again

Report · Oct 16, 2009

Hi,

It became a bit long, so hang on:

1. If the URL is Notep.png, the image has to be in the same directory as the style sheet.

2. Your indentaion problem comes from the following elements:

text-indent: 0.4in;

margin-left: 0.4in;

padding-left: 25px;

margin-left: 18pt;

3. Remove these lines and replace with:

margin-left: 2px; /*Set the number of pixels the paragraph (including the picture) is indented on the left*/

padding-left: 25px; /*Set after how many pixels the text should appear.*/

4. Change both pixel values to suit your needs.

Explanation: The margin-left properties defines how many pixels/point from the left margin the paragraph should begin. See a paragraph as a block. The block starts at 2px from the left site and the background image is placed inside the block.

The padding defines how many pixels/points from the start of the block, the text should begin. If the margin is 2px and the padding is 25px, the text starts at 27px from the left margin. You use this to let the text start after the image. If your image is 30px width, change the padding to something like 35px.

If you type without pressing enter, the text should now align normally.

Now to the bottom and top margins: You image has a certain height and you have to make sure that your image fits. The line-height sets the height of the text line, every line will have a height of 33pts. What you want is not the line-height, but the margin from the paragraph so your image will always fit.

5. Remove line-height: 33pt;

6. Since you have already specified a margin-top and a margin-bottom, test if your image is now correct.

Greet,

Willam

Report · Oct 16, 2009

Willam

Thank you again for providing such a thorough solution. I have managed to align the text (thank you), but the bottom portion of the image is cut off. I have been tweaking margin-top and margin-bottom with no success. Suggestions welcome.

By the way, should this not be a lot easier to implement?

Message was edited by: Captiv8r - Corrected Willam's name - again.

Report · Oct 16, 2009

Well, in Robo8, you may have the possibility to add background images from the Robo css editor, I'll check this tonight and come back to you.

For now, doing it through CSS may be a process of trial and error. For now, try adding the following line to your style:

height: 25px; (the height of your image)

Greet,

Willam

Report · Oct 16, 2009

Thanks. Unfortunately, the solution for one style does not appear to work for another. I changed the settings of another style as you suggested and now the lower portion of the image has disappeared. sigh.

Report · Oct 16, 2009

Hi,

First some 'bad' news: I cannot find an option to add a background image for a paragraph trough the Robo8 style editor. You may want to post that as a feature request.

Every paragraph you create, you wil have to style in your css and it's a bit of trial and error. One major advantage: Whenever you need to change the picture, it'll only be a matter of minutes!

If you need some more help with your css, just post back.

Greet,

Willam

Report · Oct 16, 2009

Thanks William. Trial and error is correct. Thanks for all of the help. It seems to be working - for now.

Message was edited by: Captiv8r - Once more, corrected Willam's name.

Report · Oct 16, 2009

Willam:

I solved it. I tweaked the padding-left value and it fixed the clipped image issue. It's not very intuitive to adjust the padding-left value to make the image visible!

Thanks so much for your help.

Message was edited by: Captiv8r - Hopefully a final correction of Willam's misspelled name. 😉

Adobe Community

Adding a Custom Image to a Style

1 Correct answer