After creating an MVC4 Mobile application in Visual Studio 2013, I am struggling to apply jquery mobile themeroller themes to it.
I attempted to replace the existing theme css with my custom theme, but it does not seem to be working at all.
See the code snippet below:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css" /*custom theme file*/));
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
Can anyone please point out what I might be missing in this setup?
Update:
I am having difficulty overriding the custom theme I created using themerollers. I have considered directly adding references to files like so:
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile.structure-1.2.0.min.css" />
After adding these CSS files, I include the necessary JS files. However, when I set the data-theme attribute to 'a', 'b', or 'c, I do not see the customized colors from themeroller reflected on the controls.