+1-888-365-2779
Try Now
More in this section

Inline CSS

9 posts, 0 answered
  1. Krishna
    Krishna avatar
    8 posts
    Registered:
    05 Sep 2008
    22 Sep 2008
    Link to this post
    Hi,

    Is it possible to see and edit the CSS (modifying exisitng style clasees) with in the Sitefinity window.

    Can you please suggest the best approach for this?

    Thanks & Regards

    Krishna
  2. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    22 Sep 2008
    Link to this post
    Hello Krishna,

    unfortunately this is not possible at the moment, though we are planning this ability for one of the future releases. We don't have the fixed that for this yet.

    You could, however, develop a control which would do this for you. Basically, it would be a control which would have a, let's say, "style" property and then you would dynamically register the css with the page header on the fly.

    I hope you'll find this information helpful. Let us know if there is anything else we can do for you.

    Kind regards,
    Ivan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Krishna
    Krishna avatar
    8 posts
    Registered:
    05 Sep 2008
    24 Sep 2008
    Link to this post
    Hi,

    I added a new css file and make a refrence to it in the EditorTemplate.ascx file. Also added classes to the EditorToolsFile.xml.

    Now the new classes are available in the Generic Content editir Apply Class dropdown and I can apply the styles to the content in edit mode.

    But, when I publish the content those styles are not applied to the content.
    Am I missing some steps here?

    Thanks for your help
    regards

    Krishna
  4. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    24 Sep 2008
    Link to this post
    i believe the editortemplate.ascx file is only loaded when you are actually editing the file. since on the actual page you're not editing it, the css will not be loaded.

    however you can dynamically add a css file to the page in two ways. either by going to the Properties of the given page, then opening "More options" and adding a head tag via "Link". this will allow you to link to the css file you created...

    alternatively you can use the CssFileLink control that comes with sitefinity to embed css files to a user control. just register it in the top of the page:

    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %> 


    then drop the actual control on the page:

    <sf:CssFileLink ID="CssFileLink1" FileName="/css/yourcssfile.css" Media="screen" runat="server" /> 
    <sf:CssFileLink ID="CssFileLink2" FileName="/css/anothercssfile.css" Media="screen" runat="server" /> 

    hope this was helpful!
  5. Mike
    Mike avatar
    208 posts
    Registered:
    10 Dec 2007
    25 Sep 2008
    Link to this post
    Hi SelArom,

    When I try this, I get an Collection was modified; enumeration operation may not execute exception.

    I put this at the top of the page:

    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %>


    and this goes in the <head> (runat="server"):

    <sf:CssFileLink ID="CssFileLink1" FileName="~/atest.css" Media="screen" runat="server" />


    There is a test css file called "atest.css" in my site root, which works because I can manually add the link to the page through the editor. 

    Any ideas?

    Thanks,
    Mike

    The stack trace is:
    [InvalidOperationException: Collection was modified; enumeration operation may not execute.]
       System.Web.UI.ControlCollectionEnumerator.MoveNext() +2107778
       Telerik.Cms.Web.CmsHelper.FindContentPlaceHolders(ControlCollection controls, Dictionary`2 list, IList`1 controlIds) +356
       Telerik.Cms.Web.CmsHelper.FindContentPlaceHolders(ControlCollection controls, Dictionary`2 list, IList`1 controlIds) +347
       Telerik.Cms.Web.CmsHelper.FindContentPlaceHolders(MasterPage master, IList`1 controlIds) +121
       Telerik.Cms.Web.EditPage.CreateChildControls() +81
       System.Web.UI.Control.EnsureChildControls() +87
       System.Web.UI.Control.PreRenderRecursiveInternal() +50
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2041

  6. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    25 Sep 2008
    Link to this post
    i'm not sure if the cssfilelink is designed to go in the head. I'm not too familiar with it but I put it directly on the page or the user control. if i'm understanding your scenario correctly you're wanting to embed a css file into the page for one of the modules... is that right?

    if so then you would just drop the cssfilelink into the controltemplate of the usercontrol. for example if you're wanting to add a css to the news, you'd add it to the /sitefinity/controltemplates/news/singlenews.ascx file...

    if on the otherhand you're trying to apply a style to the content edited in a GenericContent control, I don't think this will work since i don't think the genericcontent control in the page editor has a control template (but I could be wrong)

    if that's the case then you could try using the Properties editor for the page and embedding the css file using the "link" section of "more options". if it's a global css file you can add it to using the same link section in the properties editor for the template.

    i hope i'm not being even more confusing, I think maybe I need to know more about what exactly you're trying to accomplish
  7. Mike
    Mike avatar
    208 posts
    Registered:
    10 Dec 2007
    25 Sep 2008
    Link to this post
    Ah, you're right.  If I put it in the page body, it works.  I never suspected that it would write the CSS link in the <head> even though the control is in the <body>.  I guess I didn't think of it as a way to add CSS files from a user control.

    What I'm trying to do is find a way to add conditional stylesheets to a page, so that I can target specific browsers like IE 5.5 or IE 6.  Since Sitefinity inserts the theme CSS links at the very end of the page head, you can't add them the normal way, like:

    <!--[if IE 5.5000]>
        <link rel="stylesheet" href="/styles/iepngfix.css" type="txt/css"/>
    <![endif]-->

    I'd rather not employ CSS hacks, if I can help it.

    SharePoint has a nice way of allowing you to insert your own markup in the page head, as well as inject your own page head controls via a delegate:

    <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
     <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>

    This is nice because each page (or a control on a page) can do this independently.

    Regards,
    Mike
  8. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    26 Sep 2008
    Link to this post
    oh okay if you're wanting to write custom stuff into the head that's not yet supported (I don't think) I asked about it before they said they would consider it in the future so I guess we'll see!
  9. Eliza Sahoo
    Eliza Sahoo avatar
    5 posts
    Registered:
    25 Jan 2010
    10 Feb 2010
    Link to this post
    If your application targets different user-groups, you may feel the need to customize the layout of the page to display group-specific visual interface. This can be achieved by using customized CSS files that are added dynamically.   
    You can add CSS files in to ASP.NET webpages dynamically. Let me show you how. 
    1. Add following HTML tag in the ASP.NET (.aspx) page in the header section.
      <link id="CSSFile" type="text/css" rel="Stylesheet" runat="server" />
    2.  In the code behind page you can then add the CSS file as follows by accessing the link ID
      CSSFile.Attributes.Add("href", "Dynamic.css")

      (Dynamic.css is the CSS file that has been added to the page.)


Register for webinar
9 posts, 0 answered