RadEditor Templates not reading stylesheet

2 posts, 0 answers
  1. Gayle
    Gayle avatar
    1 posts
    Member since:
    Jul 2011

    Posted 08 Jul 2011 Link to this post

    I am having some problems with the telerik editor templates. For instance, the ImageAndTitle.htmtemplate that came with the editor  does not seem to be reading its stylesheet, ImageAndTitle.css. This is a simple template with an image floating to the left and text wrapping around the image.

    When the template is previewed, it looks fine, but once it is applied to the editor interface the formatting is lost.  I am using the editor with DotnetNuke 5.6.1. My goal is to create a custom template, but I want to understand why this one is not working before I create a custom template. 

    Below is the code for the ImageAndTitle htmtemplate and css.

    Template code:

    <div class="template imageandtitle"> 
      <div class="container region content"> 
        <img width="100"; height="100" alt="image placeholder" title="replace with your own image" /> 
        <h3>Type the title here</h3> 
        <p>Type the text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare, nisl ac vehicula  
        
    volutpat, tellus sem congue sem, et varius ipsum neque in tortor. Curabitur massa nunc, ultricies ac mollis id,  
        
    varius ac sapien. Duis nec dolor ac velit semper malesuada eget non dolor. Vestibulum mollis ligula vel ipsum  
        
    lobortis a adipiscing mauris imperdiet.</p> 
        </div> 
    </div>

    CSS code:
    @charset "utf-8"; 
    /* CSS Document with styles necessary for default HtmlEditor HTML "snippet" templates */
        
    /* Styles for ALL Default Templates */
    div.template 
    { 
     text-align: left; 
     width: 100%; 
     overflow: auto; 
    } 
        
    div.template div.container 
    { 
     clear: both; 
     margin: 0; 
     padding: 0; 
     overflow: auto; 
     position: relative; 
    } 
        
    div.template div.region 
    { 
     padding: 5px; 
     margin: 0; 
    } 
        
    /* Styles for "Image And Title" template */
    div.template.imageandtitle h3
    { 
     margin-top: 0; 
    } 
        
    div.template.imageandtitle img 
    { 
     float: left; 
     margin: 0; 
     margin-right: 10px; 
    }

    Thanks for your help.
    Gayle
  2.
  3. Rumen
    Admin
    Rumen avatar
    13749 posts

    Posted 11 Jul 2011 Link to this post

    Hi Gayle,

    The template manager works only with the content placed inside the <body> tags of the HTML template file. If you want to import link tags or style tags in the content area you should put them after some content inside the <body> tag.

    For example this will not work

    <head>
        <title></title>
        <style type="text/css">body { color: Red; } </style>
    </head>
    <body id="bodyElement">
        sample content
    </body>
    </html>


    and this will insert the style tag in the content area:

    <head>
        <title></title>
         
    </head>
    <body id="bodyElement">
        sample content
        <style type="text/css">body { color: Red; } </style>
    </body>
    </html>

    There is another way to keep the HTML, HEAD and BODY tags discussed in the following forum thread: http://www.telerik.com/community/forums/aspnet-ajax/editor/upload-strips-html.aspx.

    If you use the Professional DNN provider of RadEditor (DotNetNuke.HtmlEditor.TelerikEditorProvider.EditorProvider) that comes with the DNN 5.6.x installation, you should note that it is implementation of the DNN developers and it is not supported by Telerik. Our suggestion is to post your questions about how to customize RadEditor in DNN in the DNN forums. For example in this one: Taming (customizing) The new Telerik RadEditor.

    Best regards,
    Rumen
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top