CSS Class Layout Tool

9 posts, 1 answers
  1. Kostas Tsigounis
    Kostas Tsigounis avatar
    3 posts
    Member since:
    Mar 2010

    Posted 02 Mar 2010 Link to this post

    Hello,

    We are currently in the process of evaluating RadEditor in order to use it in a  MOSS 2007 Publishing project.
    Functionality fits our project needs but there are some issues that need clarification.

    The version I have deployed on our MOSS Server is RadEditorMOSS 5.6.2.0 and I am using a RadHtmlField embedded in a Page Layout.

    I would like to verify the following things regarding Tables:

    1. In Table Wizard: Table Properties: CSS Class Layout , there is a drop down with pre-defined styles. Is it possible to create your own custom styles that apply to tables, and how is this done?

    2. In the following RadEditor Demo (http://demos.telerik.com/aspnet-ajax/editor/examples/tablelayoutcssfile/defaultcs.aspx)
    , when you click on an element of a table, on the bottom of the editor, some choices on setting the element's style appear. Does this functionality exist only in ASP.NET version of the editor, or there is a way to enable it in the MOSS version also?

    Your feedback would be very helpful.

    Regards,

    Kostas

  2. Answer
    Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 03 Mar 2010 Link to this post

    Hello Kostas,

    1. In Table Wizard: Table Properties: CSS Class Layout , there is a drop down with pre-defined styles. Is it possible to create your own custom styles that apply to tables, and how is this done? - In order to customize this drop down you need to follow this steps.
    1. Create your custom css file.
    2. Set the TableLayoutCssFile property of the editor.

    For example: First create TableLayoutCss.css file. Second copy it in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.6.2.0__1f131a624888eeed/Resources/ folder. Then add the following code to the respective ConfigFile.xml or ListConfigFile.xml (list, wiki, blog...), which are located in the same folder:
    <property name="TableLayoutCssFile">/_wpresources/RadEditorSharePoint/5.6.2.0__1f131a624888eeed/Resources/TableLayoutCss.css</property>

    2. Regarding your second question, what you need to do is add the following code to the modules element in the respective ToolsFile.xml and ListToolsFile.xml, which are located in the mentioned above folder.
    <module name="RadEditorNodeInspector" />
    More information on the editor's modules you can find in the following online help articles.
    http://www.telerik.com/help/aspnet-ajax/typesofmodules.html
    http://www.telerik.com/help/aspnet-ajax/editor_disablehidemodules.html

    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.

  3. Kostas Tsigounis
    Kostas Tsigounis avatar
    3 posts
    Member since:
    Mar 2010

    Posted 14 Mar 2010 Link to this post

    It works like a charm!

    Thank you for your help.

    Kostas
  4. amit aggarwal
    amit  aggarwal avatar
    14 posts
    Member since:
    Mar 2010

    Posted 16 Mar 2010 Link to this post

    Hi,

    This approach is not working for me...

    config file and list config file enteries are same as suggested. Still the dropdown is not populating with new css layouts.

    can somebody help me figure out what i am missing.

    Thanks in advance,
    amit.
  5. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 17 Mar 2010 Link to this post

    Hi amit ,
    Provide me with your ConfigFile.xml and the css file where your custom classes are defined.

    Kind regards,
    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.
  6. amit aggarwal
    amit  aggarwal avatar
    14 posts
    Member since:
    Mar 2010

    Posted 17 Mar 2010 Link to this post

    Hi,

    Please find below info required by you, thx for your time:

    Config File:
    <configuration>
     <property name="ToolbarMode">ShowOnFocus</property>
     <property name="ToolsWidth">500px</property>
      <property name="ExternalDialogsPath">/_wpresources/RadEditorSharePoint/5.4.0.0__1f131a624888eeed/Resources/</property>
    <property name="StripFormattingOptions">AllExceptNewLines</property>
    <property name="ToolbarMode">Default</property>
    <property name="TableLayoutCssFile">/_wpresources/RadEditorSharePoint/5.4.0.0__1f131a624888eeed/Resources/TableLayoutCss.css</property>
    </configuration>

    ListConfig File:
    <configuration>
     <property name="EditModes">Design,Html</property>
     <property name="Height">240px</property>
     <property name="Width">500px</property> 
     <property name="TableLayoutCssFile">/_wpresources/RadEditorSharePoint/5.4.0.0__1f131a624888eeed/Resources/TableLayoutCss.css</property>
    </configuration>

    tableLayoutCss:

    .redtable{
        border-width: 0px;
        border-style: none;
        border-collapse: collapse;
        font-family: Tahoma; 
    }
    .redtable tr.redtableTableHeaderRow{
        margin: 10px;
        padding: 10px;
        color: #3F4D6B;
        background: #800000;
        text-align: left;
        font-size: 10pt; 
        font-style: normal;
        font-family: Tahoma; 
        text-transform: capitalize;
        font-weight: bold;
        border-spacing: 10px;
        line-height: 14pt;
        vertical-align: top;
    }
    .redtable td.redtableTableHeaderFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .redtable td.redtableTableHeaderLastCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .redtable td.redtableTableHeaderOddCol{
        padding:0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .redtable td.redtableTableHeaderEvenCol
    {
        padding:0in 5.4pt 0in 5.4pt; color: #ffffff;
        line-height: 14pt;
    }
    .redtable tr.redtableTableOddRow{
        color: #666666;
        background-color: #F2F3F4;
        font-size: 10pt;  
        vertical-align: top;
    }
    .redtable tr.redtableTableEvenRow{
        color: #666666;
        background-color: #b3b9bf;
        font-size: 10pt;  
        vertical-align: top;
    }
    .redtable td.redtableTableFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .redtable td.redtableTableLastCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .redtable td.redtableTableOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .redtable td.redtableTableEvenCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .redtable tr.redtableTableFooterRow{
        background-color: #800000;
        color: #ffffff;
        font-weight: 500;
        font-size: 10pt; 
        font-family: Tahoma; 
        line-height: 11pt;
    }
    .redtable td.redtableTableFooterFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        border-top: solid gray 1.0pt;
        text-align: left;
    }
    .redtable td.redtableTableFooterLastCol{
        padding:0in 5.4pt 0in 5.4pt;
        border-top:solid gray 1.0pt;
        text-align:left;
    }
    .redtable td.redtableTableFooterOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }
    .redtable td.redtableTableFooterEvenCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }

    .orangetable{
        border-width: 0px;
        border-style: none;
        border-collapse: collapse;
        font-family: Tahoma; 
    }
    .orangetable tr.orangetableTableHeaderRow{
        margin: 10px;
        padding: 10px;
        color: #3F4D6B;
        background: #ff8000;
        text-align: left;
        font-size: 10pt; 
        font-style: normal;
        font-family: Tahoma; 
        text-transform: capitalize;
        font-weight: bold;
        border-spacing: 10px;
        line-height: 14pt;
        vertical-align: top;
    }
    .orangetable td.orangetableTableHeaderFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .orangetable td.orangetableTableHeaderLastCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .orangetable td.orangetableTableHeaderOddCol{
        padding:0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .orangetable td.orangetableTableHeaderEvenCol
    {
        padding:0in 5.4pt 0in 5.4pt; color: #ffffff;
        line-height: 14pt;
    }
    .orangetable tr.orangetableTableOddRow{
        color: #666666;
        background-color: #ffffff;
        font-size: 10pt;  
        vertical-align: top;
    }
    .orangetable tr.orangetableTableEvenRow{
        color: #666666;
        background-color: #ffe1c3;
        font-size: 10pt;  
        vertical-align: top;
    }
    .orangetable td.orangetableTableFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .orangetable td.orangetableTableLastCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .orangetable td.orangetableTableOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .orangetable td.orangetableTableEvenCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .orangetable tr.orangetableTableFooterRow{
        background-color: #ff8000;
        color: #ffffff;
        font-weight: 500;
        font-size: 10pt; 
        font-family: Tahoma; 
        line-height: 11pt;
    }
    .orangetable td.orangetableTableFooterFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        border-top: solid gray 1.0pt;
        text-align: left;
    }
    .orangetable td.orangetableTableFooterLastCol{
        padding:0in 5.4pt 0in 5.4pt;
        border-top:solid gray 1.0pt;
        text-align:left;
    }
    .orangetable td.orangetableTableFooterOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }
    .orangetable td.orangetableTableFooterEvenCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }

    .greentable{
        border-width: 0px;
        border-style: none;
        border-collapse: collapse;
        font-family: Tahoma; 
    }
    .greentable tr.greentableTableHeaderRow{
        margin: 10px;
        padding: 10px;
        color: #3F4D6B;
        background: #008040;
        text-align: left;
        font-size: 10pt; 
        font-style: normal;
        font-family: Tahoma; 
        text-transform: capitalize;
        font-weight: bold;
        border-spacing: 10px;
        line-height: 14pt;
        vertical-align: top;
    }
    .greentable td.greentableTableHeaderFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .greentable td.greentableTableHeaderLastCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .greentable td.greentableTableHeaderOddCol{
        padding:0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .greentable td.greentableTableHeaderEvenCol
    {
        padding:0in 5.4pt 0in 5.4pt; color: #ffffff;
        line-height: 14pt;
    }
    .greentable tr.greentableTableOddRow{
        color: #666666;
        background-color: #ffffff;
        font-size: 10pt;  
        vertical-align: top;
    }
    .greentable tr.greentableTableEvenRow{
        color: #666666;
        background-color: #cbffe5;
        font-size: 10pt;  
        vertical-align: top;
    }
    .greentable td.greentableTableFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .greentable td.greentableTableLastCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .greentable td.greentableTableOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .greentable td.greentableTableEvenCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .greentable tr.greentableTableFooterRow{
        background-color: #008040;
        color: #ffffff;
        font-weight: 500;
        font-size: 10pt; 
        font-family: Tahoma; 
        line-height: 11pt;
    }
    .greentable td.greentableTableFooterFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        border-top: solid gray 1.0pt;
        text-align: left;
    }
    .greentable td.greentableTableFooterLastCol{
        padding:0in 5.4pt 0in 5.4pt;
        border-top:solid gray 1.0pt;
        text-align:left;
    }
    .greentable td.greentableTableFooterOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }
    .greentable td.greentableTableFooterEvenCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }

    .yellowtable{
        border-width: 0px;
        border-style: none;
        border-collapse: collapse;
        font-family: Tahoma; 
    }
    .yellowtable tr.yellowtableTableHeaderRow{
        margin: 10px;
        padding: 10px;
        color: #3F4D6B;
        background: gold;
        text-align: left;
        font-size: 10pt; 
        font-style: normal;
        font-family: Tahoma; 
        text-transform: capitalize;
        font-weight: bold;
        border-spacing: 10px;
        line-height: 14pt;
        vertical-align: top;
    }
    .yellowtable td.yellowtableTableHeaderFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #000;
        line-height: 14pt;
    }
    .yellowtable td.yellowtableTableHeaderLastCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #000;
        line-height: 14pt;
    }
    .yellowtable td.yellowtableTableHeaderOddCol{
        padding:0in 5.4pt 0in 5.4pt;
        color: #000;
        line-height: 14pt;
    }
    .yellowtable td.yellowtableTableHeaderEvenCol
    {
        padding:0in 5.4pt 0in 5.4pt; color: #000;
        line-height: 14pt;
    }
    .yellowtable tr.yellowtableTableOddRow{
        color: #fff;
        background-color: #000;
        font-size: 10pt;  
        vertical-align: top;
    }
    .yellowtable tr.yellowtableTableEvenRow{
        color: #666666;
        background-color: #fff3ad;
        font-size: 10pt;  
        vertical-align: top;
    }
    .yellowtable td.yellowtableTableFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .yellowtable td.yellowtableTableLastCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .yellowtable td.yellowtableTableOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .yellowtable td.yellowtableTableEvenCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .yellowtable tr.yellowtableTableFooterRow{
        background-color: gold;
        color: #000;
        font-weight: 500;
        font-size: 10pt; 
        font-family: Tahoma; 
        line-height: 11pt;
    }
    .yellowtable td.yellowtableTableFooterFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        border-top: solid gray 1.0pt;
        text-align: left;
    }
    .yellowtable td.yellowtableTableFooterLastCol{
        padding:0in 5.4pt 0in 5.4pt;
        border-top:solid gray 1.0pt;
        text-align:left;
    }
    .yellowtable td.yellowtableTableFooterOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }
    .yellowtable td.yellowtableTableFooterEvenCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }

    .purpletable{
        border-width: 0px;
        border-style: none;
        border-collapse: collapse;
        font-family: Tahoma; 
    }
    .purpletable  tr.purpletableTableHeaderRow{
        margin: 10px;
        padding: 10px;
        color: #3F4D6B;
        background: #8080c0;
        text-align: left;
        font-size: 10pt; 
        font-style: normal;
        font-family: Tahoma; 
        text-transform: capitalize;
        font-weight: bold;
        border-spacing: 10px;
        line-height: 14pt;
        vertical-align: top;
    }
    .purpletable  td.purpletableTableHeaderFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .purpletable  td.purpletableTableHeaderLastCol{
        padding: 0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .purpletable  td.purpletableTableHeaderOddCol{
        padding:0in 5.4pt 0in 5.4pt;
        color: #ffffff;
        line-height: 14pt;
    }
    .purpletable  td.purpletableTableHeaderEvenCol
    {
        padding:0in 5.4pt 0in 5.4pt; color: #ffffff;
        line-height: 14pt;
    }
    .purpletable  tr.purpletableTableOddRow{
        color: #666666;
        background-color: #ffffff;
        font-size: 10pt;  
        vertical-align: top;
    }
    .purpletable  tr.purpletableTableEvenRow{
        color: #666666;
        background-color: #dfdfef;
        font-size: 10pt;  
        vertical-align: top;
    }
    .purpletable  td.purpletableTableFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .purpletable  td.purpletableTableLastCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .purpletable  td.purpletableTableOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
    }
    .purpletable  td.purpletableTableEvenCol{
        padding:0in 5.4pt 0in 5.4pt;
    }
    .purpletable  tr.purpletableTableFooterRow{
        background-color: #8080c0;
        color: #ffffff;
        font-weight: 500;
        font-size: 10pt; 
        font-family: Tahoma; 
        line-height: 11pt;
    }
    .purpletable  td.purpletableTableFooterFirstCol{
        padding: 0in 5.4pt 0in 5.4pt;
        border-top: solid gray 1.0pt;
        text-align: left;
    }
    .purpletable  td.purpletableTableFooterLastCol{
        padding:0in 5.4pt 0in 5.4pt;
        border-top:solid gray 1.0pt;
        text-align:left;
    }
    .purpletable  td.purpletableTableFooterOddCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }
    .purpletable  td.purpletableTableFooterEvenCol{
        padding: 0in 5.4pt 0in 5.4pt;
        text-align: left;
        border-top: solid gray 1.0pt;
    }

  7. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 18 Mar 2010 Link to this post

    Hello amit ,

    I was able to reproduce the issue with 5.4.0 of RadEditor for MOSS, but not with the latest version 5.7.1. I think that this issue is fixed in 5.4.1 version of RadEditor for MOSS. I suggest you pgrade to some later version of the control. You can find instructions in the following online help article http://www.telerik.com/help/aspnet-ajax/upgrade_to_a_newer_version_of_radeditor_for_moss.html.


    Regards,
    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.
  8. amit aggarwal
    amit  aggarwal avatar
    14 posts
    Member since:
    Mar 2010

    Posted 18 Mar 2010 Link to this post

    Thanks for the information....

    Can you also suggest me from where i can download the version that supports this functionality.

    rgds,
    amit.
  9. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 19 Mar 2010 Link to this post

    Hi amit,

    In order to download the latest version of RadEditor for MOSS you should go to the Downloads section under your account, click on the Visual Studio Extensions, DLLs, Scripts, Source Code, DNN and MOSS wrappers ... link and download the RadEditor for MOSS: (zip, 13 MB) installation. You can see the attached screenshot for more information.


    Best wishes,
    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.
Back to Top