locked
Issue using CSS in an HTML webresource CRM 2011 RRS feed

  • Question

  • I posted this question yesterday but it is not there today.  So I am posting it again.

    I am looking to understand how to use a CSS in an HTML webresource.  I am running into limitations with the dialogs so I am creating an HTML page and converting my dialog into just a standard HTML page where I can have full control over what is presented to the user.  I have coded up a few test HTML pages but I cannot get the CSS to work.  Here's what I am running into.

    I am working with CRM 2011 on-premise and VS.Net 2010 (I can upgrade to 2012 or 2013 if it might help).  I have created a CRM 2011 Package project (I also tested it via the solution, which adds a package) and added a simple HTML and CSS.  In the HTML I added a link to my CSS file.  I added CSS folder (also tried it without a folder) and put a simple CSS in there.  I have played around with folders, names, etc. and I have gone through a couple of training videos (PluralSight and the Dynamics Vidoes from Microsoft) and I cannot see what I am missing here.  It should not be this hard to figure out how CRM is working here.  I know and suspect my problem is how CRM uses the actual name, display name, and how it deals with folders in VS.Net that when put into CRM no longer exists.  But I cannot workout a solution.

    So can someone explain this to me?  It cannot be all that hard.

    Also, what type of VS.Net project are you using?  I created a CRM 2011 Package and when I save the CSS, the contents are grey'd out.  So I think that is my hint that I am doing something wrong.  But once it shows up in CRM, the files are there and seem like they should work regardless of what I do in VS.Net.  I have tried editing it in CRM and nothing I do works.

    Below is a simple Hello World HTML and a simple stylesheet.  In my VS.Net project  I have a WebResources folder, a folder called Dialogs (my own HTML dialogs) then I have my HTML page in that folder.  From there, I also have CSS folder (inside my dialog folder) with the Stylesheet1.css file.  Below are the contents of each of those.

    • /TestProject (CRM 2011 Package)
    • /TestProject/WebResources/Dialog/HTMLPage1.htm
    • /TestProject/WebResources/Dialog/CSS/StyleSheet1.css

    Can someone show me what I am doing wrong here?  I think my problem is how you setup the properties (display name, actual name, etc.) for the files or maybe the VS.Net project type is causing me trouble.  

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title></title>
        <link href="CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="header">
            Hello CRM 2011 World!
        </div>
    </body>
    </html>
    .header
    {
        font-weight: bold;
    }


    Jon Gregory Rothlander





    Thursday, February 20, 2014 3:25 PM

Answers

  • Generally what I do it create the CRM Package project, then I create the usually create empty web resources in CRM for the files I'm going to work with. Then back in Visual Studio use the CRM Explorer to connect to your organization and browse the web resources and add the ones you need to the Packaging Project with a right click on the file. This will create folders for scripts, css, html, etc... in your project. Now you can edit the files and deploy then be right clicking the Packaging Project Name in VS. 

    Assuming you are following this model, the css file won't actually get deployed to a pseduo-folder in CRM. If you open the web resource in CRM at the bottom will be the path the file. Just make sure you are referencing the path correctly in relation the the HTML file and take note if the file extension is present or not. 


    Jason Lattimer
    My Blog -  Follow me on Twitter -  LinkedIn

    Thursday, February 20, 2014 3:55 PM
    Moderator

All replies

  • Generally what I do it create the CRM Package project, then I create the usually create empty web resources in CRM for the files I'm going to work with. Then back in Visual Studio use the CRM Explorer to connect to your organization and browse the web resources and add the ones you need to the Packaging Project with a right click on the file. This will create folders for scripts, css, html, etc... in your project. Now you can edit the files and deploy then be right clicking the Packaging Project Name in VS. 

    Assuming you are following this model, the css file won't actually get deployed to a pseduo-folder in CRM. If you open the web resource in CRM at the bottom will be the path the file. Just make sure you are referencing the path correctly in relation the the HTML file and take note if the file extension is present or not. 


    Jason Lattimer
    My Blog -  Follow me on Twitter -  LinkedIn

    Thursday, February 20, 2014 3:55 PM
    Moderator
  • Jason,

    Thanks for explaining that, as it helps a great deal.  I have done exactly what you suggested and it does work much easier than my previous approach.  However, I am still having what seems to be an issue with the paths.

    I can get the stylesheet to apply in the web resource HTML view (the little editor for the HTML when you view the web resource).  But once it is published and I call the HTML from a ribbon button, the style is not applied.  So I think I am still having an issue with the paths.  You suggested looking at the URL when viewing the web resource in CRM.  Here's that they look like with the server name removed.

         http://[servername]/CRMDev/WebResources/dhi_QualifyRealtorLeadDialog.htm

         http://[servername]/CRMDev/WebResources/dhi_StyleSheet1.css

    Based on those paths, I tried the following stylesheet references in the HTML:    

    1. The one here seems wrong, but it works when viewing the HTML in the web resource editor: <link rel="stylesheet" type="text/css" href="/WebResources/dhi_StyleSheet1.css">
    2. This one seems right, but I cannot get it to work at all: <link rel="stylesheet" type="text/css" href="dhi_StyleSheet1.css">
    3. I tried this one just out of curiosity since I added ".css" to the name per a few people that had mentioned it can help to view it in .net : <link rel="stylesheet" type="text/css" href="dhi_StyleSheet1">

    However, once I published any of these and execute the HTML page, the stylesheets are not applied.  Can you tell what I might be missing?  Do I need to use the $webresource: prefix?  I tried that as well, but it didn't work.

    Any idea what I am doing wrong here?

    Best regards,

    Jon rothlander


    Jon Gregory Rothlander


    Thursday, February 20, 2014 8:21 PM
  • So you should be able to get away with something like:

     <link href="new_Test.css" rel="stylesheet" type="text/css" />

    I bet what you are missing is that you need to publish the files you are deploying - the Visual Studio tooling only pushes the contents into CRM - it does not actually do a Publish on the files. 

    Wouldn't also hurt to fire up a tool like Fiddler or the browsers built in developer tools (F12) an look at the network requests and make sure the CSS file is not getting a 404 error or something. 


    Jason Lattimer
    My Blog -  Follow me on Twitter -  LinkedIn

    Thursday, February 20, 2014 10:36 PM
    Moderator
  • It seems that the publish is not working.  What I am doing is deploying, then publishing the solution.  But the publish is not applying.  That is odd, I thought that was all that is needed.  Take this as an example...  I go into my solution, open the HTML page.  Then I change a version label that I added from something like 1 to 2.  Than I save it, publish (via the publish button on the webresource view/editor, then I publish all customizations to be safe) but when I ran it, the HTML is has not been published.  Through tral-and-error I found that if I publish via the RibbonWorkbench, the changes apply.  So the net of this is that if I change the HTML or the JavaScript and publish, I have to publish the ribbons through the workbend for them to apply. 

    I suspect I am missing something here in regards to publishing.

    But you are correct, the publishing is not taking effect and hense my problem.  Thanks for point that out.  But now I don't know for sure what it takes to correctly publish an HTML or JavaScript change.  I don't know why I have to pushlish the ribbon through the RibbonWorkbench for it to take effect.

    Best regards,

    Jon


    Jon Gregory Rothlander

    Friday, February 21, 2014 3:36 PM