Picture Frame

[br0wser]

Hi all,
as I am quite new in the area of customizing oxygen I would need your help, as the person who setup oxygen for us left the company.
We try to add frames arround every picture in the PDF as well as in the webhelp.
For the PDF I was able to change headers etc. I did this in the file custom_print.css. Is this also the correct place to define frames for pictures? If so, how would I do this? Couldn't find any command in the online help for this.
https://www.oxygenxml.com/doc/versions/ ... mages.html

For the webhelp we also have a file custom_web.css. If this is the correct place for framinig pictures and how would the command look like?
I tried to add the command to th css file from this topic but did not work
post37436.html

Thanks for your help.
Nico

[chrispitude]

Hi Nico,

There is no strict convention for CSS file names, so the names your company is using will differ from the names other companies use.

Let's start with a simple experiment to make sure your WebHelp CSS is being used. If you add this simple setting:

Code: Select all

p { background-color: yellow; }

do your paragraphs turn yellow?

[br0wser]

Hi chrispitude,

thanks for your help.
Yes parapgraphs are shown yellow in the webhelp after I entered your statement in the custom_web.css file.

grafik.png

Let me know how to proceed.

BR,
Nico

[chrispitude]

Okay, that tells you that your CSS modifications are making their way to the WebHelp output.

Now try adding the following to your WebHelp CSS:

Code: Select all

.figure img {
    padding: 20px !important;
    background-color: yellow !important;
    border: 10px solid black !important;
}

and let us know what results you get.

[br0wser]

The change did not not have any impact. Images look like before in the webhelp.

[chrispitude]

Hmm. Maybe you can use your browser's inspector feature to see what's going on. Here is some documentation on how to identify element selectors:

How to Use CSS Styling to Customize the Output

Also, here is a section of one of the online training videos showing the browser inspector in action:

Webinar: Techniques for Customizing the WebHelp Responsive Output - CSS Styling