Customize Default Font - SharePoint 2010 Rad Editor for Lists

[Cecil]

I have perused your documentation. Please can you tell me the specific file location/path to place the custom CSS file and the specific syntax to update the ListConfig.xml so as to point to the new CSS file.

Thank you

[Ianko]

Hello Cecil,

Thank you for contacting us about your concerns with our product. You could follow the information described in this documentation article, about using custom CSS styles for the RadEditor in SharePoint.

Let us know if you need any further assistance with this. 
 
Regards,
Ianko
Telerik

[Cecil]

The documentation that you sent me is for SharePoint 2007 and I am using SharePoint 2010.

Please see attachment for more information about my specific objective. When the user clicks in the enhanced rich text box in the list, I want the default font to be font-family: Arial font-size:8pt. Currently the default font is set to Times New Roman.

I created a file called style1.css in the following path on the WFE: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\wpresources\RadEditorSharePoint\6.6.2.0__1f131a624888eeed\Resources

Contents of style1.ss

body
{

font-family: Arial, Helvetica, sans-serif !important;
font-size: 18pt !important;

}

I edited the List

I added the following code to the ListTools.xml file:

<cssFiles>
       <item name="/_wpresources/RadEditorSharePoint/6.6.2.0__1f131a624888eeed/Resources/Styles1.css" />
</cssFiles>

I also did an iisreset but notice no changes to the default font and font size available.

[Ianko]

Hello Cecil,

Most probably the problem in your case is caused by the name of the stylesheet that is specified in the configuration file. Note that you refer to the file as style1.css and then in the ListTools file the following path is used:

<cssFiles>
       <item name="/_wpresources/RadEditorSharePoint/6.6.2.0__1f131a624888eeed/Resources/Styles1.css" />
</cssFiles>

Please change the name of the stylesheet or the reference in the configuration file so that they match and the problem should be resolved.

You could also ensure that the installed version of RadEditor for SharePoint is the same as the one in the folder's name (you can find it marked above).

If the problem persists, please follow these steps for inserting the custom CSS file:
  1. Create a CSS file with the desired style rules;
  2. Open the file ListToolsFile.xml;
  3. Add the cssFiles inner tag in the file;
  4. Include the item inner tag in cssFiles and set the name property with the path to your stylesheet, similarly to the example in the previously linked help article.
 
Regards,
Ianko
Telerik

[Cecil]

Thank you for pointing out the mistake! I have made the correction to the file.

Perhaps I am not making myself clear. Let me try again. Please see the attached document. You will see that I have configured the realfontsizes to be displayed by adding the following code to ListTools.xml
<realFontSizes>
    <item value="10px"></item>
    <item value="12px"></item>
    <item value="24px"></item>
 </realFontSizes>

These options DO show up in the enhanced rich text editor, unfortunately I still see 18pt as the selected default font size which shows when you click the ehanced rich text editor. I want the default font size to be 10px. Is there a setting where I can enable this functionality. This should be the resulting HTML for the realfontsize drop down:

<select>
    <option value="10px" selected>10px</option>
  <option value="12px">12px</option>
  <option value="24px">24px</option>
</select>

Right now, what I have is the following:
<select>
<option value="18pt" selected>18pt</option>
    <option value="10px" selected>10px</option>
  <option value="12px">12px</option>
  <option value="24px">24px</option>
</select>

Please, please refer to the attached document for clarification. Thanks for all your help so far.

[Ianko]

Hello Cecil,

When using the RealFontSizes tool for the editor the default settings for the content could be set in the CSS file directed as default in the ListToolsFile.xml.
Example:

body
{
     font-family: Arial, Helvetica, sans-serif !important;
     font-size: 10px !important;
}

You could follow as well these help articles:
 - Default Font for Editable Content;
 - Customize Content Area.

After setting the desired style rules in the CSS file if there is no change in the editor default font-size you could delete the browser cash and the cookies.

Regards,
Ianko
Telerik