Adding CSS and JAVA to pages.
So, for a while I thought I was going crazy, and I probably still am.... so could somebody point me in the right direction?
I'm trying to add a css stylesheet to my site. When I try to link to the stylesheet inside of either the template or the page, Sitefininty 4.0 can not correctly link to it. This includes the javascript files also, it just doesn't find them. I point them to the path using the site tree feature, and it just shows me a broken link. I do not know how to create my own themes because both links are broken that could be of any assistance.
I have gotten the stylesheets to work in the Advanced Header Tab inside of the Actions dropdown, but they only show up when the page is live. If the client goes to look at their pages to edit them, they don't see any of the applied stylesheets, and that is 100% useless. On top of that, the ability to add additional lines ends way to quickly. I've got 1 stylesheet, 2 javascript files and a jquery library to call. 4.0 cuts down the amount of characters I can put in the box so that I'm only allowed to call the CSS and the JQuery library. I don't have room to call the rest. This is also the only way I've found for Sitefinity to actually link the correct location of the files, because the software just isn't doing it. Even though this works, it doesn't display on the actual page.
Therefore, I'm going to assume I'm doing the whole thing wrong, and I need somebody to tell me how to get work through this problem.
Thanks,
Rob
Hello Rob,
There are several ways to include the CSS files in your pages. The best way is to add them to your template's theme. Here is a link to the documentation about the files structure:
www.sitefinity.com/.../how-to-create-a-website-template.aspx
The additional CSS line can be added through the CSS widget from the toolbox in your template.
The JavaScript can be added directly to your .master pages (if you use physical file), but it should be inside the main <form> tag below the script manager. This should resolve the paths correctly. The other way is to add the JavaScript widget in your template through the page editor.
Thanks, I'll take a look at that link. It's totally broken inside of Sitefinity when you click it.
Ok, so a quick update. I've got the CSS working now, and the jQuery files are now being called. My new problem is that those java files aren't doing anything. I click on the link in "View Source" mode, and I can see that they're showing me the correct code. They're just not doing anything. They worked when my project wasn't inside of Sitefinity. Is there a trick to get them to work?
If it helps, here is a URL to see my source code:
legalzoom2.solarvelocity.biz/checkout
It depends on how you are seeing the pages.
jQuery is disabled in the Edit Mode. Sitefinity Backend is dependent on jQuery and I guess if you inject your own jQuery file, it will be disabled.
But if you try to access the same page in the frontend (without logging into backend), it should work.
Let me know if it doesn't...
When I open a different browser (Chrome), it looks identical to how I see the page in preview mode in the browser (Firefox) I'm logged into.
Are you suggesting that I not call any jQuery library?
It seems like the java just can't find where the css file is. Is there some pre-determined location that the css file should be for it to find?
This project is time-sensitive, because we've got a meeting with this client at 2:00pm EST tomorrow (the 19th), and I love it when I'm learning new software 1 day before a project is due in it.
God speed,
Rob
My network guy just informed me that the site I'm working on is all internal, so I'm just going to show snippets of my code. Here's the header:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" /><title> Checkout</title><meta name="Generator" content="Sitefinity 4.0.1098.0 SE Trial version" /><link href="/Sitefinity/WebsiteTemplates/LegalZoom/App_Themes/LegalZoom/Styles/PromptDialog.css" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/LegalZoom/App_Themes/LegalZoom/global/style.css" type="text/css" rel="stylesheet" /><link href="/Telerik.Web.UI.WebResource.axd?compress=1&_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen-US%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3a44911412%3bTelerik.Web.UI%2c+Version%3d2010.3.1109.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a6955197e-6bcc-48a0-9bff-1fd043726dc6%3a92753c09%3a7d245c43%3bTelerik.Sitefinity.Resources%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen-US%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3ab5bf473e%3acc007e78" type="text/css" rel="stylesheet" /></head><body><form method="post" action="checkout" id="form1"><div class="aspNetHidden"><input type="hidden" name="ctl03_TSM" id="ctl03_TSM" value="" /><input type="hidden" name="ctl04_TSSM" id="ctl04_TSSM" value="" /><input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFH2N0bDAwJGN0bDA1JGN0bDAwJHdpbmRvd01hbmFnZXIFIGN0bDAwJGN0bDA1JGN0bDAwJFByb3BlcnR5RWRpdG9ygTWNwki8GmnONzd2J8SBm8hkQD3sLccvgPwNoWzuvoM=" /></div><script type="text/javascript">//<![CDATA[var theForm = document.forms['form1'];if (!theForm) theForm = document.form1;function __doPostBack(eventTarget, eventArgument) if (!theForm.onsubmit || (theForm.onsubmit() != false)) theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); //]]></script><script src="/WebResource.axd?d=_tOJb7FjG7VKHDe3e_MOoyJH4T585d4FPNR-4shrlc1GpPoupfITY90FXVXa9m8P_41qtxeNGKrG8EhdOfuw-t1Kt0rvBqtE309PY43yUc81&t=634305406622813284" type="text/javascript"></script><script src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl03_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a1f68db6e-ab92-4c56-8744-13e09bf43565%3aea597d4b%3ab25378d2%3bTelerik.Sitefinity.Resources%3aen-US%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3a5fd29111%3a7ee0bb1f%3a83eb063b%3a64dcfe0a%3a1154458f%3a2232f901%3a24e33f3%3bTelerik.Sitefinity%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3a993d8e92%3a5b182b17%3a9a1c6da2%3a81554a3f%3afe4b1370%3aaa9a9de0%3bTelerik.Web.UI%2c+Version%3d2010.3.1109.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a6955197e-6bcc-48a0-9bff-1fd043726dc6%3a16e4e7cd%3a874f8ea2%3af7645509%3a24ee1bba%3af46195d3%3a19620875%3a490a9d4e%3abd8f85e4%3bTelerik.Sitefinity%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3a80c147f%3af77740f1%3a26cfb6dc%3a6e04508f%3bTelerik.Sitefinity.Resources%3aen-US%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3ac4ef6dcd%3a6f03d72a%3bTelerik.Sitefinity%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3ac1fc658e%3a447a22b8%3bTelerik.Sitefinity.Resources%3aen-US%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3a1077b7cd%3bTelerik.Sitefinity%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3ade209ee7%3a688a162a" type="text/javascript"></script><script type="text/javascript">//<![CDATA[if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');//]]></script><div class="aspNetHidden"> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKVss4uApTR4NYGAquKwqcKkRUdIxcS9KyfQVPi45Xkzu8DphYPPhRkPIPDueWe/MA=" /></div><script type="text/javascript">//<![CDATA[Sys.WebForms.PageRequestManager._initialize('ctl00$ctl03', 'form1', [], [], [], 90, 'ctl00');//]]></script><input type="hidden" name="ctl00$ctl03" id="ctl03" /><script type="text/javascript">//<![CDATA[Sys.Application.setServerId("ctl03", "ctl00$ctl03");Sys.Application._enableHistoryInScriptManager();//]]></script></div><script type="text/javascript" src="/Sitefinity/WebsiteTemplates/JS/jquery-1.4.2.min.js"></script><script type="text/javascript" src="/Sitefinity/WebsiteTemplates/JS/jquery.jqtransform.js"></script><script type="text/javascript" src="/Sitefinity/WebsiteTemplates/JS/script.js"></script><script type="text/javascript">//<![CDATA[;(function() function loadHandler() var hf = $get('ctl04_TSSM'); if (!hf._RSSM_init) hf._RSSM_init = true; hf.value = ''; hf.value += ';Telerik.Sitefinity.Resources, Version=4.0.1098.0, Culture=neutral, PublicKeyToken=null:en-US:3dfc1080-eaf3-458e-bf48-a065bc9fddc9:44911412;Telerik.Web.UI, Version=2010.3.1109.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4:en-US:6955197e-6bcc-48a0-9bff-1fd043726dc6:92753c09:7d245c43;Telerik.Sitefinity.Resources, Version=4.0.1098.0, Culture=neutral, PublicKeyToken=null:en-US:3dfc1080-eaf3-458e-bf48-a065bc9fddc9:b5bf473e:cc007e78'; Sys.Application.remove_load(loadHandler); ; Sys.Application.add_load(loadHandler); )();Sys.Application.add_init(function() $create(Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit.BrowseAndEditToolbar, "_toolbarContainerID":"Logo_T5C68C154004_ctl00_browseAndEditToolbar_ctl00_BrowseAndEditToolbar","_toolbarControls":"Logo_T5C68C154004_ctl00_browseAndEditToolbar_ctl00_ctl01":"CommandName":"editControl","Visible":true,"Arguments":"ItemId":"38eb4dff-c78c-4d5f-bc41-2d4e3f624b83","ItemType":"Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlock","DialogName":"PropertyEditor","DialogUrlParameters":["Key":"Id","Value":"38eb4dff-c78c-4d5f-bc41-2d4e3f624b83","Key":"propertyValueCulture","Value":"","Key":"PageId","Value":"e78f238e-acde-4f82-b8a4-f6aaa391d40e","Key":"checkLiveVersion","Value":"true","Key":"upgradePageVersion","Value":"true","Key":"MediaType","Value":"0"],"AdditionalProperties":,"visible":false, null, null, $get("Logo_T5C68C154004_ctl00_browseAndEditToolbar")););Sys.Application.add_init(function() $create(Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit.BrowseAndEditToolbar, "_toolbarContainerID":"Navigation_T5C68C154003_ctl00_browseAndEditToolbar_ctl00_BrowseAndEditToolbar","_toolbarControls":"Navigation_T5C68C154003_ctl00_browseAndEditToolbar_ctl00_ctl01":"CommandName":"editControl","Visible":true,"Arguments":"ItemId":"7135d743-4a18-4954-9f7b-a839081ea532","ItemType":"Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlock","DialogName":"PropertyEditor","DialogUrlParameters":["Key":"Id","Value":"7135d743-4a18-4954-9f7b-a839081ea532","Key":"propertyValueCulture","Value":"","Key":"PageId","Value":"e78f238e-acde-4f82-b8a4-f6aaa391d40e","Key":"checkLiveVersion","Value":"true","Key":"upgradePageVersion","Value":"true","Key":"MediaType","Value":"0"],"AdditionalProperties":,"visible":false, null, null, $get("Navigation_T5C68C154003_ctl00_browseAndEditToolbar")););Sys.Application.add_init(function() $create(Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit.BrowseAndEditManager, "_browseAndEditCookieName":"browseAndEditState","_isMultilingual":false,"_pageId":"e78f238e-acde-4f82-b8a4-f6aaa391d40e","_pageStatus":"Live","_pageUrl":"/checkout","_pageVersion":6,"_pagesServiceUrl":"/Sitefinity/Services/Pages/PagesService.svc/","_toolbarIds":["ctl06","Logo_T5C68C154004_ctl00_browseAndEditToolbar","Navigation_T5C68C154003_ctl00_browseAndEditToolbar"],"_uiCulture":"en","_workflowServiceUrl":"/Sitefinity/Services/Workflow/WorkflowService.svc", null, "pageChangedWarningDialog":"ctl05_ctl00_pageChangedWarningDialog", $get("ctl05")););Sys.Application.add_init(function() $create(Telerik.Web.UI.RadWindow, "_dockMode":false,"behaviors":0,"clientStateFieldID":"ctl00_ctl05_ctl00_PropertyEditor_ClientState","formID":"form1","height":"100%","iconUrl":"","initialBehaviors":16,"minimizeIconUrl":"","name":"PropertyEditor","navigateUrl":"/Sitefinity/Dialog/PropertyEditor?PageId=00000000-0000-0000-0000-000000000000","reloadOnShow":true,"showContentDuringLoad":false,"skin":"Sitefinity","visibleStatusbar":false,"visibleTitlebar":false,"width":"100%", null, null, $get("ctl00_ctl05_ctl00_PropertyEditor")););Sys.Application.add_init(function() $create(Telerik.Web.UI.RadWindowManager, "behaviors":0,"clientStateFieldID":"ctl00_ctl05_ctl00_windowManager_ClientState","formID":"form1","iconUrl":"","minimizeIconUrl":"","name":"windowManager","showContentDuringLoad":false,"skin":"Sitefinity","visibleStatusbar":false,"windowControls":"['ctl00_ctl05_ctl00_PropertyEditor']", null, "child":"ctl00_ctl05_ctl00_PropertyEditor", $get("ctl00_ctl05_ctl00_windowManager")););Sys.Application.add_init(function() $create(Telerik.Sitefinity.Web.UI.PromptDialog, "_allowCloseButton":true,"_commands":"[\"CommandName\":\"ok\",\"CommandType\":2,\"Text\":\"OK\",\"CausesValidation\":false,\"ItemTemplate\":,\"ButtonClientId\":\"ctl05_ctl00_pageChangedWarningDialog_ctl00_ctl00_buttonLink\",\"TextClientId\":\"ctl05_ctl00_pageChangedWarningDialog_ctl00_ctl00_buttonText\",\"ContainerId\":\"pageChangedWarningDialog\",\"WrapperTagName\":\"BUTTON\",\"WrapperTagCssClass\":null,\"CssClass\":null,\"WrapperTagId\":null,\"ItemTemplatePath\":null,\"Visible\":true,\"ItemType\":null]","_defaultInputText":null,"_height":300,"_message":null,"_showOnLoad":false,"_textFieldExample":null,"_textFieldTitle":null,"_title":"Warning","_width":300,"closeButtonElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_promptCloseButton"),"promptInnerContentElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_promptInnerContentWrapper"),"promptMessageElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_promptMessage"),"promptTitleElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_promptTitle"),"wrapperElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_promptDialogWrapper"), null, "inputTextField":"ctl05_ctl00_pageChangedWarningDialog_ctl00_inputTextField", $get("ctl05_ctl00_pageChangedWarningDialog")););Sys.Application.add_init(function() $create(Telerik.Sitefinity.Web.UI.Fields.TextField, "_conditionDictionary":"displaymode-equal-read":"ctl05_ctl00_pageChangedWarningDialog_ctl00_inputTextField_ctl00_conditionalTemplate","displaymode-equal-write":"ClientTemplatePanel_inputTextField","_conditionalTemplatesContainerId":"ctl05_ctl00_pageChangedWarningDialog_ctl00_inputTextField_ctl00_ConditionalTemplates","_currentCondition":"displaymode-equal-read","controlErrorCssClass":null,"dataFieldName":null,"dataFormatString":null,"defaultValue":"","description":null,"descriptionElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_inputTextField_ctl00_descriptionLabel"),"displayMode":0,"example":null,"labelElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_inputTextField_ctl00_textLabel"),"suffix":"_inputTextField","title":null,"titleElement":$get("ctl05_ctl00_pageChangedWarningDialog_ctl00_inputTextField_ctl00_titleLabel"),"validatorDefinition":"\"AlphaNumericViolationMessage\":\"Non alphanumeric characters are not allowed.\",\"ComparingValidatorDefinitions\":[],\"CurrencyViolationMessage\":\"You have entered an invalid currency.\",\"EmailAddressViolationMessage\":\"You have entered an invalid email address.\",\"ExpectedFormat\":0,\"IntegerViolationMessage\":\"You have entered an invalid integer.\",\"InternetUrlViolationMessage\":\"You have entered an invalid URL.\",\"MaxLength\":0,\"MaxLengthViolationMessage\":\"Too long\",\"MaxValue\":null,\"MaxValueViolationMessage\":\"Too big\",\"MessageCssClass\":null,\"MessageTagName\":\"div\",\"MinLength\":0,\"MinLengthViolationMessage\":\"Too short.\",\"MinValue\":null,\"MinValueViolationMessage\":\"Too small.\",\"NonAlphaNumericViolationMessage\":\"Alphanumeric characters are not allowed.\",\"NumericViolationMessage\":\"You have entered an invalid number.\",\"PercentageViolationMessage\":\"You have entered an invalid percentage.\",\"RegularExpression\":null,\"RegularExpressionViolationMessage\":\"Ivalid format.\",\"Required\":null,\"RequiredViolationMessage\":\"Required field.\",\"USSocialSecurityNumberViolationMessage\":\"You have entered an invalid US social security number.\",\"USZipCodeViolationMessage\":\"You have entered an invalid US ZIP code.\",\"ValidateIfInvisible\":true","value":"", null, null, $get("ctl05_ctl00_pageChangedWarningDialog_ctl00_inputTextField")););Sys.Application.add_init(function() $create(Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit.BrowseAndEditPageMenu, "_browseAndEditCookieName":"browseAndEditState","_toggleBrowseAndEditCommandName":"toggleBrowseAndEdit","menuContainer":$get("ctl06_ctl00_browseAndEditMenu"),"openMenu":$get("ctl06_ctl00_openMenu"),"toggleEditingTools":$get("ctl06_ctl00_toggleEditingTools"), null, "clientLabelManager":"ctl06_ctl00_clientLabelManager", $get("ctl06")););Sys.Application.add_init(function() $create(Telerik.Sitefinity.Web.UI.ClientLabelManager, "_dictionary":"\"PublicControlsResourcesShowEditingTools\":\"Show editing tools\",\"PublicControlsResourcesHideEditingTools\":\"Hide editing tools\"", null, null, $get("ctl06_ctl00_clientLabelManager")););//]]></script></form></body></html>There are many problems here :
First of all, you should never add a reference to CSS directly. You need to pull all the CSS files in App_Themes/ThemeName/Global Folder and choose the appropriate them for the Page Template.
Secondly, If you need to include JavaScript in your application, you wil have to add a reference to Telerik.Sitefinity assembly and register it in the page.
<%@ Register
TagPrefix="sf" Assembly="Telerik.Sitefinity"
Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%> <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink"
ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl> <sf:CssEmbedControl runat="server" id="CssLink" Url="~/<pathtoyourfile>/cssfile.css"></sf:CssEmbedControl>Those code snippets were actually taken after the Master page was put into sitefinity.
Header:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta charset="UTF-8" /><title>My Account</title></head><body><form id="form1" runat="server"><div class="containervertical"><div class="header"> <asp:ContentPlaceholder id="Logo" runat="server" /> <div class="nav"> <asp:ContentPlaceholder id="Navigation" runat="server" /> </div> <!-- End Nav --></div><!-- End Header --></div><!-- End Container --><asp:ContentPlaceholder id="JQuery" runat="server" /></form></body></html>