How to use SSW style in RadHtmlControl?

Updated by Tiago Araújo [SSW] 1 year ago. See history

123

Do you know how to apply style to image, figure, etc?

Let's take the "AvoidReplyToAllWhenBcc" page as example. First, the reason to cause the style issue is the style doesn’t apply to right place. Below is the html code after you adjust the figure manually (sorry, still not right). Please look at the highlight part...

  • The “ms-rteCustom-ImageArea” style doesn’t apply to <img> tag, but wrapped by <span> with “ms-rteCustom-ImageArea” style;
  • There is no style apply to Figure:
<span class="ms-rteCustom-YellowBorderBox">We have a program called <a href="https://ssw.com.au/LookOut"> SSW LookOut! for Outlook</a> to check for this rule.
<br />
<span class="ms-rteCustom-ImageArea">
<img style="border-bottom: 0px solid; border-left: 0px solid; border-top: 0px solid; border-right: 0px solid;" border="0" alt="Lookout Reply All BCC Warning" src="https://ssw.com.au/LookOut/images/lookout-logo.jpg" />
<br />
</span>
<br />
Figure: SSW LookOut! for Outlook warns you if you accidentally 'Reply All' when you have been BCC'ed
  1. Not sure how user inputs the content into this page. Anyway, here is the right way to add content via Telerik Editor. Please read below example of how I redo this part in Telerik Editor without changing the code manually
Image

Figure: Copy content in the notepad

  1. Delete the current content from Telerik for a new start;
  2. Copy the first sentence from notepad and paste into Telerik Editor in the page; (please avoid copying straightly from web page and pasting them here, it will copy the all tags as well. it might affect the styles which can’t apply correctly)
Image

Figure: Start copying content over

  1. Insert the image
Image

Figure: Add a link to text

  1. Add an image
Image

Figure: Inser an image

  1. Press “enter” key to start a new row, then copy the figure from notepad to the Telerik editor area
Image

Figure: Add figure

  1. Apply image style to the image by click on the image, then choose a style from “Apply CSS Class” dropdown list
Image

Figure: Apply style to the image

  1. Apply style to the figure
Image

Figure: Apply style to the figure

9.Apply the yellow box

Image

Figure: Apply yellow border box to the content

  1. Check in the changes, then you will have - "dada.."
Image

Figure: Right style in use

acknowledgements
related rules