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

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?, 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?, I u

New Here ,
Aug 23, 2014 Aug 23, 2014

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

598
Translate
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 ,
Aug 23, 2014 Aug 23, 2014

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

Translate
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
Community Expert ,
Aug 24, 2014 Aug 24, 2014

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

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
Translate
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 ,
Aug 26, 2014 Aug 26, 2014

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

Translate
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
Community Expert ,
Aug 26, 2014 Aug 26, 2014

Did you try creating an image style from the Styles and Formatting pod?


See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
Translate
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
New Here ,
Aug 30, 2014 Aug 30, 2014

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.

Translate
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
New Here ,
Aug 30, 2014 Aug 30, 2014

Sorry, I forgot to tell I added that new CSS rule in the default.css file

Translate
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
Community Expert ,
Aug 31, 2014 Aug 31, 2014

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

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
Translate
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
New Here ,
Sep 01, 2014 Sep 01, 2014

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.

Knipsel.PNG

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

Translate
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
Community Expert ,
Sep 01, 2014 Sep 01, 2014

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

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
Translate
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
Community Expert ,
Sep 01, 2014 Sep 01, 2014

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

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
Translate
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 01, 2014 Sep 01, 2014

And you need to apply the fix in your CSS manually. That's the only caveat here.

Kind regards,

Willam

Translate
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
New Here ,
Sep 02, 2014 Sep 02, 2014

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

I inserted an image in the first topic and the HTML looks like this. (2)2.PNG

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

When I delete the last part, it finally looks like I wanted. (4) 4.PNG

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!

Translate
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
Community Expert ,
Sep 02, 2014 Sep 02, 2014

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

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
Translate
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
New Here ,
Sep 03, 2014 Sep 03, 2014
LATEST

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

Translate
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