This is a migrated thread and some comments may be shown as answers.

Changing color in Edit Mode

26 Answers 295 Views

Editor

This is a migrated thread and some comments may be shown as answers.

26 Answers, 1 is accepted

answered on 24 May 2010, 06:17 PM

supposedtobe.png

wrongcolor.png

I attached 2 screenshots:

1. SupposedToBe.png - this is how it supposed to be (you see it in Edit Page mode, it's ok in render too)
2. WrongColor.png - The wrong color that I have in Modify Shared Web Part mode.

Any ideas?

Thank you very much.

answered on 27 May 2010, 10:55 AM

Hello Tal,

Could you confirm which version of RadEditor for MOSS are you using? Is it Light RadEditor for MOSS or Full ASP.NT AJAX RadEditor for MOSS? Also please send us the styles which you are using to decorate the links.

In addition this is an example of how to decorate global links:

a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

Greetings,
Stanimir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 30 May 2010, 10:12 AM

align.png

Hello,
I just took your example and it worked.
We only used an A tag without any extra (:visited, :link and etc').
But now we have another problem:
When we edit the Telerik Web Part, the toolbar isn't aligned with it.
The Web Part width is changing from Layout to Layout.
Attached a screenshot.
Any ideas?

Thank you very much for your quick answers

answered on 01 Jun 2010, 09:03 AM

Hello Tal Winter,

Could you confirm that you are experiencing the issue in Inernet Explorer 8.0 browser? If this is the case, you should know that the Lite version of RadEditor for MOSS is based on the classic ASP.NET RadEditor control and its latest version was released before the release of IE 8.0, so there are some inconsistencies with the control in it.

What you can do is try if adding the following tag to the head of your MOSS site will solve the issue:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

This will force the browser to render the page in IE7 comparability mode.

Greetings,
Stanimir
the Telerik team

answered on 07 Mar 2011, 09:04 AM

Would be nice if I could attach them, but I am not able to, so I copy the source here:
For your information:

I didn't change the ListConfigFile.xml and ListToolsFile.xml
I commented the DocumentPaths in the ConfigFile.xml because it doesn't work right for me
The StylesRAD.css is called bmuStylesRAD.css originally

ListConfigFile.xml:

<?xml version="1.0" encoding="utf-8" ?>

<!-- ==============================================================================================

Config File valid structure:

<configuration>

<property>...</property>

...

<property>

<item>...</item>

...

</property>

...

</configuration>

=============================================================================================== -->

<configuration>

<property name="EditModes">Design,Html</property>

<property name="Height">240px</property>

<property name="Width">500px</property>

</configuration>

ListToolsFile.xml:

<root>

<tools name="EnhancedToolbar">

<tool name="Cut" shortcut="CTRL+X" />

<tool name="Copy" shortcut="CTRL+C" />

<tool name="Paste" shortcut="CTRL+V" />

<tool name="FormatStripper" />

<tool separator="true" />

<tool name="Undo" shortcut="CTRL+Z"/>

<tool name="Redo" shortcut="CTRL+Y"/>

<tool separator="true" />

<tool name="MOSSInsertTable" />

<tool name="MOSSInsertTableElement">

<tool name="InsertRowAbove" />

<tool name="InsertRowBelow" />

<tool name="InsertColumnLeft" />

<tool name="InsertColumnRight" />

</tool>

<tool name="MOSSDeleteTableElement">

<tool name="DeleteRow" />

<tool name="DeleteColumn" />

</tool>

<tool name="SplitCell" />

<tool name="MergeColumns" />

<tool separator="true" />

<tool name="MOSSLinkManager" />

<tool name="ImageManager" />

</tools>

<tools name="BasicToolbar">

<tool name="FontName" />

<tool name="FontSize" />

<tool separator="true" />

<tool name="Bold" shortcut="CTRL+B" />

<tool name="Italic" shortcut="CTRL+I" />

<tool name="Underline" shortcut="CTRL+U" />

<tool separator="true" />

<tool name="JustifyLeft" shortcut="CTRL+L" />

<tool name="JustifyCenter" shortcut="CTRL+E" />

<tool name="JustifyRight" shortcut="CTRL+R" />

<tool separator="true" />

<tool name="InsertOrderedList" />

<tool name="InsertUnorderedList" />

<tool name="Indent" />

<tool name="Outdent" shortcut="CTRL+M" />

<tool separator="true" />

<tool name="ForeColor" />

<tool name="BackColor" />

<tool separator="true" />

<tool name="MOSSLeftToRight" />

<tool name="MOSSRightToLeft" />

</tools>

<contextMenus>

<contextMenu forElement="*">

<tool name="Cut"/>

<tool name="Copy"/>

<tool name="Paste"/>

</contextMenu>

</contextMenus>

</root>

ToolsFile.xml:

<root>

<modules>

</modules>

<tools name="MainToolbar">

<tool name="AjaxSpellCheck"/>

<tool name="FindAndReplace" shortcut="CTRL+F"/>

<tool name="Cut" />

<tool name="Copy" shortcut="CTRL+C"/>

<tool name="Paste" shortcut="CTRL+V"/>

<tool name="PasteStrip"/>

<tool separator="true"/>

<tool name="Undo" shortcut="CTRL+Z"/>

<tool name="Redo" shortcut="CTRL+Y"/>

</tools>

<tools name="InsertToolbar" >

<tool name="MOSSImageManager" shortcut="CTRL+G"/>

<tool name="AbsolutePosition" />

<tool separator="true"/>

<tool name="FlashManager" />

<tool name="MediaManager" />

<tool name="DocumentManager" />

<tool separator="true"/>

<tool name="LinkManager" shortcut="CTRL+K"/>

<tool name="Unlink" shortcut="CTRL+SHIFT+K"/>

</tools>

<tools>

<tool name="FormatBlock"/>

<tool name="FontName" shortcut="CTRL+SHIFT+F"/>

<tool name="RealFontSize" shortcut="CTRL+SHIFT+P"/>

</tools>

<tools>

<tool name="Superscript" />

<tool name="Subscript" />

<tool name="InsertParagraph" />

<tool name="InsertHorizontalRule" />

<tool name="InsertDate" />

<tool name="InsertTime" />

</tools>

<tools>

<tool name="ForeColor"/>

<tool name="BackColor"/>

<tool name="FormatStripper"/>

</tools>

<tools name="DropdownToolbar">

<tool name="InsertSymbol"/>

<tool name="InsertTable"/>

<tool name="InsertFormElement" />

<tool name="ImageMapDialog"/>

<!--<tool name="InsertCustomLink" shortcut="CTRL+ALT+K"/>

<tool separator="true"/>

<tool name="ConvertToLower" />

<tool name="ConvertToUpper" />-->

<tool separator="true"/>

<tool name="Help" shortcut="F1"/>

<tool name="Zoom"/>

<tool name="ToggleScreenMode" shortcut="F11"/>

</tools>

<tools>

<tool name="Bold" shortcut="CTRL+B"/>

<tool name="Italic" shortcut="CTRL+I"/>

<tool name="Underline" shortcut="CTRL+U"/>

<tool name="StrikeThrough" />

<tool separator="true"/>

<tool name="JustifyLeft" />

<tool name="JustifyCenter" />

<tool name="JustifyRight" />

<tool name="JustifyFull" />

<tool name="JustifyNone" />

<!-- <tool separator="true"/>

<tool name="LineDistance1" />

<tool name="LineDistance15" />

<tool name="LineDistance2" />-->

<tool separator="true"/>

<tool name="Indent" />

<tool name="Outdent" />

<tool separator="true"/>

<tool name="InsertOrderedList" />

<tool name="InsertUnorderedList" />

<tool name="ToggleTableBorder" />

<tool separator="true"/>

<tool name="SelectAll" shortcut="CTRL+A"/>

</tools>

<contextMenus>

<contextMenu forElement="*">

<tool name="Cut"/>

<tool name="Copy"/>

<tool name="Paste"/>

</contextMenu>

<contextMenu forElement="IMG">

<tool Name="SetImageProperties" />

<tool Name="ImageMapDialog" />

</contextMenu>

<contextMenu forElement="TABLE">

<tool Name="ToggleTableBorder" />

<tool Name="SetTableProperties" />

<tool Name="DeleteTable" />

</contextMenu>

<contextMenu forElement="TD">

<tool Name="InsertRowAbove" />

<tool Name="InsertRowBelow" />

<tool Name="DeleteRow" />

<tool Name="InsertColumnLeft" />

<tool Name="InsertColumnRight" />

<tool Name="MergeColumns" />

<tool Name="MergeRows" />

<tool Name="SplitCell" />

<tool Name="DeleteCell" />

<tool Name="SetCellProperties" />

</contextMenu>

<contextMenu forElement="A">

<tool Name="SetLinkProperties" />

<tool Name="Unlink" />

</contextMenu>

<contextMenu forElement="BODY">

<tool name="ForeColor"/>

<tool name="BackColor"/>

<tool name="Bold" shortcut="CTRL+B"/>

<tool name="Italic" shortcut="CTRL+I"/>

<tool name="Underline" shortcut="CTRL+U"/>

<tool name="StrikeThrough" />

<tool Name="Cut" />

<tool Name="Copy" />

<tool Name="Paste" />

<tool Name="PasteFromWord" />

<tool Name="PastePlainText" />

<tool Name="PasteAsHtml" />

</contextMenu>

<contextMenu forElement="P">

<tool name="ForeColor"/>

<tool name="BackColor"/>

<tool name="Bold" shortcut="CTRL+B"/>

<tool name="Italic" shortcut="CTRL+I"/>

<tool name="Underline" shortcut="CTRL+U"/>

<tool name="StrikeThrough" />

</contextMenu>

</contextMenus>

<symbols>

<symbol value="€" />

<symbol value="©" />

<symbol value="®" />

<symbol value="™" />

<symbol value="±" />

<symbol value="≠" />

<symbol value="≈" />

<symbol value="≤" />

<symbol value="≥" />

<symbol value="÷" />

<symbol value="×" />

<symbol value="∞" />

<symbol value="½" />

<symbol value="¼" />

<symbol value="¾" />

<symbol value="²" />

<symbol value="³" />

<symbol value="‰" />

<symbol value="§" />

<symbol value="º" />

<symbol value="«" />

<symbol value="»" />

<symbol value="ñ" />

<symbol value="Ñ" />

<symbol value="ą" />

<symbol value="Ć" />

<symbol value="ć" />

<symbol value="ę" />

<symbol value="Ł" />

<symbol value="ł" />

<symbol value="ń" />

<symbol value="Ś" />

<symbol value="ś" />

<symbol value="Ź" />

<symbol value="ź" />

<symbol value="Ż" />

<symbol value="ż" />

<symbol value="Č" />

<symbol value="č" />

<symbol value="Ď" />

<symbol value="ď" />

<symbol value="Ě" />

<symbol value="ě" />

<symbol value="Ň" />

<symbol value="ň" />

<symbol value="Ř" />

<symbol value="ř" />

<symbol value="Š" />

<symbol value="š" />

<symbol value="Ť" />

<symbol value="ť" />

<symbol value="Ů" />

<symbol value="ů" />

<symbol value="Ž" />

<symbol value="ž" />

</symbols>

<colors>

<color value="#FFFFFF" title="Weiss" />

<color value="#DDDDDD" title="Grau 1" />

<color value="#AAAAAA" title="Grau 2" />

<color value="#666666" title="Grau 3" />

<color value="#000000" title="Schwarz" />

<color value="#E7EBF7" title="Blau" />

<color value="#F3E03B" title="Gelb" />

<color value="#CC0000" title="BMU Rot" />

<color value="#FF6600" title="BMU Orange" />

<color value="#9BC73B" title="BMU Gruen 100" />

<color value="#AED161" title="BMU Gruen 80" />

<color value="#C2DD88" title="BMU Gruen 60" />

<color value="#D6E8AF" title="BMU Gruen 40" />

<color value="#EAF3D7" title="BMU Gruen 20" />

</colors>

<paragraphs>

<paragraph name="<p class='bmustylescustom-ueberschrift'>BMU Überschrift</p>" value="p class='bmustylescustom-ueberschrift'" />

<paragraph name="<p class='bmustylescustom-teilueberschrift'>BMU Teilüberschrift</p>" value="p class='bmustylescustom-teilueberschrift'" />

<paragraph name="<p class='bmustylescustom-text'>BMU Text</p>" value="p class='bmustylescustom-text'" />

<!--<paragraph name="Normal" value="p" />

<paragraph name="<H1>Überschrift 1</H1>" value="H1" />

<paragraph name="<H2>Überschrift 2</H2>" value="H2" />

<paragraph name="<H3>Überschrift 3</H3>" value="H3" />

<paragraph name="<H4>Überschrift 4</H4>" value="H4" />

<paragraph name="<H5>Überschrift 5</H5>" value="H5" />

<paragraph name="<address>Adresse</address>" value="address" />-->

</paragraphs>

<fontNames>

<item name="Verdana" />

<item name="Arial" />

</fontNames>

<realFontSizes>

<item value="10pt"></item>

<item value="12pt"></item>

<item value="14pt"></item>

<item value="16pt"></item>

<item value="18pt"></item>

<item value="20pt"></item>

</realFontSizes>

<cssFiles>

<item name="/_wpresources/RadEditorSharePoint/5.8.6.0__1f131a624888eeed/Resources/bmuStylesRAD.css" />

</cssFiles>

</root>

ConfigFile.xml:

<?xml version="1.0" encoding="utf-8" ?>

<!-- ==============================================================================================

Config File valid structure:

<configuration>

<property>...</property>

...

<property>

<item>...</item>

...

</property>

...

</configuration>

=============================================================================================== -->

<configuration>

<property name="ToolbarMode">ShowOnFocus</property>

<property name="ToolsWidth">520px</property>

<!-- <property name="DocumentsPaths">

<item>/DocumentsLibrary</item>

</property>-->

<property name="DocumentsFilters">

<item>*.*</item>

</property>

<!-- <property name="FlashPaths">

<item>/</item>

</property>-->

<property name="FlashFilters">

<item>*.sw*</item>

<item>*.flv</item>

</property>

<!-- <property name="MediaPaths">

<item>/</item>

</property>-->

<property name="MediaFilters">

<item>*.mp*</item>

<item>*.wmv</item>

</property>

<property name="SpellDictionaryLanguage">de-DE</property>

</configuration>

bmuStylesRAD.css:

body{font-family:Verdana,sans-serif !important; font-size:0.7em !important;}

a, a:visited, a:active{color:#000000; border-bottom:1px dotted #000000; text-decoration:none;}

a:hover{border-bottom:none; color:#000000; text-decoration:underline;}

.bmustylescustom-ueberschrift{font-family:Verdana;font-size:12pt;color:#000000;font-weight:bold;}

.bmustylescustom-teilueberschrift{font-family:Verdana;font-size:10pt;color:#000000;font-weight:bold;}

.bmustylescustom-text{font-family:Verdana;font-size:10pt;color:#000000;}

answered on 14 Mar 2011, 08:52 AM

textAfterHTMLView.jpg

HTMLView.jpg

ownParagraphStyles.jpg

textAfterClickingParagraphStyle.jpg

Hello,

First: Thanks for this great support!
Thanks for this help and the video but this wasn't my problem anymore :) I solved it by deleting the temporary files. Then everything worked fine.

My current problem is: I have got own Paragraph styles (see picture attached: ownParagraphStyles). So if I click for example the first one nothing is shown (see pciture attached: textAfterClickingParagraphStyle). If I switch to HTML-View the changes are made (see picture attached: HTMLView) and if I change back to Design view the changes are made (see picture attached: textAfterHTMLView). So I guess there is a problem refreshing the page. Do you know what I mean? The CSS class is defined in bmuStylesRAD.css.

answered on 17 Mar 2011, 07:51 AM

Hi Henrik,

Here is how your paragraph setting should looks like:

<paragraphs>
   <paragraph name="<p class='bmustylescustom-ueberschrift'>BMU Überschrift</p>" value="<p class='bmustylescustom-ueberschrift'>" />
   <paragraph name="<p class='bmustylescustom-teilueberschrift'>BMU Teilüberschrift</p>" value="<p class='bmustylescustom-teilueberschrift'>" />
   <paragraph name="<p class='bmustylescustom-text'>BMU Text</p>" value="<p class='bmustylescustom-text'>" />
</paragraphs>

Greetings,
Stanimir
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

answered on 21 Mar 2011, 09:12 AM

Hello,

my original paragraph styles look like this:

<paragraphs>
    <paragraph name="<p class='bmustylescustom-ueberschrift'>BMU Überschrift</p>" value="<p class='bmustylescustom-ueberschrift'>" />
    <paragraph name="<p class='bmustylescustom-teilueberschrift'>BMU Teilüberschrift</p>" value="<p class='bmustylescustom-teilueberschrift'>" />
    <paragraph name="<p class='bmustylescustom-text'>BMU Text</p>" value="<p class='bmustylescustom-text'>" />
</paragraphs>

The "format code block" of this editor here changed it the way you see it above.
It is the same like yours with one difference (bold). If I do it your way nothing happens. No changes are made. If I do it my way the changes are made if I switch between Design and HTML View.
Do you understand my problem?

answered on 04 Apr 2011, 08:41 AM

I guess I know where the problem is but at first: Thanks for the great support.
You linked the css in the Masterpage but I didn't link there. I am using the cssFiles tag in the ToolsFile.xml to link to the css.

<cssFiles>

<item name="/_wpresources/RadEditorSharePoint/5.8.7.0__1f131a624888eeed/Resources/bmuStylesRAD.css" />

</cssFiles>

So if I set the style and switch between HTML and Design the changes are made but if I check in the site nothing is set. So I added the three css-classes to my css in my SharePoint-Solution. You understand? I have got a seperat solution to customize my SharePoint and I added the css-classes in the css there to keep the changes on a checked-in site.

I guess that's the main difference. You added the css in the Masterpage. Could you link the css in the ToolsFile.xml? Shall I provide several files?

answered on 05 Apr 2011, 11:15 AM

Hello Henrik,

The main thing is to understand that the RadEditor's content area and the page where the editor is loaded have different documents, so separate styles are loaded in each of them. You need to make sure that the styling in both of them is the same. What I suggest you to do is use a tool such as developer toolbar for IE or Firebug plugin for FireFox (you start both tools by pressing F12) and check what is the styling of the content in presentation mode. Then add this styles in the editor's content area. Here are to screen shots which you might find helpful: http://screencast.com/t/P07bpxNxEab, http://screencast.com/t/1lvrLBROc7.

Best wishes,
Stanimir
the Telerik team

answered on 03 May 2011, 11:12 AM

To summarize my problem:

I have got a SharePoint solution, which includes a CSS file with following lines:

/*custom-styles for RTE*/

.BMUStylesCustom-Ueberschrift{font-family:Verdana;font-size:12pt;color:#000000;font-weight:bold;}

.BMUStylesCustom-Teilueberschrift{font-family:Verdana;font-size:10pt;color:#000000;font-weight:bold;}

.BMUStylesCustom-Text{font-family:Verdana;font-size:10pt;color:#000000;}

/*für RAD Editor*/

.bmustylescustom-ueberschrift{font-family:Verdana;font-size:12pt;color:#000000;font-weight:bold;}

.bmustylescustom-teilueberschrift{font-family:Verdana;font-size:10pt;color:#000000;font-weight:bold;}

.bmustylescustom-text{font-family:Verdana;font-size:10pt;color:#000000;}

The last three lines are important. This css is deployed in a wsp file with alle other files like Masterpages and PageLayouts. So this one takes effect.

So then I have got a css file in another solution: The RadEditor solution. This css customizes the content area of the RAD. I also implemented the css for the paragraph styles with the following lines:

.bmustylescustom-ueberschrift{font-family:Verdana;font-size:12pt;color:#000000;font-weight:bold;}

.bmustylescustom-teilueberschrift{font-family:Verdana;font-size:10pt;color:#000000;font-weight:bold;}

.bmustylescustom-text{font-family:Verdana;font-size:10pt;color:#000000;}

As you can see these lines are equal to the three ones above.
So if I set a paragraph style the paragraph is set. Because the ToolsFile.xml defines ist:

<paragraphs>
    <paragraph name="<p class='bmustylescustom-ueberschrift'>BMU Überschrift</p>" value="p class='bmustylescustom-ueberschrift'" />
    <paragraph name="<p class='bmustylescustom-teilueberschrift'>BMU Teilüberschrift</p>" value="p class='bmustylescustom-teilueberschrift'" />
    <paragraph name="<p class='bmustylescustom-text'>BMU Text</p>" value="p class='bmustylescustom-text'" />
</paragraphs>

It is set right, but nothing is shown. The css is available and the HTML code is changed. If I change the view to HTML and then back to Design the changes are shown. I don't know why.
If I check in the site the style is also show because the css styles are also available in the other CSS file.

But why are the changes are not made immediatly?

answered on 05 May 2011, 02:54 PM

Hi Henrik,

Here is what I suggest you to do.

You can find how exactly the styling is applied by using a debugging tool such as IE developers toolbar for Internet Explorer or FireBug for Firefox. For a certain element you can trace exactly what classes are applied and in which file they are declared.

If you do not manage to find the problem with the debugging tools, open an official support ticket and if it is possible provide me with a live URL, where I can actually see the problem. A small video of how to reproduce it will be of great help also (I personally use jing for screen cast - it has functionality to upload the image so you can provide me with a url without the need to upload it in our support system).

Kind regards,
Stanimir
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Changing color in Edit Mode

26 Answers, 1 is accepted