Is there a way to include a css/js file in the umbraco backoffice which I need to use in the whole site(not in a single plugin)?
Thanks
The Umbraco backoffice main View is usually located in your project folder under:
$YourSolutionFolder\ProjectFolder\umbraco\Views\Default.cshtml
In that file you can insert a link to your external CSS or JS as follows:
<link rel="stylesheet" type="text/css" href="~/css/theme.css">
<script src="~/scripts/script.js"></script>
Note: Bear in mind that you can have some CSS conflicts overriding some Umbraco styles when using your own custom CSS file.
Related
I am attempting to add a simple datepicker to a webpart and am having difficulty loading the jquery UI css into the page I added the following to code to the webpart.ascx.
<SharePoint:CssLink ID="cssLink2" runat="server" DefaultUrl="C:\Users\mlamarca\Documents\Visual Studio 2013\Projects\CheckTracer\CheckTracer\Layouts\CheckTracer\Styles\jquery-ui.css" />
I am able to click on the text box and the calendar shows up but it does not have the CSS with it.
My document structure is as follows:
What am I missing?
I see that you are mapping it to your LOCAL Path, which is definitely NOT resolvable when loaded into your web page. Please use
"/_layouts/15/CheckTracer/Styles/jquery-ui.css" instead. (I'm referring to your screenshot on the Layouts folder.
Another way is to actually use this directly.
<link rel="stylesheet" type="text/css" href="/_layouts/15/xxx"/>
When rendering the styles from bundles when optimization is on you get this:
<link href="/Content/themes/base/css?v=UM624qf1uFt8dYtiIV9PCmYhsyeewBIwY4Ob0i8OdW81" rel="stylesheet" type="text/css" />
Unfortunately the Android browser do not seem to load urls with query strings on them. Is there some way you can customize this string in System.Web.Optimization?
Edit:
My question is answered and I tried to detect android on user agent string and replace with a querystring less link to the stylesheet. Apparently the problem I had wasn't because of the querystring, it was minified version of the webfont css that was causing it not to load the stylesheet completely in the Android stock browser.
Android stock browser fails to load css content string with escaped backslash which was a workaround for the ASP.NET minifier that erronously minifies the same css content string. I ended up putting the icon font css styles on it's own "minified by hand" stylesheet.
You can disable caching by using
#{string path = BundleTable.Bundles.ResolveBundleUrl("~/bundle/cssCommon", false);}
//may apply manual path transformation to remove ?v= anyway
<link href=#path rel="stylesheet" type="text/css" />
or short form
<link href="#BundleTable.Bundles.ResolveBundleUrl("~/bundle/cssCustom", false)"
But you will have caching-related problems instead of android WebView problems.
Another possible approach is using Microsoft Ajax Minifier
We don't currently support customizing how the version string appears in the url unfortunately.
This is a link to the issue on our codeplex site: Url version issue
In the meantime, if you are willing to live with manually rev'ing the bundle path every time you change the bundle, you could just avoid using the helpers and just having explicit links to your bundles which you update each time your bundle changes:
<link href="/Content/themes/base/css" rel="stylesheet">
Or you could disable caching on the client via bundle.Cacheability = HttpCacheability.NoCache
I have implemented datepicker following "jQuery getting started", using 3 files:
<link type="text/css" href="css/themename/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
It suggests to use 3 files including "jquery-1.4.4.min.js". What if I want to use full .js file e.g "jquery.ui.datepicker.js" for datepicker. Reason of asking to use full version is to modify some elements for my need which is difficult in minified version.
Then download and reference the unminified version.
There is no difference aside from the size of the files. You can always re-minify once you've completed your changes.
If you're doing a custom build, the non minified version of jquery.ui.datepicker will be in in the development-bundle/ui folder.
I am using ASP.NET MVC3. Adding a web project, it gives me all the files required for jquery to run.
It gives me Content Folder and some folders for storing css and Images.
It also gives me Scripts folder, where I can have my .js files.
Whenever I want to download some custom JQUERY UI controls, It gives me a zip file which has different folders and scripts.
How do I map them so that, I am not keeping too many jquery files in my project.
For example, I want to use DatePicker Jquery UI, I go to jquery site and download them and it gives me a ZIP File which has various folders.
There is folder called development again it has got all the files.
If I wan to go for timepicker, I think there is only a CSS difference between timepicker and datepicker.
Timepicker needs slider. So I am not sure do i need to reference jqueryslider.js in my Layouts file.
Please shed some light on this mapping of downloaded files and already existing files in MVc3?
if have to include new Jquery UI Control, What should be the changes, is it just in .js file, images folder, or css folder.
I personally think its only css and images, please correct me.
Thank you.
All you need to do is add the content in the js folder to the scripts in your Scripts folder and copy everything from the css\\ folder into the Content folder of your MVC application.
Once you have done this, you simply add the following references to the _Layout file in your Shared folder (just modify to match your version of JQuery and the correct version of your JQuery-UI download):
<link href="#Url.Content("~/Content/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
Just remember to keep the reference to your JQuery library (jquery-1.7.1.min.js in the example above) before the reference to the JQueryUI scripts.
-- Kindly mark as the answer if this has been helpful
I have three solutions; all share one thing in common which is the stylesheets. I would like to have only one version of the stylesheets.
I thought to put this and maybe other things like common scripts in one project and then have all three solutions reference this same project.
But how can I link in the stylesheets to my layout pages. Currently I use:
<link href="#Url.Content("~/Content/Stylesheets/Package3.css")"
rel="stylesheet" type="text/css" />
Any advice would be appreciated.
You might be able to do this with your source control? But the better solution might ultimately be to make a 4th project of your static shared files (ex. css, javascript, images) and deploy them to a URL that you will only use to serve this content.
So you can reference in your project like:
<link href="http://mydomain.com/content/stylesheets/package3.css" rel=stylesheet" type="text/css" />
Where mydomain.com is actually your 4th project that only hosts the static content.
You can use the 'Add as link' option.