how to add different jquery ui theme to visual studio 2012 MVC4 Project

asp.net-mvc-4, jquery, jquery-ui, visual-studio-2012

Solution

First make sure you are bundling the correct files.

App_Start/BundleConfig.cs

// you want to remove this
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
   "~/Content/themes/base/jquery-ui.core.css",
    ...
);
// and add this
bundles.Add(new StyleBundle("~/Content/themes/ui-lightness/css").Include(
    "~/Content/themes/ui-lightness/jquery-ui.core.css",
    ...
);

Then specify the bundled set in your layout.

_Layout.cshtml

@Styles.Render("~/Content/themes/base/css")          // remove this
@Styles.Render("~/Content/themes/ui-lightness/css")  // add this

This all assumes you installed the theme in `/Content/themes`

Easiest thing to do is find `base` and replace it with `ui-lightness` in your layout and bundle config.

Problem

Can some explain to me step by step how i can change jquery ui themes in visual studio 2012, For example when i use this command, Install-Package jQuery.UI.Themes.lightness, how do i make ui-lightness to appear or if i choose another theme how to display it as well. The reason is because i don't want to use default theme which is the Base theme. i want to know the right file to change Any help will be appreciated. This is what i have already in my layout page. ``` @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Styles.Render("~/Content/themes/base/css") @Styles.Render("~/Content/themes/ui-lightness/css") @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") @Styles.Render("~/Content/themes/ui-lightness/css") ```

Original source