Skip to main content
prairiewriter
prairiewriter
Known Participant
October 14, 2009
Answered

Adding a Custom Image to a Style

  • October 14, 2009
  • 1 reply
  • 1910 views

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.

    This topic has been closed for replies.
    Correct answer Willam van Weelden

    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.


    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

    1 reply

    Willam van Weelden
    Willam van Weelden
    Inspiring
    October 15, 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

    prairiewriter
    prairiewriterAuthor
    Known Participant
    October 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.

    Willam van Weelden
    Willam van WeeldenCorrect answer
    Inspiring
    October 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.


    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices