It seemed like I can download jquery theme I like from jquery site to create new theme. But that does not change much in my MVC site. Can anybody tell me how I can change theme in MVC4 application?
As I understand your question:
How can I replace the base theme in a MVC4 application with a custom generated theme from the jquery ui theme roller?
My steps for my razor MVC4 visual studio 2012 application created from some MS standard template for intranet application. jQueryUI already was installed in my application with the base theme from nuget.
Created the theme using http://jqueryui.com/themeroller/ and downloaded the zip to some temp folder
Extracted the jquery-ui-1.10.3.custom.js into my Scripts folder
Edited my RegisterBundles method in the file App_Start/Bundle.Config
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-1.10.1.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-1.10.3.custom.js"));
Extracted the css subfolder named for my custom theme (e.g. my-theme) into the themes folder "Content/themes/my-theme".
Comment out the base theme lines in App_Start BundleConfig.cs and replaced the big base theme StyleBundle with the single-file bundle
bundles.Add(new StyleBundle("~/Content/themes/my-theme/css").Include(
"~/Content/themes/my-theme/jquery-ui-1.10.3.custom.css"));
//bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
// "~/Content/themes/base/jquery.ui.core.css",
// "~/Content/themes/base/jquery.ui.resizable.css",
// ...
Finally replaced the base-theme bundle call in my layout.cshtml with the new one.
#Styles.Render("~/Content/themes/kjr-theme/css")
#Styles.Render("~/Content/themes/base/css")
If there is a better or cleaner way to replace the theme in MVC4 applications, please let me know!
Michael
Since jquery ui version was changed, jquery ui scripts in MVC4 template seem to be not compatible with current version of jquery ui. So you can't just copy css directory of downloaded jquery ui to your theme folder of MVC4, and expect it would be applied for your site.
So what I did was to replace jquery.ui.theme.css with corresponding part in jquery.ui.custom.css. And new theme was correctly shown in my MVC4 site now.
Code Project site uses an implementation of Chris Pietschmann
Code Project:
http://www.codeproject.com/Articles/32847/ASP-NET-MVC-Dynamic-Themes
Related
i have created a web site with VS2013 IDE and my .net framework version is 4.5.
i select default webform template with no authentication and IDE generate project with many code and aspx file.
when i run my code from IDE then aspx extension is not showing. i comment this code in RouteConfig.cs file
//var settings = new FriendlyUrlSettings();
//settings.AutoRedirectMode = RedirectMode.Permanent;
//routes.EnableFriendlyUrls(settings);
but still aspx extension is not showing. so tell me what i need to change as a result aspx extension should be shown.
Doing that is enough to remove friendly URLs for me, you do also have to edit your Site.Master etc to change the links from ~/About to ~/About.aspx for example.
Otherwise, check for other URL rewriting as described in Scott Gu's blog: https://weblogs.asp.net/scottgu/tip-trick-url-rewriting-with-asp-net
I downloaded kendoui core from Telerik's website. Folder has a js directory with separate files for each widget. I want to integrate kendoui with systemJS in my Aurelia app(built on top of skeleton-navigation). I was able to do this with JQueryUI as follows:
--Created a "jquery-ui#1.11.4" folder containing the jqueryUI JavaScript lib in github folder in jspm_packages folder
--Created a file called "jquery-ui#1.11.4.js" that exports the lib above like so:
module.exports = require("github:github/jquery-ui#1.11.4/jquery-ui.js")
--Defined jqueryui in my config file: "jquery-ui": "github:github/jquery-ui#1.11.4"
Now, if I want to use any widget, like the datepicker, i do this:
import { datepicker } from 'jquery-ui';
How do I do this for kendoUI? I read somewhere that the "kendo.core.js" file contains all widgets but it seems too lightweight and using it alone didnt work. It also has a complementary .map file. What is it for?
UPDATE: As suggested in the answer below, I decided to include kendoUI and jQuery with the script tag in my index page. Also instead of importing the whole kendoUI library (kendo.ui.core.min.js->670KB) I just included the files needed for kendoUI's date picker that I needed (kendo.core, kendo.popup, kendo.calendar and kendo.datepicker->99.1KB). Incase anyone wants to use this approach, Remember that jQuery will have to be imported in index.html too and before any kendo files. Also, kendo.core should be imported before the others and datepicker after everything else(I.e. last)
The solution you are using for adding jQuery UI is not one that will scale. You should never write anything to the jspm_packages folder, as that folder is jspm's to use as it wishes. Also, you can simply install jQueryUI using JSPM (jspm install jquery-ui).
Your first option is to install KendoUI Core using jspm with jspm install kendo-ui.
If you'd prefer to go it alone, you should probably just load the kendo files using a <script> element. There's nothing wrong with doing this. These files are made to be used as global variables loaded using script tags, so don't fight it.
Again, there's nothing wrong with using script elements to load legacy (read non-modular) js files.
I have downloaded Kendo UI core open and free source and tried to use splitter as in this demo, but it did not work because in the js folder (from download) the kendo.all.min.js file is not present. Can anybody tell me what should I do? I tried using kendo.core.min.js but it did not work.
I don't want to use the CDN URL http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js in my project.
Thanks in advance!
The kendo.all.min.js is available only in the commercial Kendo UI Professional package. Kendo UI core ships with kendo.ui.core.min.js which is the file you should use.
I'm using Telerik grids, and want to customize the CSS. I've used Telerik's stylebuilder but I don't know what to do with it once I download the zip. Telerik says that I should
Simply add the files from this archive to your project, and your custom skin is ready go.
But I have no idea where in the project to add them, or even how exactly this is done. I moved the CSS files into the stylesheets folder (I'm using MS Visual Studio 2010) and linked to them, but no dice.
I've also read through this this and this but am still thoroughly confused.
Try the following:
Export theme from style builder, example classic.zip.
Contents of classic.zip
Folder: classic
File: telerik.classic.css
Extract zip to your project's content folder, c:\path to your project\Content\
Modify your master page style sheet regsitrar to include telerik.classic.css instead of the supplied style sheets.
:
<%= Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.classic.css"))
%>
I have implemented jqgrid within asp.net 3.5 vs2010. It is working fine as long as the asp.net page is onthe root folder, but when I move the page to a subfolder it tries to look for the js and css files with the foder under subfolder. The js and css files are in a folder under the root folder.
I am using the folowing code to reference to jquery files:
What it does is it appends the subfolder name to the path and the application is not able to find the js and css files. e.g /Scripts/jquery.jqGrid.js
How do I reference the js and css files under the html tag of asp.net page?
If you use developer version of jaGrid you have to modify the variable pathtojsfiles from the jquery.jqGrid.js depend on the path where you place jqGrid on your site.
I recommend you to include all files listed in jquery.jqGrid.js instead of using jquery.jqGrid.js. See this and this answers for more information.