Copy link to clipboard
Copied
I use RH 11. I want all images bordered in the same way. I try to use CSS for that but it does not work. What do I do wrong?,
Aart Korstjens
the Netherlands
Copy link to clipboard
Copied
HI there
This was originally posted in the WinHelp forum. RoboHelp 11 doesn't "do" WinHelp as it's really old technology, so I moved the thread to the RoboHelp HTML forum. ![]()
It might help if you described exactly what you have tried here. I mean, other than saying "you tried to use CSS and it didn't seem to work". What exactly did you try using CSS? How exactly do you want the border to appear? Do you have an example we can see? If so, upload it as an image here in the forums (don't just reply by email and attach, visit the thread using your browser and upload that way). Or perhaps point us to a link where we can see what you want to accomplish.
Cheers... Rick ![]()
Copy link to clipboard
Copied
Congratuations to the poster for the longest title this year. ![]()
Being serious, I would like to ask people to keep the title minimal and worded to hit the nub of the problem. It helps people searching in the future.
See www.grainge.org for RoboHelp and Authoring tips

Copy link to clipboard
Copied
The problem here is that RoboHelp adds inline styling to the image to remove all borders. To solve this, either remove the inline border from all images (lots of work if you do it manually) or override the border style in the CSS:
img { border: 1px solid blue !important}
This overrides the inline styling of the images and will force a border.
Kind regards,
Willam
Copy link to clipboard
Copied
Did you try creating an image style from the Styles and Formatting pod?
See www.grainge.org for RoboHelp and Authoring tips

Copy link to clipboard
Copied
First I tried to use the Format/Styles/Image/Edit option. I added a new style an I can add borders there, but there are no border automaticaly added when I insert a new image in any topic.
Next using Dreamweaver I created a new CSS rule for the images. I used Dreamweaver because in RH11 I cannot add a CSS rule.
It looks like this:
}
Img {
Border: 3px solid #00C;
}
Both options gave no automatic borders for every image in the project.
Last but not least I added borders manually for every image again by using the Image properties.
Copy link to clipboard
Copied
Sorry, I forgot to tell I added that new CSS rule in the default.css file
Copy link to clipboard
Copied
You can do anything from with the CSS from Rh. Right click on the CSS to be edited in Project Manager and select View. It will than open the CSS in your default CSS editor.
See www.grainge.org for RoboHelp and Authoring tips

Copy link to clipboard
Copied
Oké Peter,
I can open the CSS right from Rh11. I used that editor before but I cannot see CSS rules there. BTW, it opens also with a double click.
But even when I format the imageborders there, it does not solve my problem. Still no "automatic" borders for every image in any topic.
I still have to add borders manually for every image in the entire topic. Curious to see the project in WebHelp? Go to help.stentec.com/voyager14
Aart Korstjens
the Netherlands
Copy link to clipboard
Copied
I thought you had manually edited in Dreamweaver but I'm now thinking you were using its tools.
However, double click is not the same thing as View. Try it. View opens the CSS in your machines default CSS editor. In my case that is Top Style. View With gives an HTML Editor option that opens the CSS in the Design Editor.
Your image shows how to create an image style but that's all it will do, create a style. It will not be automatically applied to existing images.
When you add an image, the HTML is
<img src="yourfilename.png" alt="" style="border: none;" border="0" />
After apply the class you create, it would be
<img src="yourfilename.png" alt="" class="yourclassname" border="0" />
So the class border is getting overridden by the inline border, as Willam pointed out.
Willam has given the fix for that. Note the use of !important.
img { border: 1px solid blue !important}
I just added that line to a CSS and now all the images in my project have that border.
See www.grainge.org for RoboHelp and Authoring tips

Copy link to clipboard
Copied
That border might not survive the journey to Printed Documentation if you have to create that output.
See www.grainge.org for RoboHelp and Authoring tips

Copy link to clipboard
Copied
And you need to apply the fix in your CSS manually. That's the only caveat here.
Kind regards,
Willam
Copy link to clipboard
Copied
Peter and Willam,
I made a new blank project for a test. I made a new CSS class-rule named .image and saved the CSS. (1)
I inserted an image in the first topic and the HTML looks like this. (2)
I closed the project with the hope that when I open it again the border lines would be visible but the were NOT.
When I manually change the HTML line like this, nothing happens. (3)
When I delete the last part, it finally looks like I wanted. (4)
But only when I manually change the HTML rule for each image!
Probably still I do something wrong but I don't know what/where!
Aart
Thnx for being patient!
Copy link to clipboard
Copied
Please try the line Willam and I have provided first. It may not be what you want but we know that one works. Then it can be fine tuned.
See www.grainge.org for RoboHelp and Authoring tips

Copy link to clipboard
Copied
This rule works. And now the fine-tuning.I changed the border in "double" in stead of solid and I added margins.
I try to use the CSS editor for that but I found out that I have to use the HTML editor because it is a style and not a class. When I make the rule a class (adding a dot before the name) it does not work.
Still working on it!
Aart
Find more inspiration, events, and resources on the new Adobe Community
Explore Now