Copy link to clipboard
Copied
Can anyone see why this isn't working?
I have just added border radiuses (radii?) to the default stylesheet using notepad:
p.Img {
border-left-style: Solid;
border-right-style: Solid;
border-top-style: Solid;
border-bottom-style: Solid;
border-left-color: #adadad;
border-right-color: #adadad;
border-top-color: #adadad;
border-bottom-color: #adadad;
moz-border-radius: 15px;
border-radius: 15px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
border-left-width: 7px;
border-right-width: 7px;
border-top-width: 7px;
border-bottom-width: 7px;
}
But my borders remain stubbornly unrounded - anyone any ideas?
Thanks
Copy link to clipboard
Copied
Just to be clear, the two lines actually added were:
moz-border-radius: 15px;
border-radius: 15px;
cheers,
Copy link to clipboard
Copied
Hi,
For Mozilla:
-moz-border-radius: 15px;
Include the dash before "moz".
For Safari/Chrome:
-webkit-border-radius: 15px;
For IE9/Opera 10+:
border-radius: 15px;
For IE8 and lower: Too bad. They don't support border radius.
For more information, see http://www.css3.info/preview/rounded-border/
Greet,
Willam
Typo in border-radius
Copy link to clipboard
Copied
Hi - that has helped but now further problems have arisen...
How do I add an img tag to the css so that Robohelp will pick it up? All I want is an img style that adds a grey, round edged border to my images and it seems to be incredibly tricky!
At the moment I am using a p.img class in the stylesheet but that is unreliable depending on the size of the image...
Can anyone help on this?
Thanks
Copy link to clipboard
Copied
Hi,
You can simply style the image itself. For instance, if you use:
img {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
you give all images a border radius of 15 pixels. I'd say that you simply take the border styles from your paragraph definition and put them in an image style.
If you only want to style certain images, create an image class, add the styling for that class and apply the class to the images in HTML mode:
<img src="myimg.png" class="border" />
img.border {
/* Border style here */
}
Greet,
Willam
Copy link to clipboard
Copied
You see, this is what I figured but I just can't get it to work. I add this to my .css file:
img {
border-left-style: Solid;
border-right-style: Solid;
border-top-style: Solid;
border-bottom-style: Solid;
border-left-color: #adadad;
border-right-color: #adadad;
border-top-color: #adadad;
border-bottom-color: #adadad;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
text-align: left;
margin-left: 0px;
x-next-class: Caption;
x-next-type: p;
margin-right: 0px;
border-left-width: 7px;
border-right-width: 7px;
border-top-width: 7px;
border-bottom-width: 7px;
}
Go back into Robohelp, insert an image, nothing happens. No border at all. Any thoughts?
Thanks again...
Copy link to clipboard
Copied
No surprise that RoboHelp doesn't show it. Try generating your output and see if your styles are correct in your output.
Also, I doubt that your curved borders will show if you create HTML Help output.
Greet,
Willam
Copy link to clipboard
Copied
William has figured out the issue via email, I'll post it here in case it comes up again for anyone...
As for the borders of the images, RoboHelp automatically disables the borders of images you insert into your topics. You can override this setting in your css with the !important declaration. Try replacing your current style with:
img {
border: 7px solid #adadad !important ;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
The !important declaration tells the browser that this style is more important than any inline styling or user defined styling. This allows your style sheet to overwrite those RoboHelp inline styles.
Thanks for all the help,
Paul