[SOLVED] Implementing a theme with jQuery ThemeRoller

Implementing a theme with jQuery ThemeRoller

I downloaded a theme and added the below files in the appropriate folders via my BundleConfig.cs file. After making the below modifications, when I display my website, I apparently am not getting a theme. It's plain vanilla! I downloaded a specific theme with everything checked and don't know why the website is not themed.

Can anybody tell me why?

using System.Web.Optimization;

namespace FuelTktImgRetrieval
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery-ui-{version}.custom.min.js",
                        "~/Scripts/jquery.contextmenu.js",
                        "~/Scripts/jquery.jqGrid.min.js",
                        "~/Scripts/jquery.searchFilter.js",
                        "~/Scripts/jquery.tablednd.js",
                        "~/Scripts/jquery.simple-dtpicker.js",
                        "~/Scripts/grid.addons.js",
                        "~/Scripts/grid.locale-en.js",
                        "~/Scripts/grid.postext.js",
                        "~/Scripts/grid.setcolumns.js",
                        "~/Scripts/ui.multiselect.js",
                        "~/Scripts/jquery-ui-min.js",
                        "~/Scripts/jquery.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/jquery.simple-dtpicker.css",
                      "~/Content/ui.jqgrid.css",
                      "~/Content/ui.multiselect.css",
                      "~/Content/searchFilter.css",
                      "~/Content/jquery-ui-min.css",
                      "~/Content/jquery-ui-structure.min.css",
                      "~/Content/jquery-ui-theme.min.css"));

            bundles.Add(new StyleBundle("~/images/png").Include(
                "~/images/progress.gif",
                "~/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png",
                "~/images/ui-bg_dots-small_65_a6a6a6_2x2.png",
                "~/images/ui-bg_flat_0_333333_40x100.png",
                "~/images/ui-bg_flat_65_ffffff_40x100.png",
                "~/images/ui-bg_flat_75_ffffff_40x100.png",
                "~/images/ui-bg_glass_55_fbf8ee_1x400.png",
                "~/images/ui-bg_highlight-hard_100_eeeeee_1x100.png",
                "~/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png",
                "~/images/ui-bg_highlight-soft_15_cc0000_1x100.png",
                "~/images/ui-icons_004276_256x240.png",
                "~/images/ui-icons_cc0000_256x240.png",
                "~/images/ui-icons_ffffff_256x240.png"));

            // Set EnableOptimizations to false for debugging. For more information,
            // visit http://go.microsoft.com/fwlink/?LinkId=301862
            BundleTable.EnableOptimizations = true;
        }
    }
}

Then, I updated my _Layout.cshtml file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Fuel Ticket Image Display</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/images/png")
    @Styles.Render("~/images/gif")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <form id="ftForm">
        <div class="container body-content">
            @RenderSection("featured")
            @RenderBody()
            <hr />
            <footer style="align-content:center">
                <p><center>Ryder Inc. &copy; @DateTime.Now.Year.</center></p>
            </footer>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </form>
</body>
</html>

Solution

Have you checked your websites source code to see if the file is being added in the header of your application?

ASP.NET MVC doesn't like javascript files with .min. in the filename. I'm not entirely sure why but it's most likely to do with the fact that .NET MVC's bundling will minify files loaded.

If you were to rename your "~/Scripts/jquery-ui-{version}.custom.min.js" to "~/Scripts/jquery-ui-{version}.custom.js" then it should load just fine. You will also need to do the same to your jGrid and JQuery UI files.