More in this section

Forums / Developing with Sitefinity / Styling generic content

Styling generic content

9 posts, 0 answered
  1. Pete
    Pete avatar
    6 posts
    Registered:
    05 Apr 2008
    09 Jun 2008
    Link to this post
    Hi there,

    This should be an easy one. I want to offer the end user a choice of different styles of "boxes" in which they can create their generic content.

    Can this be done using the existing generic content module? Should I create separate controls somehow based on the generic content module?

    How best to do this in Sitefinity? Thanks in advance.
  2. Pete
    Pete avatar
    6 posts
    Registered:
    05 Apr 2008
    09 Jun 2008
    Link to this post
    ...to be more specific, I'd like to create three kinds of boxes to help the user lay out his content; perhaps comething like : SingleWidthBox, DoubleWidthBox and TripleWidthBox. The only difference is the css class of the div which constitutes the box. The user can drag a box from the toolbox and add generic content  to it (new or shared).

  3. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    10 Jun 2008
    Link to this post

    Hi Pete,

    I presume you are talking about placeholders in a page to which different generic content should be dragged.

    So, placeholders can be added in a masterpage. Masterpages should be in ~/App_Master folder. For example, you can add a placeholder SingleWidthBox and wrap it up with a div which has a class name singleWidthBoxWrapper:

    <div class="singleWidthBoxWrapper">
        <asp:contentplaceholder id="Content" runat="server"></asp:contentplaceholder>
    </div>

    singleWidthBoxWrapper class definition can be written in the theme that is applied to the particular page.

    You could do the same for the other two placeholders.

    Let us know if you need further assistance.

    All the best,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  4. Pete
    Pete avatar
    6 posts
    Registered:
    05 Apr 2008
    10 Jun 2008
    Link to this post
    Ah, thanks, sorry: the boxes I envisage are for the user to lay out his own content. So there will be a large ContentPlaceHolder in the master page into which these boxes can be dragged, inside Sitefinity. The boxes are simply floated divs so that they will flow inside the ContentPlaceHolder.

    I've found this guide which seems to do most of what I want. (It says something (at the bottom) about not working with user controls, but it seems to be ok.)

    Here's my control:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SmallContentBox.ascx.cs" Inherits="MusicSales.Ems.SitefinityModules.SmallContentBox" %> 
    <%@ Register TagPrefix="sf" Assembly="Telerik.Cms.Engine" Namespace="Telerik.Cms.Engine.WebControls" %> 
     
    <div class="SmallContentBox"
        <sf:GenericContent runat="server" ID="GenericContent1" /> 
    </div> 
     



    .SmallContentBox  
        float: left; 
        height:120px; 
        width: 130px; 
        margin: 0 20px 15px 20px; 
        text-align: left; 
        padding: 0px; 
        color: Lime; 

    The control is registered as as Toolbox control.

    <add name="Small Content Box" section="Layout" 
        url="~/SitefinityControls/SmallContentBox.ascx" 
        description="A small generic content box." /> 


    This works and looks fine on the live site, however the questions I have now are:

    (1) In the Sitefinity editor, the box takes up the whole width of the ContentPlaceHolder (easy to reproduce with the above code).

    (2) None of the CSS is applied to the text when inside the RadEditor.

    (3) I would like to be able to add a BackgroundImageUrl property to the box to allow the user to select an image within Sitefinity. I can't find any documentation on how the WebEditorAttribute is used.

    Many thanks in advance,
    Pete.
  5. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    12 Jun 2008
    Link to this post
    Hi Pete,

    As for questions 1 and 2, you can add CSS to ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css. That CSS will be applied to the content that you are editing in RadEditor.

    As for the third question, you can add another metafield in the web.config and then add text input field in the administration to input the path to the background image. After that you can use that path in the public control to set the background.


    Greetings,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Pete
    Pete avatar
    6 posts
    Registered:
    05 Apr 2008
    24 Jun 2008
    Link to this post
    Hi Katia,

    Thanks for your replies. Unfort. neither helped me very much.

    (3) was solved simply by adding a public property to the user control. Sitefinity makes this very easy. I don't know what you mean by metafields (perhaps this has something to do with building custom modules? This is simply a user control).

    (1) and (2) - I don't know how to make this clearer ... I want to give the user a wysiwyg experience. I'd like to be able to effectively tell the RadEditor in the generic content part to use the particular style sheet associated with the control.

    The real question is : Is this the right way to go about achieving this very simple functionality? This seems to be a basic scenario for a content management system : Give the users little "content boxes", which have a style they can adjust, and let them enter text into it in a vaguely wysiwyg manner.

    Thanks in advance,
    Pete.
  7. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    26 Jun 2008
    Link to this post
    Hi Pete,

    I think I finally understood what you want to achieve. We think your approach is very good. Unfortunately, it is not possible to do this at the moment. Basically, what you have to do is set different editor templates for each type of box and in each editor template set a different ContentAreaCssFile property to apply different CSS file to the editor's content area. Anyway, it turned out that there is a problem with EditorTemplatePath property in the particular case, so I have reported it and it will be fixed as soon as possible.

    We liked your idea very much so we updated your Telerik account.

    Best wishes,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Pete
    Pete avatar
    6 posts
    Registered:
    05 Apr 2008
    26 Jun 2008
    Link to this post
    Thanks Katia, looking forward to the fix. Could you explain how to set different editor templates? Thanks again.

    Pete.
  9. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    27 Jun 2008
    Link to this post

    Hi Pete,

    My idea was to set a different template path in the ascx like that:

    <div class="SmallContentBox"

        <sf:GenericContent runat="server" ID="GenericContent1" EditorTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplateSmallBox.ascx" /> 

    </div> 


    After that create a new editor template ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplateSmallBox.ascx. You can copy/paste the existing one (~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx) and change its name to EditorTemplateSmallBox.ascx. So in that new template change ContentAreaCssFile property to ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentAreaSmallBox.css.

    <telerik:RadEditor 
        runat="server" 
        ID="RadEditor1"
        
    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentAreaSmallBox.css"
        
    EnableEmbeddedSkins="False" 
        Skin="Sitefinity" 
        NewLineBr
    ="False"
        Height="360px" 
        Width="98%"> 
        ...       
    </
    telerik:RadEditor>

    Then create another CSS for the content area of the editor (~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentAreaSmallBox.css) and write in that file the CSS needed to style the content in the particular box there.


    Sincerely yours,

    Katia

    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center

     

Register for webinar
9 posts, 0 answered